Envoyer un événement et une dimension personnalisée si l’expérience Google Optimize est en cours d’exécution

J’aime beaucoup Google Optimize. Il a une interface utilisateur assez intuitive, la configuration des expériences est facile et des intégrations pour Google Tag Manager et Google Analytics sont intégrées au système. Il s’agit toujours d’un outil de test A / B côté client basé sur JavaScript, de sorte que les problèmes de scintillement et de chargement asynchrone sont toujours présents (bien que cela soit quelque peu atténué par l’extrait de masquage de page).

Un problème avec l’intégration de Google Analytics est la difficulté de créer des segments pour les sessions où les utilisateurs participaient activement à l’expérience. En fait, il n’y a aucun signal spécifique dans Google Analytics qui vous indique le MAINTENANT l’utilisateur “expérimente” une expérience. Vous trouverez le Nom de l’expérience et ID du test dimensions, oui, mais ils ont un inconvénient :

Les Nom de l’expérience et ID du test les dimensions sont portée par l’utilisateur pendant toute la durée de l’expérience !

Ainsi, si l’utilisateur participe à une expérience, tous ses accès et sessions à partir de ce moment jusqu’à la fin de l’expérience seront annotés avec les valeurs Nom de l’expérience et ID de l’expérience.

Mais je veux savoir exactement et seul les sessions où mes utilisateurs voyaient le contenu du test. Je souhaite utiliser ces informations pour créer des segments dans lesquels je peux afficher d’autres objectifs ou entonnoirs de conversion que ceux configurés dans Optimize. Ceci est de plus en plus important si vous souhaitez utiliser Optimize pour des preuves de concept de personnalisation rapides, car il est alors essentiel de savoir comment l’utilisateur a réagi pendant la session lorsqu’il a vu le changement dans le contenu.

Quoi qu’il en soit, pour que tout cela fonctionne avec le raréfié analytics.js extrait et Gestionnaire de balises Googlenous allons utiliser une fonctionnalité sur laquelle j’ai rarement écrit : customTask. OK, j’ai beaucoup écrit à ce sujet.

Avec customTasknous pouvons ajouter automatiquement une dimension personnalisée de session à tous les appels qui ont participé à un test, et dans certains cas extrêmes, nous enverrons également un événement à GA pour nous assurer que les données sont transférées.

Comment ça fonctionne

Lorsque vous accédez à une page sur laquelle un test Optimize est en cours d’exécution (c’est-à-dire que la page est (l’une des) cible(s) du test), vos appels Google Analytics contiendront le &exp paramètre avec une valeur composée de tous les ID de test et de variantes auxquels l’utilisateur participe :

Cette clé est ce que GA utilise ensuite pour attribuer l’utilisateur à ces expériences particulières. Ainsi, une fois que cet appel atteint GA, mon ID client sera associé à ces deux ID de test jusqu’à ce que le test soit terminé.

Maintenant, ce que je veux vraiment qu’il se passe, c’est qu’une dimension personnalisée soit ajoutée à ce hit de vue de page s’il a le &exp clé. Pour cela, je dois utiliser customTask afin qu’il puisse sniffer les requêtes à Google Analytics, et au cas où elles contiennent cette clé, ajoutez dynamiquement le paramètre Custom Dimension avec la chaîne de test. De cette façon, les données de test seront envoyées à Google Analytics dans la dimension personnalisée de mon choix !

Si vous utilisez Gestionnaire de balises Google pour déployer Google Optimize, le même code s’appliquera, mais au lieu de tirer parti d’un hit de page vue, la balise Optimize utilisera un spécial hitType === 'data' hit, qui transmet vos données de test à GA.

Malheureusement pour nous, cela data Le type d’appel n’est pas exposé dans Google Analytics, nous ne pouvons donc pas l’utiliser pour segmenter nos visiteurs, et le superposer avec une dimension personnalisée ne fait rien. Nous devons donc configurer Google Tag Manager pour qu’il envoie un message supplémentaire un événement lorsqu’un data hit est rencontré qui a également le &exp paramètre avec lui.

Mise en œuvre via analytics.js

Si vous utilisez le analytics.js extrait, voici ce que vous devez faire :

