Load and fire a Target call

Learn how to load, pass parameters to page request, and fire a Target call from your site page using a Launch Rule. Web page information is retrieved and passed as parameters using the Adobe Client Data Layer that lets you collect and store data about visitors’ experience on a webpage and then make it easy to access this data.

Page Load Rule

The Adobe Client Data Layer is an event driven data layer. When the AEM Page data layer is loaded, it will trigger an event cmp:show . In the video, the Launch Library Loaded rule is invoked using a custom event. Below, you can find the code snippets used in the video for the custom event as well as for the data elements.

Custom Page Shown Event

Page shown event configuration and custom code

In the Launch property, add a new Event to the Rule

  • Extension: Core
  • Event Type: Custom Code
  • Name: Page Show Event Handler (or something descriptive)

Tap the Open Editor button an paste in the following code snippet. This code must be added to the Event Configuration and a subsequent Action.

// Define the event handler function
var pageShownEventHandler = function(coreComponentEvent) {

    // Check to ensure event trigger via AEM Core Components is shaped correctly
    if (coreComponentEvent.hasOwnProperty("eventInfo") && 
        coreComponentEvent.eventInfo.hasOwnProperty("path")) {
    
        // Debug the AEM Component path the show event is associated with
        console.debug("cmp:show event: " + coreComponentEvent.eventInfo.path);

        // Create the Launch Event object
        var launchEvent = {
            // Include the ID of the AEM Component that triggered the event
            id: coreComponentEvent.eventInfo.path,
            // Get the state of the AEM Component that triggered the event           
            component: window.adobeDataLayer.getState(coreComponentEvent.eventInfo.path)
        };

        //Trigger the Launch Rule, passing in the new `event` object
        // the `event` obj can now be referenced by the reserved name `event` by other Launch data elements
        // i.e `event.component['someKey']`
        trigger(launchEvent);
   }
}

// With the AEM Core Component event handler, that proxies the event and relevant information to Adobe Launch, defined above...

// Initialize the adobeDataLayer global object in a safe way
window.adobeDataLayer = window.adobeDataLayer || [];

// Push the event custom listener onto the Adobe Data Layer
window.adobeDataLayer.push(function (dataLayer) {
   // Add event listener for the `cmp:show` event, and the custom `pageShownEventHandler` function as the callback
   dataLayer.addEventListener("cmp:show", pageShownEventHandler);
});

A custom function define the pageShownEventHandler, and listens for events emitted by AEM Core Components, derives the relevant information the Core Component, packages it up into an event object, and triggers the Launch Event with the derived event info at its payload.

The Launch Rule is triggered using the Launch’s trigger(...) function which is only available from within a Rule’s Event’s Custom Code code snippet definition.

The trigger(...) function takes an event object as a parameter which in turn is exposed in Launch Data Elements, by another reserved name in Launch named event. Data Elements in Launch can now reference data from this event object from the event object using syntax like event.component['someKey'].

If trigger(...) is used outside the context of an Event’s Custom Code event type (for example, in an Action), the JavaScript error trigger is undefined is thrown on the Web site integrated with the Launch property.

Data Elements

Data Elements

Adobe Launch Data Elements map the data from the event object triggered in the custom Page Shown event to variables available in Adobe Target, via the Core extension’s Custom Code Data Element Type.

Page ID Data Element

if (event && event.id) {
    return event.id;
}

This code returns the Core Component’s generate unique Id.

Page ID

Page Path Data Element

if (event && event.component && event.component.hasOwnProperty('repo:path')) {
    return event.component['repo:path'];
}

This code returns the AEM page’s path.

Page path

Page Title Data Element

if (event && event.component && event.component.hasOwnProperty('dc:title')) {
    return event.component['dc:title'];
}

This code returns the AEM page’s title.

Page Title

Troubleshooting

Why are my mboxes not firing on my web pages?

Target Cookie Domain Error

> AT: [page-init] Adobe Target content delivery is disabled. Ensure that you can save cookies to your current domain, there is no "mboxDisable" cookie and there is no "mboxDisable" parameter in the query string.

Solution

Target customers sometimes use cloud-based instances with Target for testing or simple proof-of-concept purposes. These domains, and many others, are part of the Public Suffix List .
Modern browsers won’t save cookies if you are using these domains unless you customize the cookieDomain setting using targetGlobalSettings().

window.targetGlobalSettings = {  
   cookieDomain: 'your-domain' //set the cookie directly on this subdomain, for example: 'publish-p1234-e5678.adobeaemcloud.com'
};

Next Steps

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free