Tracking personalizations & AB Tests displays in Google Tag Manager

Introduction

When using jExperience for AB Tests and personalizations, some organizations need to make sure that they can track the displays of the content variations in their analytics solutions. jExperience provides the right mechanism to support this requirement: 

When a variant is displayed, a javascript event is triggered in the DOM, and it can be used to trigger any code or tag that you need. This event contains all information about the variant that is being displayed and about the AB Test or personalization it belongs too. 
One event is triggered by variant, so if several variants are being displayed (as it is for list personalizations), several events will be triggered.

Moreover each displayed variant are added to the window object under the digitalData.displayedVariants property.

DisplayWemVariant event description

• Event name: “displayWemVariant”
• Event trigger: The event is triggered on the DOM event “DOMContentLoaded”, so that javascript tags that are loaded before “DOMContentLoaded” can "listen" to this event . 
• Event's content: All information related to the variant being displayed and to the personalization or ab test can be found in event.detail:

Sample code for testing purposes

The following sample code can be injected as you would do for any other javascript code on a jahia page, usually leveraging one of these 3 solutions:

• Adding the js code in your templates
• Using a renderFilter
• Using a tag manager

<script>
   console.log("jExperience displayWemVariant listener added");
   document.addEventListener('displayWemVariant', function (event) {
     var variantInfo = event.detail;
     console.log("Display variant event triggered - all details about the variant displayed:"); 
     console.log(event.detail); 
   }, true); 
</script>

Sample code to send events to google analytics

<script>
   document.addEventListener('displayWemVariant', function (event) {
     var variantInfo = event.detail;
     if (variantInfo) {
       // Make sure GA module is set
       if (typeof ga !== 'undefined') {
           var type = variantInfo.type + (variantInfo.variantType ? ('_' + variantInfo.variantType) : '');
           var label = (variantInfo.wrapper.displayableName ?variantInfo.wrapper.displayableName.trim().substring(0, 65) : variantInfo.wrapper.name) +
               ' - ' + (variantInfo.displayableName ? variantInfo.displayableName.trim().substring(0, 65) : variantInfo.name);

           // Sending an event
           ga('send', 'event', type, 'Display', label, 5, true);
       }
     }
   }, true); 
</script>

Get the displayed variants from the window object

If it's not possible for you to register a listener before the sending of the displayWemVariant event, you can get the displayed variants from the window object.

The following sample code can be used to show all variants which has been displayed. 

console.log("get displayed variants from window");
window.digitalData.displayedVariants.forEach((variant) => {
  console.log("Display all details about the variant displayed:");
  console.log(variant);
});

Keep in mind to call this script only when the page is fully loaded and that all variants are display to avoid to miss informations.