Track clicked component with Adobe Analytics

Navigate to WKND Home page

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 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: "wknd/components/teaser/cta"
    dc:title: "Surf's Up"
    parentId: "teaser-da32481ec8"
    xdm:linkURL: "/content/wknd/us/en/magazine/san-diego-surf.html"

Above data details are based on the Component/Container Item Schema. The new tag rule uses this schema.

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

Navigate to the Rules section in the Tag Property UI, then click Add Rule.

Name the rule CTA Clicked.

Click Events > 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 componentClickedHandler = function(evt) {
   // defensive coding to avoid a null pointer exception
   if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
      //trigger Tag 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 Tag Rule, passing in the new `event` object
      // the `event` obj can now be referenced by the reserved name `event` by other Tag Property 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 adds an event listener by pushing a function into the data layer. Whenever 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.

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.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. The component object is the current state of the component derived from the data layer getState() method and is the element that triggered the click.

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 the WKND Site and open the developer tools to view the console. Also, select the Preserve log checkbox.

Click one of the Teaser or Button CTA buttons to navigate to another page.

Observe in the developer console that the CTA Clicked rule has been fired:

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

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

For Name field, enter Component ID.

For Data Element Type field, select Custom Code.

Click Open Editor button 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.

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

For Name field, enter Component Title.

For 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.

In the Tag Property UI, navigate to the CTA Clicked rule created earlier.

Under Conditions click Add to open the Condition Configuration wizard.

For Condition Type field, select Custom Code.

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

if(event && event.component && event.component.hasOwnProperty('@type')) {
    // console.log("Event Type: " + event.component['@type']);
    //Check for Button Type OR Teaser CTA type
    if(event.component['@type'] === 'wknd/components/button' ||
       event.component['@type'] === 'wknd/components/teaser/cta') {
        return true;
    }
}

// none of the conditions are met, return false
return false;

The above code first checks to see if the resource type was from a Button or if the resource type was from a CTA within a Teaser.

Save the changes.

In the CTA Clicked rule, remove the Core - Custom Code action (the console statements):

Under Actions, click Add to create an action.

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

Set the following values for eVars, Props, and Events:

• evar8 - %Component ID%
• prop8 - %Component ID%
• event8

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.

Under Tracking set the radio button to s.tl().

For Link Type field, choose Custom Link and for Link Name set the value to: %Component Title%: CTA Clicked:

The above config combines the dynamic variable from the data element Component Title and the static string CTA Clicked.

Save the changes. The CTA Clicked rule should now have the following configuration:

• 1. Listen for the cmp:click event.
• 2. Check that the event was triggered by a Button or Teaser.
• 3. Set Analytics variables to track the Component ID as an eVar, prop, and an event.
• 4. Send the Analytics Track Link Beacon (and do not treat it as a page view).

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 the Console Logging is checked.

Open the Analytics menu and verify that the report suite is set to your report suite.

In the browser, click one of the Teaser or Button CTA buttons to navigate to another page.

Return to the Experience Platform Debugger and scroll down and expand Network Requests > Your Report Suite. You should be able to find the eVar, prop, and event set.

Return to the browser and open up the developer console. Navigate to the footer of the site and click one of the navigation links:

Observe in the browser console the message “Custom Code” for rule “CTA Clicked” was not met.

The above message is because the Navigation component does trigger a cmp:click event but because of Condition to the rule that checks the resource type no action is taken.