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.
Name of the variable in event.detail |
Description |
variantType |
"personalization" or “optimizationTest” |
displayableName |
"Displayable name" of the content item (variant) being displayed |
name |
System name of the variant being displayed |
wrapper.displayableName |
"Displayable name" of the personalization or AB Test |
wrapper.name |
System name of the personalization or AB Test |
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:
<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
<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>