Show Menu
TOPICS×

Track clicked component with Adobe Analytics

Use the event-driven Adobe Client Data Layer with AEM Core Components to track clicks of specific components on an Adobe Experience Manager site. Learn how to use rules in Experience Platform Launch to listen for click events, filter by component and send the data to an Adobe Analytics with a track link beacon.

What you will build

The WKND marketing team wants to understand which Call to Action (CTA) buttons are performing the best on the home page. In this tutorial we will add a new rule in Experience Platform Launch that listens for cmp:click events from Teaser and Button components and send the component ID and a new event to Adobe Analytics alongside the track link beacon.

Objectives

  1. Create an event-driven rule in Launch based on the cmp:click event.
  2. Filter the different events by component resource type.
  3. Set the component id clicked and send event Adobe Analytics with the track link beacon.

Prerequisites

This tutorial is a continuation of Collect page data with Adobe Analytics and assumes that you have:

Inspect the Button and Teaser Schema

Before making rules in Launch it is useful to review the schema for the Button and Teaser and inspect them in the data layer implementation.
  1. 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.
  2. Expand the response and find entries prefixed with button- and teaser-xyz-cta entry. You should see a data schema like the following:
    Button Schema:
    button-2e6d32893a:
        @type: "wknd/components/button"
        dc:title: "View All"
        parentId: "page-2eee4f8914"
        repo:modifyDate: "2020-07-11T22:17:55Z"
        xdm:linkURL: "/content/wknd/us/en/magazine.html"
    
    
    Teaser Schema:
    teaser-da32481ec8-cta-adf3c09db9:
        @type: "nt:unstructured"
        dc:title: "Surf's Up"
        parentId: "teaser-da32481ec8"
        xdm:linkURL: "/content/wknd/us/en/magazine/san-diego-surf.html"
    
    
    These are based on the Component/Container Item Schema . The rule we will create in Launch will use this schema.

Create a CTA Clicked rule

The Adobe Client Data Layer is an event driven data layer. When the any Core Component is clicked a cmp:click event will be dispatched via the data layer. Next create a rule to listen for the cmp:click 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 Add Rule .
  3. Name the rule CTA Clicked .
  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 componentClickedHandler = 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:click 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:click into the data layer
    window.adobeDataLayer.push(function (dl) {
       //add event listener for `cmp:click` and callback to the `componentClickedHandler` function
       dl.addEventListener("cmp:click", componentClickedHandler);
    });
    
    
    The above code snippet will add an event listener by pushing a function into the data layer. When the cmp:click event is triggered the componentClickedHandler function is called. In this function a few sanity checks are added and a new event object 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("Component Clicked");
    console.debug("Component Path: " + event.path);
    console.debug("Component type: " + event.component['@type']);
    console.debug("Component text: " + event.component['dc:title']);
    
    
    The event object is passed from the trigger() method called in the custom event. component is the current state of the component derived from the data layer getState that triggered the click.
  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 the WKND Site and open the developer tools to view the console. Select Preserve log .
  13. Click one of the Teaser or Button CTA buttons to navigate to another page.
  14. Observe in the developer console that the CTA Clicked rule has been fired:

Create Data Elements

Next create a Data Elements to capture the component ID and title that was clicked. Recall in the previous exercise the output of event.path was something similar to component.button-b6562c963d and the value of event.component['dc:title'] was something like "View Trips".

Component ID

  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 Add New Data Element .
  3. For Name enter Component ID .
  4. For Data Element Type select Custom Code .
  5. Click Open Editor and enter the following in the custom code editor:
    if(event && event.path && event.path.includes('.')) {
        // split on the `.` to return just the component ID
        return event.path.split('.')[1];
    }
    
    
    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 CTA Clicked rule created in the previous exercise but would not be safe to use in other contexts.

Component Title

  1. Navigate to the Data Elements section and click Add New Data Element .
  2. For Name enter Component Title .
  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.

Add a condition to the CTA Clicked rule

Next, update the CTA Clicked rule to to ensure that the rule only fires when the cmp:click event is fired for a Teaser or a Button . Since the Teaser's CTA is considered a separate object in the data layer it is important to check the parent to verify it came from a Teaser.
  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 Custom Code .
  4. Click Open Editor and enter the following in the custom code editor:
    if(event && event.component && event.component.hasOwnProperty('@type')) {
        //Check for Button Type
        if(event.component['@type'] === 'wknd/components/button') {
            return true;
        } else if (event.component['@type'] == 'nt:unstructured') {
            // Check for CTA inside a Teaser
            var parentComponentId = event.component['parentId'];
            var parentComponent = window.adobeDataLayer.getState('component.' + parentComponentId);
    
            if(parentComponent['@type'] === 'wknd/components/teaser') {
                return true;
            }
        }
    }
    
    return false;
    
    
    The above code first checks to see if the resource type was from a Button and then checks to see if the resource type was from a CTA within a Teaser .
  5. Save the changes.

Congratulations!

You just used the event-driven Adobe Client Data Layer and Experience Platform Launch to track clicks of specific components on an Adobe Experience Manager site.