Tracking personalizations & AB Tests displays in Google Tag Manager

November 14, 2023

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:
Name of the variable in event.detail Description
variantType "page" or "content"
type "personalization" or “optimization”
wrapper.id UUID of the personalization or the AB Test
wrapper.name System name of the personalization or AB Test
wrapper.path path of the personalization or AB Test
wrapper.displayableName "Displayable name" of the personalization or AB Test 
wrapper.inControlGroup For personalizations only, true if the profile or session is in the control group for the personalization. false otherwise. *Available for jExperience 2.5+ 
id UUID of the variant being displayed
name System name of the variant being displayed
path Path of the variant being displayed
displayableName "Displayable name" of the content item (variant) being displayed 
inControlGroup For personalizations only, true if the profile or session is in the control group for the personalization. false otherwise. *Available for jExperience 2.5+

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

The following paragraph applies to jExperience 2.5 and above.

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.