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.

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>

toto

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>