Tutorial on Working with the Manager of MarTech Agents

ℹ️ Status: 🟢 Production

The Martech Agents Manager is a tool to manage the loading of different marketing technology agents.

Table of Contents

• Tutorial on Working with the Manager of MarTech Agents
  • Table of Contents
  • 🔎 Investigating the Object/Instance
    • Task
  • 🏋🏽 Pushing Agents
    • Task
  • 💡 Why can't I just append a <script> to the body?
    • Task
  • 🙇🏼 Final Assignment
  • 🎉 Congrats!

🔎 Investigating the Object/Instance

When we load the library, then there is an object of the MartechAgentsManager class on the page. This object serves all the functionalities via methods, e. g. to put agents, the communication and the orchestration between them on the page.

Task

1. Go to UAO and open the console.
2. Type MartechAgentsManager and take a look at the object.
3. What can you find there?
4. Try to make sense of the methods. What is their purpose?

Solution

{
    // some meta data
    "version": "v2.0.3",
    "build_date": "2024-06-07T14:23:08.792Z",
    "build_env": "production",
    "env": "default"
    // Prototype with utility functions
    [[Prototype]]: {
        currentEnv: void,
        getAgents: void
        push: void // pushing Agents to be handled by MTAM
        // ...
    }
}

🏋🏽 Pushing Agents

Since the promise of the MTAM is to run agents defined by JavaScript code on the page, it needs to get the information about the agent's code. Pushing code works like this: MartechAgentsManager.push(() => /* functionality */)).

Task

1. Try to push a custom agent that logs "Hello World!" into the console.

Solution

const customAgent = () => console.log("Hello World!");
MartechAgentsManager.push(customAgent) // Hello World!

💡 Why can't I just append a <script> to the body?

You might question this: Isn't that overengineered? Why can't I just append a <script> to the body? Well, you might be right but there are two significant features of MTAM you will learn about in just a second which will challenge this view.

Task

You might already saw the function MartechAgentsManager.getRuntime(). The Runtime is a shared store for all the agents where they can store information and can subscribe themselves to updates on the information.

ℹ️ Note

For starters, make sure to be logged out and stay on UAO. It might be nice to clear the console once in a while with clear().

1. Try to get the Runtime Object
   • Hint

     Via the `MartechAgentsManager` object
     

     2. Try to access the "userId" from the Runtime. What value do you expect? 3. Now, log in and try it again. 4. In this step, try to subscribe the runtime itself to changes regarding the variable "martech". It should log "Hello MarTech!" if the value changes. -
     Hint

     Via the `runtime.subscribe(string, () => void)` function
     

     6. Now, set the variable martech to "xyz" in the runtime. -
     Hint

     Via the `runtime.set(string, value)` function
     

Solution

const runtime = MartechAgentsManager.getRuntime();
runtime.get("userId"); // undefined, because not logged in
// logs in
runtime.get("userId"); // number, because logged in
runtime.subscribe("martech", () => console.log("Hello MarTech!"));
runtime.set("martech", "xyz"); // Hello MarTech!

ℹ️ Note

Congrats! Now you know the basics of MTAM!

🙇🏼 Final Assignment

1. Create a custom agent that pushes the follwing object into the dataLayer:
   • { event: "MarTech", value: "Hello World!" }
   • Hint

     Push to the `dataLayer` with `dataLayer.push(object)`
     

     2. Configure that agent to also set the runtime variable "MarTechPushed" to true. 3. Subscribe the Runtime to changes regarding the variable MarTechPushed. It should log "done" on changes. 4. Push your agent to the MartechAgentsManager 5. Open the dataLayer object to see your changes and note "done" being logged.

Solution

const runtime = MartechAgentsManager.getRuntime();
const customAgent = () => {
    dataLayer.push({ event: "MarTech", value: "Hello World!" });
    runtime.set("MarTechPushed", true);
}
runtime.subscribe("MarTechPushed", () => console.log("done"));
MartechAgentsManager.push(customAgent)
/*
  "done"
  dataLayer = [{...}, {
    event: "MarTech",
    gtm.uniqueEventId: number,
    value: "Hello World!"
  }]
*/

🎉 Congrats!

Congrats on grasping the most significant functionality of MTAM!

ℹ️ Note

One additional thing is loadAfter, which we could not capture here. This is an array that we can give to the MTAM for a particular agent. The MTAM then ensures that the agent subscribes to the status of all agents noted in the array. Once these agents have indicated that they are loaded, our agent can also run. This for example is crucial for Onetrust. Onetrust must first be loaded and saves the consent information in the Runtime. After onetrust has been loaded, the other agents can subscribe to the consent information.

Authors: Phil Pieper

---

Last updated: March 01, 2025 at 16:42

By: Phil Pieper

📄 View source

Repository: PIT-MarTech/martech-agents-manager