ÃÛ¶¹ÊÓƵ

[Integration]{class="badge positive"}

Load and fire a Target call load-fire-target

[AEM Sites as a Cloud Service, AEM Sites 6.5]{class="badge informative"}

Learn how to load, pass parameters to page request, and fire a Target call from your site page using a tags Rule. Web page information is retrieved and passed as parameters using the ÃÛ¶¹ÊÓƵ 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.

Transcript
Hi there, in this video, let me give you a quick introduction to the core components out of the box integration with ÃÛ¶¹ÊÓƵ client data layer, and how to access the data stored in a data layer, to drive business goals using ÃÛ¶¹ÊÓƵ Experience Platform launches data elements. A data layer is a JavaScript object that web developers can add to sites to collect systematic data about the delivered content and the visitors interaction with it. ÃÛ¶¹ÊÓƵ Experience Manager Cloud Service provides a set of components to speed up development and reduce maintenance costs. Marketers use these components to author content for an organization’s marketing needs. Let’s get started. I have a sample reference we WKND Site hosted on AEM Cloud Service, and let’s open the sample page to view it. The site pages comprises of AEM core competence. Let’s preview the site page and open the browser’s Developer Console. ÃÛ¶¹ÊÓƵ data layer object contains information about page metadata and component details. ÃÛ¶¹ÊÓƵ data layer object provides access to stored client data, and enables you to add additional client data to it. Core components out of the box integration with ÃÛ¶¹ÊÓƵ client data layer helps business users collect information about how users interact with these components. And that information is used to optimize the end user experience. You can also add or remove event listeners to it. ÃÛ¶¹ÊÓƵ data layer provides a standardized API and support the XDM data model that allows customer experience tracking. Now let’s open a new tab in the browser and open launch UI. Let’s quickly locate the launch property name, that we obtained from the previous step and open it. Now let’s create a rule in ÃÛ¶¹ÊÓƵ launch UI, to capture page information from a site page. Please create a new rule or open an existing rule, and let’s add a new event to trigger the rule. Select the extension as core and then choose a custom code event. Open the code editor and let’s copy the code snippet that will add an event listener by pushing a function into the data layer. When the CMP show event is triggered on your site page, the page show event handler function is called. A few sanity checks are added in this function, and a new data object is created with the latest state of the data layer for the component that triggered the event. After that, the trigger data object is called. Trigger function is reserved name in launch and will trigger the launch rule. We’ve pass the event object as a parameter, which will be exposed by another reserved name in launch name event. Data elements in launch can now reference various properties like event dot component and then provide a key to get the value. Let’s save our changes for the rule event. Select the data elements authoring option, and let’s create data elements for capturing page ID, page name and page path. Provide data element name, select the extension as core, select the data element type as custom code, and then open the code editor. At the beginning of this video, we discovered how the data layer object for our sample site looks and observed some of the page metadata stored in the data layer. When we created the rule, we exposed a custom event object in the script made available and scoped based on the event that triggered the rule in launch. The value of a data element is not set until the data element is referenced within a rule. Therefore, it is safe to use this data element inside a rule like the launch library loaded rule, created in the previous step. But would not be secure to use it in other contexts. So using the event object, we can obtain the page ID value for our site page. Save your changes, and let’s navigate back to the data elements screen. Similarly, let’s create two data elements for capturing page path and page title using the event object passed by the page load event. Now, let’s navigate to our page load rule and use the data elements that we created in the previous step.
Now let’s create a custom code to save cookies, if you’re using a cloud based instance. Users sometimes use a cloud based instances, with target for testing or simple proof of concept purposes. These domains and many others are part of a public suffix list. Modern browsers won’t save cookies if you’re using these domains, unless you customize the cookie domain setting under target global settings. So let’s add a custom code to our site before loading target. Add your domain to the target global settings dot cookie domain value, and then save your changes. Click on the Add action option, and then select the extension as ÃÛ¶¹ÊÓƵ target with action type as load target. On rule execution, this action loads ÃÛ¶¹ÊÓƵ target to your site page. And let’s create another action to add data elements as a parameter to our page load request. Select the extension as ÃÛ¶¹ÊÓƵ target, action type as add params to page load request. Let’s create a key value mapping for the parameter name and its associated value in the action configuration window. You could provide a custom parameter name and choose a data element using the Finder option for the value. Repeat the step for page title and the page path parameters. At this point, we have actions to load target, and to add params to page load request. We need to create another action to make a call to ÃÛ¶¹ÊÓƵ target with the parameters. Create another action with the extension as ÃÛ¶¹ÊÓƵ target, action type as a fire page load request. Select the body hiding as enabled, and then save your changes. The changes gets saved within launch. But we need to run a publishing flow to push these changes to a publish environment. Select the publishing flow option. You can create a new library using the Add new library option or use an existing library. I have a development library created before, and let’s open to edit it. Now it’s time to add all our changes to the development environment, and then Save and Run the development build. If the build is successful, you could verify your changes by embedding the launch development script library onto your site page. For now, I’m pushing my changes from development to the production environment. Once the build is successful, let’s switch to our WKND site homepage and refresh the screen. To see if the rule works as expected, let’s use the ÃÛ¶¹ÊÓƵ Experience Cloud Debugger browser plugin. Click on the summary view and you can notice that the ÃÛ¶¹ÊÓƵ target extension is loaded under ÃÛ¶¹ÊÓƵ Experience Platform Launch. Under ÃÛ¶¹ÊÓƵ target summary, you can view the version of the eighty.gs file loaded on your site page. Filter the network request for target and check the post body attribute. Under the parsed value, you can notice that the page ID, page path and page title are being passed as parameters to ÃÛ¶¹ÊÓƵ target. I hope I was able to give you an idea on how to capture information from a site page using data elements, and then fire an ÃÛ¶¹ÊÓƵ target call with the data elements as request parameters. -

Page Load Rule

The ÃÛ¶¹ÊÓƵ Client Data Layer is an event-driven data layer. When the AEM Page data layer is loaded, it triggers an event cmp:show . In the video, the tags Library Loaded rule is invoked using a custom event. Below, you can find the code snippets used in the video for the custom event and for the data elements.

Custom Page Shown Event page-event

Page shown event configuration and custom code

In the tags 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 and 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 tags 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 tags Rule, passing in the new `event` object
        // the `event` obj can now be referenced by the reserved name `event` by other tags data elements
        // i.e `event.component['someKey']`
        trigger(launchEvent);
   }
}

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

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

// Push the event custom listener onto the ÃÛ¶¹ÊÓƵ 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 defines 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 tags Event with the derived event info at its payload.

The tags Rule is triggered using the tags’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 tags Data Elements, by another reserved name in tags named event. Data Elements in tags 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 tags property.

Data Elements

Data Elements

Tags Data Elements map the data from the event object triggered in the custom Page Shown event to variables available in ÃÛ¶¹ÊÓƵ 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] ÃÛ¶¹ÊÓƵ 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

recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d