This article describes how to add and configure the Adobe Target tag.

In this article:

Table of Contents Placeholder

Prerequisites

  • Adobe Marketing Cloud Account Service
  • Tealium Universal Tag (utag.js) version 4.26 or greater
  • Adobe Target Extension

If you will be using the Adobe Experience Cloud ID Service tag, add it and order it before the Adobe Target tag.

If using Internet Explorer (IE), only version 9.x and above is supported.

Supported Versions

Several versions of the Adobe Target tag are available. Here is the list of code versions currently configured:

VersionsAvailable.png

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.

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 is set true to minimize the chance of flicker.
Enable 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.
Enable Optin [Boolean] (config.optinEnabled) Indicates whether Target should call the Visitor API isOptedIn() 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.
Authoring Script URL (config.authoringScriptUrl) Allows you to set the authoring script URL.

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"}
Mbox Parameters Item (evt.params.###) Change ### to the name of your parameter. Add parameters to the mbox to provide data to your Target implementation for segmentation and targeting.
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 mboxes on the page.
targetPageParams.at_property Preconfigured parameter enabling you to define the at_property.

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 #]
    }
  }
});

 

Version history
Revision #:
17 of 17
Last update:
‎10-19-2020 09:24 AM
Updated by: