This article describes how to add and configure the Adobe Target tag, formerly called the Adobe Target asynchronous or synchronous version

Table of Contents Placeholder

Pre-requisites

  • Adobe Marketing Cloud Account Service
  • utag, version 4.26 or above
  • If you will be using the Adobe Experience Cloud ID Service, add the Adobe Experience Cloud ID service before the Adobe Target tag.
  • If using Internet Explorer (IE), only version 9.x and above is supported.

Supported Versions

  • 1.7.0
  • 2.0.0

Tag Configuration

First, go to Tealium's Tag Marketplace and add the Adobe Target tag to your profile (how to add a tag?).

After adding the tag, configure the below settings:

  • Client Code: The version of the Target library. Template must be dropped to receive new versions. Version 2.x includes the changes for Multiple Offers and SPA
  • Timeout: Set to 5000 or greater. This is time (in ms) to wait for a response from Target before assuming the Target server is not responding.
  • Adobe Org ID: Used with the visitor tracking across Adobe Target and Site Catalyst. Found in the mbox.js "var imsOrgId = 'XXXXXXXXXXXXXXXXXXXXXXXX@AdobeOrg'"
  • Library Endpoint Path: The path variable in the library call (generally does not need changing).
  • Auto Create Global mbox: Indicates whether the global mbox request should be fired or not
  • Global mbox Name: Adobe typically uses "target-global-mbox" for the name of the globally hidden mbox. This tag will automatically call mboxCreate to create this mbox.

Load Rules

Load Rules determine when and where to load an instance of this tag on your site.

Recommended Load Rule:

Data Mappings

Mapping is the process of sending data from a data layer variable to the corresponding destination variable of the vendor tag. For instructions on how to map a variable to a tag destination, see data mappings.

The destination variables for the Adobe Target tag are built into its Data Mapping tab. Available categories are:

Standard

Destination Name Description
Client Code (config.clientCode) The client name (i.e. mycompany in the mycompany.tt.omtrdc.net)
Organization ID (config.imsOrgId) Used with the visitor tracking across Adobe Target and Site Catalyst. Found in the mbox.js "var imsOrgId = 'XXXXXXXXXXXXXXXXXXXXXXXX@AdobeOrg'"
Server Domain (config.serverDomain) Represents Target edge server
Enable Cross Domain (config.crossDomain) Indicates whether cross-domain tracking is enabled or not
Target Timeout (config.timeout) Set to 5000 or greater. This is time (in ms) to wait for a response from Target before assuming the Target server is not responding.
Global Mbox Name (config.globalMboxName) Adobe typically uses "target-global-mbox" for the name of the globally hidden mbox. This tag will automatically call mboxCreate to create this mbox.
Enable Global Mbox Creation [Boolean] (config.globalMboxAutoCreate) Indicates whether the global mbox request should be fired or not
Library Endpoint Path (config.endpoint) The path variable in the library call (generally does not need changing).
Default Content Hidden Style (config.defaultContentHiddenStyle) Used only for wrapping mboxes that use DIV with class name "mboxDefault" and are executed via mboxCreate(), mboxUpdate(), or mboxDefine() to hide default content
Default Content Visible Style (config.defaultContentVisibleStyle) Used only for wrapping mboxes that use DIV with class name "mboxDefault" and are executed via mboxCreate(), mboxUpdate(), or mboxDefine() to reveal applied offer if any or default content
Body Hidden Style (config.bodyHiddenStyle) Used only when globalMboxAutocreate === true to minimize the chance of flicker.
Enbale Body Hidding [Boolean] (config.bodyHidingEnabled) Used to control flicker when target-global-mbox is used to deliver offers created in the Visual Experience Composer , also known as visual offers
Device Id Lifetime [Number] (config.deviceIdLifetime) This is time (in ms) to retain the device ID
Session Id Lifetime [Number] (config.sessionIdLifetime) This is time (in ms) to retain the session ID
Selectors Polling Timeout [Number] (config.selectorsPollingTimeout) Represents how long the client is willing to wait for all the elements identified by selectors to appear on the page.
Activities created via the Visual Experience Composer (VEC) have offers that contain selectors.
Visitor API Timeout [Number] (config.visitorApiTimeout) Represents the Visitor API request timeout
Enable Mbox Edge Server Override (config.overrideMboxEdgeServer) Indicates if we should use .tt.omtrdc.net domain or mboxedge.tt.omtrdc.net domain.
If this value is true, mboxedge.tt.omtrdc.net domain will be saved to a cookie.
Override Mbox Edge Server Timeout [Number] (config.overrideMboxEdgeServerTimeout) Indicates the cookie lifetime that contains the mboxedge.tt.omtrdc.net value
Enable Optout [Boolean] (config.optoutEnabled) Indicates whether Target should call the Visitor API isOptedOut() function. This is part of Device Graph enablement
Secure Requests Only [Boolean] (config.secureOnly) Indicates whether at.js should use HTTPS only or be allowed to switch between HTTP and HTTPS based on the page protocol
Enable Page Load [Boolean] (config.pageLoadEnabled) Enable page load
Enable Views [Boolean] (config.viewsEnabled) Enable views