<script>   // Analytics.js snippet   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');    ga('create', 'UA-XXXXXX-Y','auto')    // NEW: Add customTask field to tracker   ga('set', 'customTask',  function(model) {      // Change this to the Custom Dimension index to which you want to send the experiment data!     var customDimensionIndex = '6';          // Make sure the new hit is only generated once (thanks Vibhor Jain!)     var hasNewHitBeenGenerated = false;          var globalSendTaskName = '_' + model.get('trackingId') + '_sendHitTask';          var originalSendTask = window[globalSendTaskName] = window[globalSendTaskName] || model.get('sendHitTask');          model.set('sendHitTask', function(sendModel) {       var ga = window[window['GoogleAnalyticsObject']];       var hitPayload = sendModel.get('hitPayload');       if (sendModel.get('exp')) {         if (sendModel.get('hitType') === 'data' && !hasNewHitBeenGenerated) {           var tracker = sendModel.get('name');           originalSendTask(sendModel);           ga(tracker + '.send', 'event', 'Optimize', sendModel.get('exp'), {nonInteraction: true});           hasNewHitBeenGenerated = true;           return;         }         if (hitPayload.indexOf('&cd' + customDimensionIndex + '=') === -1) {           sendModel.set('hitPayload', hitPayload + '&cd' + customDimensionIndex + '=' + sendModel.get('exp'), true);         }       }       originalSendTask(sendModel);     });   });   // NEW BLOCK ENDS    ga('require', 'GTM-XXXXXX');   ga('send', 'pageview'); </script>

La modification apportée à l’extrait de code analytics.js modifié par Optimize d’origine correspond à l’intégralité du bloc commençant par // NEW:... et se terminant par // NEW BLOCK ENDS.

Ce code écoute tous les hits GA envoyés avec le tracker par défaut, et s’ils ont le &exp , la dimension personnalisée est ajoutée dynamiquement aux appels, ainsi que la chaîne d’ID d’expérience à laquelle l’utilisateur est associé. Notez que vous devez modifier la valeur de var customDimensionIndex pour refléter l’index de dimension personnalisée que vous avez créé dans Google Analytics. Je préfère utiliser un Dimension personnalisée limitée à la sessionmais vous pouvez également utiliser la portée d’accès pour une granularité accrue.

C’est tout ce que vous devez faire avec analytics.js. Sur les pages non incluses dans le test, aucune dimension personnalisée ou aucun appel supplémentaire n’est envoyé. Les affaires seront comme d’habitude.

Mise en œuvre via Google Tag Manager

Dans Google Tag Manager, vous devez créer un nouveau Variable JavaScript personnaliséeet donnez-lui un nom comme {{JS – customTask – Optimiser l’expérience}}. La variable devrait ressembler à ceci :

function() {   return function(model) {          // Change this to the Custom Dimension index to which you want to send the experiment data!     var customDimensionIndex = '6';      // Make sure the new hit is only generated once (thanks Vibhor Jain!)     var hasNewHitBeenGenerated = false;          var globalSendTaskName = '_' + model.get('trackingId') + '_sendHitTask';          var originalSendTask = window[globalSendTaskName] = window[globalSendTaskName] || model.get('sendHitTask');      model.set('sendHitTask', function(sendModel) {       var ga = window[window['GoogleAnalyticsObject']];       var hitPayload = sendModel.get('hitPayload');       if (sendModel.get('exp')) {         if (sendModel.get('hitType') === 'data' && !hasNewHitBeenGenerated) {           var tracker = sendModel.get('name');           originalSendTask(sendModel);           ga(tracker + '.send', 'event', 'Optimize', sendModel.get('exp'), {nonInteraction: true});           hasNewHitBeenGenerated = true;           return;         }         if (hitPayload.indexOf('&cd' + customDimensionIndex + '=') === -1) {           sendModel.set('hitPayload', hitPayload + '&cd' + customDimensionIndex + '=' + sendModel.get('exp'), true);         }       }       originalSendTask(sendModel);     });   }; } 

C’est à peu près exactement le même code que vous utiliseriez dans le analytics.js.

Ensuite, rendez-vous dans votre Optimiser Google tag, et faites défiler jusqu’à Champs à définir. Ajouter un nouveau champ avec :

Nom de domaine: tâche personnalisée

Évaluer: {{JS – customTask – Optimiser l’expérience}}

Pour que ça ressemble à ça :

Et ça devrait être ça. Maintenant, lorsque vous parcourez les pages de test, vous devriez voir un résultat avec le type 'data' en cours d’envoi, et immédiatement après cela, un événement qui ressemble à ceci :

Résumé

Je souhaite vraiment que l’intégration Optimize / Google Analytics nous donne un hit ou une dimension que nous pourrions utiliser pour segmenter les sessions qui ont activement participé à une expérience. À l’heure actuelle, vous devez soit reproduire les conditions de test dans un segment (et si vous n’échantillonnez qu’une partie de vos visiteurs, même cela ne suffira pas), soit utiliser une solution comme celle décrite dans cet article.

Même si c’était superflu et inutile, je suis ravi de montrer encore un autre cas d’utilisation sympa pour customTask. Je suis à peu près certain que si nous n’avions pas déjà donné à notre petit garçon un nom magnifique, le monde l’aurait connu comme customTask Ahava. Pour l’instant, il n’aura qu’à se contenter de son surnom. C’est à quel point j’aime customTask!