at.js custom events

Information about at.js custom events, which lets you know when an mbox request or offer fails or succeeds.

Historically, mbox.js didn't let other JavaScript code that runs on the page know what happens behind the scenes. With the advancement of at.js, we had a unique opportunity to fix this issue.

According to our customers there are several scenarios that they would like to be notified of, including:

  • An mbox request failed due to timeout, wrong status code, JSON parse error, etc.

  • An mbox request succeeded.

  • Offer rendering failed due to wrapping mbox element missing, selector can not be found, etc.

  • Offer rendering succeeded. DOM changes have been applied.

Pre-defined events have a structure that allows you to extract the required data, based on event type.

To make sure that events can be used in different scenarios, the custom events have a payload object that is assigned to the detail property of the event object (that is passed to the handler). Also to avoid passing strings as event names, the events are exposed as constants using adobe.target.event namespace.

This section contains the following information:

Structure

Key Type Description

type

String

Event type, can be one of (adobe.target.event), e.g.:

  • at-request-failed - adobe.target.event.REQUEST_FAILED

  • at-request-succeeded - adobe.target.event.REQUEST_SUCCEEDED

  • at-content-rendering-failed - adobe.target.event.CONTENT_RENDERING_FAILED

  • at-content-rendering-succeeded - adobe.target.event.CONTENT_RENDERING_SUCCEEDED

mbox

String

mbox name

message

String

Contains human-readable description, such as what happened, the error message, etc.

tracking

Object

Contains the sessionId and deviceId. In some cases, deviceId could be missing because Target couldn't retrieve it from edge server.

Usage

document.addEventListener(adobe.target.event.REQUEST_SUCCEEDED, function(event) {
  console.log('Event', event);
});