Track Events

Destination Name Description
Mbox Name (evt.mbox) The name of the Mbox
CSS Selectors (sevt.elector) CSS selectors used to find the HTML elements. The event listeners will be attached to found elements
HTML Event Type (evt.type) Represents a registered event type. It can be both HTML known events like: click, mousedown ,etc., as well as custom HTML events
Use Prevent Default [Boolean] (evt.preventDefault) Indicates whether to use event.preventDefault() in the event listener callback. Defaults to false
Mbox Parameters [Object] (evt.params) An object of key-value pairs that has the following structure:
{"param1": "value1", "param2": "value2"}
Timeout [Number] (evt.timeout) Timeout in milliseconds
Success Function [function] (evt.success) A callback function used to signal that event has been reported
Error Function [function] (evt.error) A callback function used to signal that event could not be reported

Parameters

Destination Name Description
mboxParams.### Change ### to the name of your parameter. Add parameters to the mbox to provide data to your Target implementation for segmentation and targeting
targetPageParamsAll.### Change ### to the name of your parameter. Add parameters to the global mbox
targetPageParams.### Change ### to the name of your parameter. Add parameters to all moboxes on the page

Multiple Offers and SPA

Destination Name Description
Get Offers Request Type (request_type) The type for the getOffers() request. Either prefetch or execute
Fetch All Views (offers.fetchViews) Calls getOffers() to retrieve all views for the selected Request Type
Consumer Id (offers.consumerId) Default value is client's global mbox if not provided. This key is used to generate the supplemental data ID used for A4T integration
Request Timeout (offers.timeout) The request timeout. If not specified the default at.js timeout is used
Request Id (offers.id) One of tntId, thirdPartyId, or marketingCloudVisitorId is required
Request Id - thirdPartyId (offers.id.thirdPartyId) The third party ID. Maximum size = 128
Views Array (offers.views) [Array] An array of objects which pass in parameters to be used to retrieve relevant views in active activities
PageLoad Array (offers.pageLoad) [Array] An array of objects which retrieve offers with specified parameters when page loads
Mboxes Array (offers.mboxes) [Array] An array of objects which pass in parameters to be used to retrieve relevant mboxes
CSS Selectors (selector) [Array] An array of CSS selectors to be applied to the response object. Must match number of views/pageload/mboxes in response
Response Object (offersResponse) The response object to apply. Response objects received from getOffers are placed into the u.offersReceived array
View Name (viewName) Pass in any name as a string type that you want to represent your view. This view name appears in the Modifications panel of the VEC for marketers to create actions and run their A/B and XT activities
Increase Impression Count (countPage) [Boolean] When true, notifications are sent to the Target backend for incrementing impression count. Default value is true

Differences in response for 1.7.x and up versus 2.x and up

Version 1.7.x

Will make a request including json in the url with parameters passed in the query string:

//[Your URL]/m2/[Your Client Code]/mbox/json?mbox=target-global-mbox&mboxSession=jshd753nmxn78334jds&mboxVersion=1.7.0&...

Version 2.x

Will make a request including the Library Endpoint Path, some informational query parameters, and a request payload with a json including the context data:

//[Your URL]/[Library Endpoint Path]?client=[Your Client Code]&sessionId=jshd753nmxn78334jds&version=2.0.0
//Request Payload
{
requestId: "cmncbhjs5832nfjsfhka3y42",
context: {
address: ...
browser: ... ...
}
}

Format of the 2.x getOffers and applyOffers

getOffers

{
  timeout: 5000, // Request Timeout
  request: {
    prefetch: { // Get Offers Request Type
      mboxes: [ // Mboxes Array
        {
          index: 0,
          name: "mbox1"
        },
        {
          index: 1,
          name: "mbox2"
        },
        {
          index: 2,
          name: "mbox3"
        }
      ]
    }
  }
}

The Mboxes, Views, and PageLoad arrays will need to be generated on the page or in an extension according to format of the Adobe getOffers documentation

// Fetch All Views set to true
{
    prefetch: { // Get Offers Request Type
      views: []
    }
  }
}

applyOffers

{response:{ //Response Object
  "execute": {
    "pageLoad": {
      "options": [{
        "type": "html",
        "content": "page-load"
      },
      {
        "type": "actions",
        "content": [{
          "type": "setHtml",
          "content": ""<h1>Container 1</h1>",
          "selector": "#container1",
          "cssSelector": "#container1"
        },
        {
          "type": "setHtml",
          "content": "<h3>Container 3</h3>",
          "selector": "#container3",
          "cssSelector": "#container3"
        }]
      }],
      "metrics": [{
        "type": "click",
        "selector": "#container1",
        "eventToken": "page-load-click-metric"
      }]
    }
  }
}}

For additional information on how the response object is formatted see the Adobe applyOffers documentation

When using the CSS Selectors data point the template will loop through the response object and apply each selector in order to the Mboxes, Views, or PageLoad array item in the same position as:

adobe.target.applyOffers({
  selector: "#[CSS Selector #]",
  response: {
    prefetch: {
      mboxes: [Mboxes, Views, or PageLoad array #]
    }
  }
});