Integrate AEM Sites and Adobe Analytics

Log in to Experience Platform and create a Tag property (if you haven’t already).

Ensure that an initial tag JavaScript library has been created and promoted to the tag environment.

Copy the JavaScript embed code from the tag environment where your library has been published to.

In your browser, open a new tab and navigate to WKND Site

Open the Experience Platform Debugger browser extension

Navigate to Experience Platform Tags > Configuration and under Injected Embed Codes replace the existing embed code with your embed code copied from step 3.

Enable Console Logging and Lock the debugger on the WKND tab.

Navigate to WKND Site.

Open the browser’s developer tools and navigate to the Console. Run the following command:

adobeDataLayer.getState();

Above code returns the current state of the Adobe Client Data Layer.

Expand the response and inspect the page entry. You should see a data schema like the following:

page-2eee4f8914:
    @type: "wknd/components/page"
    dc:description: WKND is a collective of outdoors, music, crafts, adventure sports, and travel enthusiasts that want to share our experiences, connections, and expertise with the world.
    dc:title: "WKND Adventures and Travel"
    repo:modifyDate: "2020-08-31T21:02:21Z"
    repo:path: "/content/wknd/us/en.html"
    xdm:language: "en-US"
    xdm:tags: ["Attract"]
    xdm:template: "/conf/wknd/settings/wcm/templates/landing-page-template"

To send page data to Adobe Analytics let’s use the standard properties like dc:title, xdm:language, and xdm:template of the data layer.

For more information, review the Page Schema from the Core Components Data Schemas.

Navigate to Experience Platform and into the tag property integrated with the AEM Site.

Navigate to the Rules section in the Tag Property UI and then click Create New Rule.

Name the rule Page Loaded.

In the Events subsection, click Add to open the Event Configuration wizard.

For Event Type field, select Custom Code.

Click Open Editor in the main panel and enter the following code snippet:

var pageShownEventHandler = function(evt) {
   // defensive coding to avoid a null pointer exception
   if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
      //trigger the Tag Rule and pass event
      console.log("cmp:show event: " + evt.eventInfo.path);
      var event = {
         //include the path of the component that triggered the event
         path: evt.eventInfo.path,
         //get the state of the component that triggered the event
         component: window.adobeDataLayer.getState(evt.eventInfo.path)
      };

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

//set the namespace to avoid a potential race condition
window.adobeDataLayer = window.adobeDataLayer || [];
//push the event listener for cmp:show into the data layer
window.adobeDataLayer.push(function (dl) {
   //add event listener for `cmp:show` and callback to the `pageShownEventHandler` function
   dl.addEventListener("cmp:show", pageShownEventHandler);
});

The above code snippet adds an event listener by pushing a function into the data layer. When cmp:show event is triggered the pageShownEventHandler function is called. In this function, a few sanity checks are added and a new event is constructed with the latest state of the data layer for the component that triggered the event.

Finally the trigger(event) function is called. The trigger() function is a reserved name in the tag property and it triggers the rule. The event object is passed as a parameter which in turn is exposed by another reserved name in the tag property. Data Elements in the tag property can now reference various properties using code snippet like event.component['someKey'].

Save the changes.

Next under Actions click Add to open the Action Configuration wizard.

For Action Type field, choose Custom Code.

Click Open Editor in the main panel and enter the following code snippet:

console.log("Page Loaded ");
console.log("Page name: " + event.component['dc:title']);
console.log("Page type: " + event.component['@type']);
console.log("Page template: " + event.component['xdm:template']);

The event object is passed from the trigger() method called in the custom event. Here, the component is the current page derived from the data layer getState in the custom event.

Save the changes and run a build in the tag property to promote the code to the environment used on your AEM Site.

Navigate to your AEM site and open the developer tools to view the console. Refresh the page and you should see that the console messages have been logged:

Navigate to Experience Platform and into the tag property integrated with the AEM Site.

Navigate to the Data Elements section and click Create New Data Element.

For the Name field, enter the Component Resource Type.

For the Data Element Type field, select Custom Code.

Click Open Editor button and enter the following in the custom code editor:

if(event && event.component && event.component.hasOwnProperty('@type')) {
    return event.component['@type'];
}

Save the changes.

Click Add Data Element button

For the Name field, enter Page Name.

For the Data Element Type field, select Custom Code.

Click Open Editor button, and enter the following in the custom code editor:

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

Save the changes.

Click the Add Data Element button

For the Name field, enter Page Template.

For the Data Element Type field, select Custom Code.

Click Open Editor button, and enter the following in the custom code editor:

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

Save the changes.

You should now have three data elements as part of your rule:

Navigate to Experience Platform and into the tag property integrated with the AEM Site.

Go to Extensions > Catalog

Locate the Adobe Analytics extension and click Install

Under Library Management > Report Suites, enter the report suite ids you would like to use with each tag environment.

Check the box to enable Use Activity Map.

Under General > Tracking Server, enter your tracking server, for example, tmd.sc.omtrdc.net. Enter your SSL Tracking Server if your site supports https://

Click Save to save the changes.

In the Tag Property UI, navigate to the Page Loaded rule created earlier.

Under Conditions click Add to open the Condition Configuration wizard.

For Condition Type field, select Value Comparison option.

Set the first value in the form field to %Component Resource Type%. You can use the Data Element Icon to select the Component Resource Type data element. Leave the comparator set to Equals.

Set the second value to wknd/components/page.

Save the changes.

In the Page Loaded rule, remove the Core - Custom Code action (the console statements):

Under Actions subsection, click Add to add a new action.

Set the Extension type to Adobe Analytics and set the Action Type to Set Variables

In the main panel, select an available eVar and set as the value of the Data Element Page Template. Use the Data Elements icon to select the Page Template element.

Scroll down, under Additional Settings set Page Name to the data element Page Name:

Save the changes.

Next, add an extra Action to the right of the Adobe Analytics - Set Variables by tapping the plus icon:

Set the Extension type to Adobe Analytics and set the Action Type to Send Beacon. Since this action is considered a page view, leave the default tracking set to s.t().

Save the changes. The Page Loaded rule should now have the following configuration:

• 1. Listen for the cmp:show event.
• 2. Check that the event was triggered by a page.
• 3. Set Analytics variables for Page Name and Page Template
• 4. Send the Analytics Page View Beacon

Save all the changes and build your tag library, promoting to the appropriate Environment.

Open the WKND Site in your browser.

Click the Debugger icon to open the Experience Platform Debugger.

Make sure that the Debugger is mapping the tag property to your Development environment, as described earlier and Console Logging is checked.

Open the Analytics menu and verify that the report suite is set to your report suite. The Page Name should also be populated:

Scroll down and expand Network Requests. You should be able to find the evar set for the Page Template:

Return to the browser and open up the developer console. Click through the Carousel at the top of the page.

Observe in the browser console the console statement:

This is because the Carousel does trigger a cmp:show event but because of our check of the Component Resource Type, no event is fired.

Navigate to an article page like Western Australia. Observe that Page Name, and Template Type change.