Show Menu
TOPICS×

Collect page data with Adobe Analytics

Learn to use the built-in features of the Adobe Client Data Layer with AEM Core Components to collect data about a page in Adobe Experience Manager Sites. Experience Platform Launch and the Adobe Analytics extension will be used to create rules to send page data to Adobe Analytics.

What you will build

In this tutorial you will trigger a Launch rule based on an event from the Adobe Client Data Layer, add conditions for when the rule should be fired, and send the Page Name and Page Template of an AEM Page to Adobe Analytics.

Objectives

  1. Create an event-driven rule in Launch based on changes to the data layer
  2. Map page data layer properties to Data Elements in Launch
  3. Collect page data and send to Adobe Analytics with the page view beacon

Prerequisites

The following are required:
Need help integrating Launch and your AEM site? See this video series .

Switch Launch Environments for WKND Site

https://wknd.site is a public facing site built based on an open source project designed as a reference and tutorial for AEM implementations.
Instead of setting up an AEM environment and installing the WKND code base, you can use the Experience Platform debugger to switch the live https://wknd.site/ to your Launch Property. Of course you can use your own AEM site if it already has the Adobe Client Data Layer enabled
  1. Login to Experience Platform Launch and create a Launch Property (if you haven't already).
  2. Ensure that an initial Launch Library has been created and promoted to a Launch environment .
  3. Copy the Launch embed code from the environment that your Library has been published to.
  4. In your browser open a new tab and navigate to https://wknd.site/
  5. Open the Experience Platform Debugger browser extension
  6. Navigate to Launch > Configuration and under Injected Embed Codes replace the existing Launch embed code with your embed code copied from step 3.
  7. Enable Console Logging and Lock the debugger on the WKND tab.

Verify Adobe Client Data Layer on WKND Site

The WKND Reference project is built with AEM Core Components and has the Adobe Client Data Layer enabled by default. Next, verify the Adobe Client Data Layer is enabled.
  1. Navigate to https://wknd.site .
  2. Open the browser's developer tools and navigate to the Console . Run the following command:
    adobeDataLayer.getState();
    
    
    This returns the current state of the Adobe Client Data Layer.
  3. 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"
    
    
    We will use standard properties derived from the Page schema , dc:title , xdm:language and xdm:template of the data layer to send page data to Adobe Analytics.
    Don't see the adobeDataLayer javascript object? Ensure that the Adobe Client Data Layer has been enabled on your site.

Create a Page Loaded 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 . Create a rule that will be triggered based on the cmp:show event.
  1. Navigate to Experience Platform Launch and into the Web property integrated with the AEM Site.
  2. Navigate to the Rules section in the Launch UI and then and click Create New Rule .
  3. Name the rule Page Loaded .
  4. Click Events Add to open the Event Configuration wizard.
  5. Under Event Type select Custom Code .
  6. 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 Launch Rule and pass event
          console.debug("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 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(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 will add an event listener by pushing a function into the data layer. When the 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.
    After that trigger(event) is called. trigger() is a reserved name in Launch and will "trigger" the Launch Rule. We pass the event object as a parameter which in turn will be exposed by another reserved name in Launch named event . Data Elements in Launch can now reference various properties like so: event.component['someKey'] .
  7. Save the changes.
  8. Next under Actions click Add to open the Action Configuration wizard.
  9. Under Action Type choose Custom Code .
  10. Click Open Editor in the main panel and enter the following code snippet:
    console.debug("Page Loaded ");
    console.debug("Page name: " + event.component['dc:title']);
    console.debug("Page type: " + event.component['@type']);
    console.debug("Page template: " + event.component['xdm:template']);
    
    
    The event object is passed from the trigger() method called in the custom event. component is the current page derived from the data layer getState in the the custom event. Recall from earlier the Page schema exposed by the data layer in order to see the various keys exposed out of the box.
  11. Save the changes and run a build in Launch to promote the code to the environment used on your AEM Site.
    It can be very useful to use the Adobe Experience Platform Debugger to switch the embed code to a Development environment.
  12. 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:

Create Data Elements

Next create several Data Elements to capture different values from the Adobe Client Data Layer. As seen in the previous exercise we have seen it is possible to access the properties of the data layer directly through custom code. The advantage of using Data Elements is that they can be re-used across Launch rules.
Recall from earlier the Page schema exposed by the data layer:
Data elements will be mapped to the @type , dc:title , and xdm:template properties.

Component Resource Type

  1. Navigate to Experience Platform Launch and into the Web property integrated with the AEM Site.
  2. Navigate to the Data Elements section and click Create New Data Element .
  3. For Name enter Component Resource Type .
  4. For Data Element Type select Custom Code .
  5. Click Open Editor and enter the following in the custom code editor:
    if(event && event.component && event.component.hasOwnProperty('@type')) {
        return event.component['@type'];
    }
    
    
    Save the changes.
    Recall that the event object is 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 of a Rule like the Page Loaded rule created in the previous step but would not be safe to use in other contexts.

Page Name

  1. Click Add Data Element .
  2. For Name enter Page Name .
  3. For Data Element Type select Custom Code .
  4. Click Open Editor 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.

Page Template

  1. Click Add Data Element .
  2. For Name enter Page Name .
  3. For Data Element Type select Custom Code .
  4. Click Open Editor 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.
  5. You should now have three data elements as part of your rule:

Add the Analytics Extension

Next add the Analytics extension to your Launch property. We need to send this data somewhere!
  1. Navigate to Experience Platform Launch and into the Web property integrated with the AEM Site.
  2. Go to Extensions > Catalog
  3. Locate the Adobe Analytics extension and click Install
  4. Under Library Management > Report Suites , enter the report suite ids you would like to use with each Launch environment.
    It's okay to use one report suite for all environments in this tutorial, but in real life you would want to use separate report suites, as shown in the image below
    We recommend using the Manage the library for me option as the Library Management setting as it makes it much easier to keep the AppMeasurement.js library up-to-date.
  5. Check the box to enable Use Activity Map .
  6. Under General > Tracking Server , enter your tracking server, e.g. tmd.sc.omtrdc.net . Enter your SSL Tracking Server if your site supports https://
  7. Click Save to save the changes.

Add a condition to the Page Loaded rule

Next, update the Page Loaded rule to use the Component Resource Type data element to ensure that the rule only fires when the cmp:show event is for the Page . Other components can fire the cmp:show event, for example the Carousel component will fire it when the slides change. Therefore it is important to add a condition for this rule.
  1. In the Launch UI, navigate to the Page Loaded rule created earlier.
  2. Under Conditions click Add to open the Condition Configuration wizard.
  3. For Condition Type select Value Comparison .
  4. 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 .
  5. Set the second value to wknd/components/page .
    It is possible to add this condition within the custom code function that listens for the cmp:show event created earlier in the tutorial. However, adding it within the UI gives more visibility to additional users that might need to make changes to the rule. Plus we got use our data element!
  6. Save the changes.

Set Analytics Variables and trigger Page View Beacon

Currently the Page Loaded rule simply outputs a console statement. Next, use the data elements and the Analytics extension to set Analytics variables as an action in the Page Loaded rule. We will also set an additional action to trigger the Page View Beacon and send the collected data to Adobe Analytics.
  1. In the Page Loaded rule remove the Core - Custom Code action (the console statements):
  2. Under Actions, click Add to add a new action.
  3. Set the Extension type to Adobe Analytics and set the Action Type to Set Variables
  4. 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.
  5. Scroll down, under Additional Settings set Page Name to the data element Page Name :
    Save the changes.
  6. Next, add an additional Action to the right of the Adobe Analytics - Set Variables by tapping the plus icon:
  7. Set the Extension type to Adobe Analytics and set the Action Type to Send Beacon . Since this is considered a page view, leave the default tracking set to s.t() .
  8. 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
  9. Save all the changes and build your Launch library, promoting to the appropriate Environment.

Validate the Page View Beacon and Analytics call

Now that the Page Loaded rule sends the Analytics beacon, you should be able to see the Analytics tracking variables using the Experience Platform Debugger.
  1. Open the WKND Site in your browser.
  2. Click the Debugger icon to open the Experience Platform Debugger.
  3. Make sure the Debugger is mapping the Launch property to your Development environment, as described earlier and Console Logging is checked.
  4. Open the Analytics menu and verify that the report suite is set to your report suite. The Page Name should also be populated:
  5. Scroll down and expand Network Requests . You should be able to find the evar set for the Page Template :
  6. Return to the browser and open up the developer console. Click through the Carousel at the top of the page.
  7. 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.
    If you don't see any console logs, ensure that Console Logging is checked under Launch in the Experience Platform Debugger.
  8. Navigate to an article page like Western Australia . Observe that Page Name, and Template Type change.

Congratulations!

You just used the event-driven Adobe Client Data Layer and Experience Platform Launch to collect data page data from an AEM Site and send it to Adobe Analytics.

Next Steps

Check out the following tutorial to learn how to use the event-driven Adobe Client Data layer to track clicks of specific components on an Adobe Experience Manager site .