Call getOffers() for all views

adobe.target.getOffers({
    request: {
      prefetch: {
        views: [{}]
    }
  }
});

Call getOffers() to make an on-device decisioning

adobe.target.getOffers({

  decisioningMethod:"on-device",
  request: {
    execute: {
      mboxes: [
        {
          index: 0,
          name: "homepage"
        }
      ]
    }
 }
});

Call getOffers() to retrieve the latest views with the passed-in parameters and profile parameters

adobe.target.getOffers({
  request: {
    "prefetch": {
      "views": [
        {
          "parameters": {
            "ad": "1"
          },
          "profileParameters": {
            "age": 23
          }
        }
      ]
    }
  }
});

Call getOffers() to retrieve mboxes with parameters and profile parameters passed-in.

adobe.target.getOffers({
  request: {
    execute: {
      mboxes: [
        {
          index: 0,
          name: "first-mbox"
        },
        {
          index: 1,
          name: "second-mbox",
          parameters: {
            a: 1
          },
          profileParameters: {
            b: 2
          }
        }
      ]
    }
  }
});

Call getOffers() to retrieve the analytics payload from the client side

adobe.target.getOffers({
      request: {
        experienceCloud: {
          analytics: {
            logging: "client_side"
          }
        },
        prefetch: {
          mboxes: [{
            index: 0,
            name: "a1-serverside-xt"
          }]
        }
      }
    })
    .then(console.log)

Response:

{
  "prefetch": {
    "mboxes": [{
      "index": 0,
      "name": "a1-serverside-xt",
      "options": [{
        "content": "<img src=\"http://s7d2.scene7.com/is/image/TargetAdobeTargetMobile/L4242-xt-usa?tm=1490025518668&fit=constrain&hei=491&wid=980&fmt=png-alpha\"/>",
        "type": "html",
        "eventToken": "n/K05qdH0MxsiyH4gX05/2qipfsIHvVzTQxHolz2IpSCnQ9Y9OaLL2gsdrWQTvE54PwSz67rmXWmSnkXpSSS2Q==",
        "responseTokens": {
          "profile.memberlevel": "0",
          "geo.city": "bucharest",
          "activity.id": "167169",
          "experience.name": "USA Experience",
          "geo.country": "romania"
        }
      }],
      "analytics": {
        "payload": {
          "pe": "tnt",
          "tnta": "167169:0:0|0|100,167169:0:0|2|100,167169:0:0|1|100"
        }
      }
    }]
  }
}

The payload can then be forwarded to Adobe Analytics via the Data Insertion API.

Fetch and render data from multiple mboxes via getOffers() and applyOffers()

at.js 2.x lets you fetch multiple mboxes via the getOffers() API. You can also fetch data for multiple mboxes and then use applyOffers() to render the data in different locations identified by a CSS selector.

The following example shows a simple HTML page with at.js 2.x implemented:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>at.js 2.x, multiple selectors and multiple mboxes</title>
  <script src="at.js"></script>
</head>
<body>
  <div id="container1">Default content 1</div>

  <div id="container2">Default content 2</div>

  <div id="container3">Default content 3</div>
</body>
</html>

Assume that you have three containers that you want to modify via content received from Target. You can construct a single request for three mboxes in which each mbox has some content to render into the respective container.

The request and rendering code might look like the following example:

adobe.target.getOffers({
  request: {
    prefetch: {
      mboxes: [
        {
          index: 0,
          name: "mbox1"
        },
        {
          index: 1,
          name: "mbox2"
        },
        {
          index: 2,
          name: "mbox3"
        }
      ]
    }
  }
})
.then(response => {
  // get all mboxes from response
  const mboxes = response.prefetch.mboxes;
  let count = 1;

  mboxes.forEach(el => {
    adobe.target.applyOffers({
      selector: "#container" + count,
      response: {
        prefetch: {
          mboxes: [el]
        }
      }
    });

    count += 1;
  });
});

In the request > prefetch > mboxes section, there are three different mboxes. If the request completed successfully, you receive the response for each mbox from response > prefetch > mboxes. After you have the responses and the locations you want to use for rendering, you can invoke applyOffers() to render the content retrieved from Target. In this example we have the following mapping:

  • mbox1 > CSS selector #container1
  • mbox2 > CSS selector #container2
  • mbox3 > CSS selector #container3

This example uses the count variable to construct the CSS selectors. In a real-life scenario you could use a different mapping between the CSS selector and mbox.

Note that this example uses prefetch > mboxes, but you could also use execute > mboxes. Ensure that if you use prefetch in getOffers(), you should also use prefetch in the applyOffers() invocation.

Call getOffers() to perform a pageLoad

The following example shows you how to perform a pageLoad using getOffers() with at.js 2.x

adobe.target.getOffers({
    request: {
        execute: {
            pageLoad: {
                parameters: {}
            }
        }
    }
});
Previous pageadobe.target.getOffer()
Next pageadobe.target.applyOffer()

Target


Personalization & Experiementation Excellence with Recommendations and AI

Adobe Customer Success Webinars

Tuesday, Mar 4, 4:00 PM UTC

Adobe Target innovations, including GenAI, and best practices on AI-powered personalization and experimentation at scale.

Register

Connect with Experience League at Summit!

Get front-row access to top sessions, hands-on activities, and networking—wherever you are!

Learn more