Dernière mise à jour le 9 octobre 2020: customTask mis à jour vers une version plus stable.

Je suis un grand fan du commerce électronique amélioré dans Google Analytics. En fait, je pense que c’est le seul moyen valable de déployer le suivi du commerce électronique aujourd’hui, en particulier lors de l’utilisation de Google Tag Manager. La possibilité d’utiliser une variable JavaScript personnalisée et la possibilité de s’attaquer aux complet l’entonnoir de commerce électronique sont quelques-uns des avantages de l’utilisation du commerce électronique amélioré.

Cependant, le suivi de certains événements basés sur la vue, impressions en particulier, a un problème important en ce qui concerne la façon dont Google Analytics traite les événements. En un mot, lorsqu’il est mis en œuvre par le livre, les impressions sont envoyées pour toutes les impressions de produit sur la page lorsque la page est chargée. En d’autres termes, vous collectez les accès à partir des impressions que l’utilisateur n’aurait peut-être pas vu.

Cela aggrave également un certain nombre de problèmes :

• Google Analytics a un nombre maximum de visites par session de 500. Et c’est une limite stricte. Tout ce qui dépasse 500 sera simplement ne pas être enregistré dans la session (bien que si vous utilisez le GA360 payant, vous serez toujours facturé !). Si vous envoyez chaque impression séparément, ou même si vous les envoyez par lots mais que vous ne supprimez pas celles que l’utilisateur n’a jamais vues, vous approchez ou dépassez peut-être cette limite de quota.

• La longueur maximale de la charge utile est 8192 octets pour toute demande d’AG. Ceci est facilement dépassé si vous envoyez 50 à 60 impressions en un seul coup.

Dans cet article, je veux aborder ces deux problèmes en introduisant un moyen de suivi uniquement les impressions qui étaient visibles dans la fenêtre du navigateur.

Cette solution est écrite pour Gestionnaire de balises Googlecar il utilise un certain nombre de fonctionnalités intégrées nativement à la plate-forme.

je vais aussi utiliser customTaskcar je souhaite écrire la solution complète sans utiliser de balise HTML personnalisée.

Comment ça fonctionne

La solution repose sur la Déclencheur de visibilité des éléments pour identifier les impressions dans la fenêtre et les pousser dans un file d’attente batch. UN Déclencheur de minuterie est également utilisé pour purger la file d’attente batch au cas où l’utilisateur serait inactif. Enfin, si un utilisateur clics lors d’une impression, tous les éléments de la file d’attente batch sont envoyés, de même que si l’utilisateur quitte la page.

UN file d’attente batch est ce que nous allons utiliser pour regrouper les impressions vues en unités d’une certaine taille, de sorte que la demande à GA ne soit ni trop encombrée (risquant de dépasser la limite de longueur de la charge utile) ni trop clairsemée (risquant d’avoir trop de visites dans la session) .

Voici un flux simple du fonctionnement de la solution :

1. Lors du premier chargement de la page, un inventaire des objets d’impression est construit en identifiant un ecommerce.impressions objet dans le dataLayer.

2. Chaque impression de produit sur la page elle-même devra avoir un attribut d’identification qui relie l’impression de produit à l’objet correspondant dans le ecommerce.impressions tableau dans dataLayer. Cela devrait être quelque chose comme data-productid="impression1" où impression1 est l’ID de l’impression.

3. Les Visibilité des éléments le déclencheur attend les éléments avec ceci data-productid pour devenir visible sur la page, en ajoutant chacun dans un tableau par lots d’impressions vues.

4. Lorsque la longueur du tableau atteint le nombre maximal de lots que vous avez défini, les impressions du tableau par lots sont envoyées à GA, puis supprimées du tableau (afin que vous ne finissiez pas par les renvoyer).

5. Si l’utilisateur clics une impression de produit sur la page, un événement de clic sur le produit est envoyé avec ces données d’impression ainsi que tous les éléments de la file d’attente batch actuelle.

6. Toutes les 60 secondes (configurable), la file d’attente batch est également vidée et envoyée à GA pour éviter que les impressions ne soient bloquées dans la file d’attente pendant une longue période si l’utilisateur est inactif.

7. Lorsque l’utilisateur quitte la page en cours, un message personnalisé beforeunload listener enverra également toutes les impressions restantes dans la file d’attente par lots.

Le résultat final est que lorsque les impressions sont visualisées par le visiteur, les éléments sont ajoutés à la file d’attente par lots et envoyés chaque fois que la file d’attente se remplit. Il existe des garanties (minuterie, beforeunload) qui garantissent que les éléments ne sont jamais oubliés dans la file d’attente.

Ce n’est pas anodin à mettre en place, alors allons-y.

De quoi as-tu besoin

Tout d’abord, vous devez avoir une compréhension assez solide de ce que sont les impressions de commerce électronique amélioré, comment elles sont (traditionnellement) suivies et comment elles apparaissent dans vos rapports GA. Ce guide va ne pas passer en revue les bases. Consultez mon guide de commerce électronique amélioré, ainsi que la documentation d’assistance officielle de Google pour plus d’informations.

Pour que la solution fonctionne “prête à l’emploi”, vous aurez besoin d’un correctement formaté ecommerce.impressions objet dans le dataLayer déployé dans le modèle de page de préférence avant l’extrait de conteneur GTM. C’est ce que vous devriez déjà avoir si vous avez mis en œuvre les impressions de commerce électronique amélioré par livre.

Il est possible de modifier le code pour qu’il fonctionne avec des objets avec une composition différente, et il est également possible de le modifier pour qu’il fonctionne avec des impressions extraites de la page. Cependant, ce guide n’abordera pas ces cas extrêmes. Si vous souhaitez effectuer ces modifications vous-même, n’hésitez pas à le faire (faites-moi savoir dans les commentaires si vous avez besoin d’aide).

Une autre chose dont vous aurez besoin est un moyen de baliser tous les éléments HTML qui contiennent des impressions avec l’attribut personnalisé qui liera l’impression à l’élément correspondant dataLayer chose. Par exemple, voici à quoi ressembleraient les sept premiers produits de la page si vous utilisiez impressions données de la capture d’écran ci-dessus :

Comme vous pouvez le voir, la valeur dans data-productid correspond à la personne id valeurs dans le ecommerce.impressions chose.

Vous pouvez les ajouter dynamiquement à l’aide d’une balise HTML personnalisée et d’une manipulation magique du DOM, mais je vous recommande de le faire. correctement dès le début. L’ajout des attributs directement dans le code du modèle empêche l’émergence de conditions de concurrence, telles que le déclencheur Element Visibility n’identifiant pas les éléments auxquels vous avez dynamiquement ajouté les nouveaux attributs.

Une fois que vous avez le dataLayer objet et les attributs de données en place, vous pouvez vous mettre au travail sur les balises, les déclencheurs et les variables de Google Tag Manager.

Créer les variables

Nous allons avoir besoin d’une poignée de variables. Deux Tableau de recherche les variables géreront une partie de la logique des balises d’événement. UN JavaScript personnalisé variables pour le customTask sera là où la plus grande partie de la magie se produit. Ensuite, nous aurons également besoin d’un JavaScript personnalisé variable pour gérer la compilation de l’objet Enhanced Ecommerce.

Il y a beaucoup de pièces mobiles ici, alors mettons-nous au travail.

{{Recherche – Obtenir le libellé d’impression}}

Cette Variable de table de consultation sera utilisé pour remplir le Libellé de l’événement champ de la balise que nous allons créer label. En tant qu’étiquette, j’utilise “Impression View” ou “Impression Click”, selon le type d’événement qui a provoqué le déclenchement de la balise. Comme vous pouvez le deviner, la balise se déclenchera à la fois pour les impressions et les clics.

Voici à quoi devrait ressembler la variable Lookup Table :

{{Recherche – Obtenir une interaction d’impression}}

Cette Variable de table de consultation reviendra soit true ou alors falseselon que le coup a été non-interaction ou non. Nous créerons tout vues d’impressions comme non interactif, et le clic d’impression de produit sera interactif.

{{JS – Fonction – Gestionnaire d’impressions True View}}

C’est le principal moteur de la solution. C’est un customTask variable, conçue pour construire la file d’attente batch, pour créer le beforeunload gestionnaire, pour permettre aux appels de se déclencher (lorsque la file d’attente du lot est pleine ou qu’un produit est cliqué) et pour empêcher l’envoi des appels GA (si l’impression a simplement été ajoutée à la file d’attente).

Voici ce que le code dans le JavaScript personnalisé la variable doit ressembler à :

function() {   // Configure the following   var maxBatch           = 10,       batchVariableName  = '_impressions_batch',       productIdAttribute = 'data-productid';      // Do not touch anything below this   var targetElement = {{Click Element}},       event         = {{Event}};    if (event === 'gtm.click') {     while (!targetElement.getAttribute(productIdAttribute) && targetElement.tagName !== 'BODY') {       targetElement = targetElement.parentElement;     }   }    return function(customModel) {      // Set up the beforeunload listener only when the tag is first run.     if (typeof window[batchVariableName] === 'undefined') {       window.addEventListener('beforeunload', function() { 		window.dataLayer.push({           event: 'sendFinalBatch'         });       });     }          var shouldFire = false,         batch      = window[batchVariableName] = window[batchVariableName] || [],         impressionId,          ost;              if (event === 'gtm.elementVisibility') {       impressionId = targetElement.getAttribute(productIdAttribute);       batch.push(impressionId);       if (batch.length === maxBatch) { shouldFire = true; }     }          if (['sendFinalBatch', 'gtm.timer'].indexOf(event) > -1 && batch.length > 0) { shouldFire = true; }          if (event === 'gtm.click') { shouldFire = true; }          if (shouldFire) {       ost = customModel.get('sendHitTask');       customModel.set('sendHitTask', function(sendModel) {         ost(sendModel);         window[batchVariableName] = [];       });     } else { 	  customModel.set('sendHitTask', null);     }   }; } 

Tout d’abord, modifiez les trois variables au début du retour function.

• Ensemble maxBatch à la longueur maximale de la file d’attente batch. La valeur par défaut de 10 est probablement suffisant dans la plupart des cas.

• Ensemble batchVariableName à quoi la variable globale qui stocke la file d’attente batch doit être nommée. La valeur par défaut est, encore une fois, probablement correcte, mais vous voudrez la renommer dans les rares cas où une variable globale nommée _impressions_batch existe déjà et est utilisé.

• Ensemble productIdAttribute au nom de l’attribut HTML qui stocke l’ID avec chaque bloc HTML de produit sur la page. La valeur par défaut est data-productidce qui signifie que les structures HTML qui contiennent chaque impression de produit doivent avoir l’attribut data-productid="some_product_id" dans l’un des éléments (de préférence un élément qui enveloppe toute l’empreinte).

Permettez-moi de déchirer ce code et de vous montrer ce que fait chaque partie.

if (event === 'gtm.click') {   while (!targetElement.getAttribute(productIdAttribute) && targetElement.tagName !== 'BODY') {     targetElement = targetElement.parentElement;   } } 

Il s’agit d’un simple itérateur qui monte dans l’arborescence des éléments à partir de l’élément cliqué jusqu’à ce qu’il trouve l’élément avec l’attribut d’ID de produit susmentionné.

if (typeof window[batchVariableName] === 'undefined') {   window.addEventListener('beforeunload', function() {     window.dataLayer.push({       event: 'sendFinalBatch'     });   }); } 

Quand le customTask est déclenché pour la première fois sur la page, un beforeunload écouteur est créé. L’idée est que lorsque l’utilisateur quitte la page en cours, le beforeunload événement qui est automatiquement distribué déclenche un window.dataLayer.push() appel que nous pouvons ensuite utiliser pour envoyer les éléments restants dans la file d’attente batch.

var shouldFire = false,     batch      = window[batchVariableName] = window[batchVariableName] || [],     impressionId,      ost; 

Par défaut, le customTask bloque le déclenchement de la requête Google Analytics (shouldFire = false). De plus, ici, nous créons la file d’attente batch si elle n’existe pas déjà.

if (event === 'gtm.elementVisibility') {   impressionId = targetElement.getAttribute(productIdAttribute);   batch.push(impressionId);   if (batch.length === maxBatch) { shouldFire = true; } } 

Si la balise a été déclenchée en raison d’un événement de visibilité, l’ID de produit qui a déclenché l’événement sera envoyé dans la file d’attente par lots. Si la queue batch atteint ainsi sa longueur maximale, customTask permettra au coup de tirer.

if (['sendFinalBatch', 'gtm.timer'].indexOf(event) > -1 && batch.length > 0) { shouldFire = true; }      if (event === 'gtm.click') { shouldFire = true; } 

Si l’événement déclencheur a été sendFinalBatch (c’est-à-dire que l’utilisateur essaie de quitter la page) ou gtm.timer (c’est-à-dire que 60 secondes se sont écoulées depuis l’événement de minuterie ou le chargement de page précédent) ET si la file d’attente par lots contient des éléments, le hit sera autorisé à se déclencher, effaçant ainsi la file d’attente par lots et envoyant tous les éléments à GA.

Si l’événement déclencheur était un clic, c’est-à-dire que l’utilisateur a cliqué sur une impression de produit, la demande GA sera également autorisée à se terminer.

if (shouldFire) {   ost = customModel.get('sendHitTask');   customModel.set('sendHitTask', function(sendModel) {     ost(sendModel);     window[batchVariableName] = [];   }); } else {   Object.keys(customModel.data).forEach(function(key) {     customModel.data[key] = null;   }); } 

Si la touche GA est autorisée à tirer, la première partie de la if clause fera exactement cela. Une fois le hit envoyé, la file d’attente batch est vidée de tous les éléments.

Si le coup GA a été bloqué, alors le else La clause effacera l’objet de modèle, empêchant ainsi efficacement l’envoi du hit Google Analytics.

{{JS – Obtenir l’objet True View}}

Cette variable crée l’objet Enhanced Ecommerce lorsque la balise se déclenche. Il est utilisé pour créer à la fois l’impression voir l’objet et l’impression Cliquez sur chose.

Alors, créez un JavaScript personnalisé variable, et placez le code suivant à l’intérieur :

function() {   // Configure the following:   var maxBatch           = 10,       batchVariableName  = '_impressions_batch',       productIdAttribute = 'data-productid';       // Do not touch anything below this   var targetElement = {{Click Element}},       event         = {{Event}},       batch         = window[batchVariableName],       impressions   = google_tag_manager[{{Container ID}}].dataLayer.get('ecommerce.impressions'),       ecomObj       = {ecommerce: {}};    if (event === 'gtm.click') {     while (!targetElement.getAttribute(productIdAttribute) && targetElement.tagName !== 'BODY') {       targetElement = targetElement.parentElement;     }   }    var latestImpression = impressions.filter(function(impression) {     return impression.id === targetElement.getAttribute(productIdAttribute);   }).shift();    var impressionsArr = batch.map(function(id) {     return impressions.filter(function(impression) {       return impression.id === id;     }).shift();   });      if (event === 'gtm.elementVisibility'){     impressionsArr[maxBatch - 1] = latestImpression;   }    ecomObj.impressions = impressionsArr;     if (event === 'gtm.click') {     ecomObj.click = {       actionField: {         list: latestImpression.list       },       products: [latestImpression]     };   }   return {     ecommerce: ecomObj   }; } 

Comme vous pouvez le voir, vous devrez configurer le exact mêmes paramètres (maxBatch, batchVariableName, productIdAttribute) au début de ce script comme vous deviez le faire dans la variable JavaScript personnalisée précédente. Il est important que ceux-ci correspondent exactement aux paramètres que vous avez configurés précédemment, vérifiez donc qu’ils sont identiques.

En dehors de cela, le but de JavaScript est de compiler les ID de produit d’impression dans la file d’attente par lots vers les objets de commerce électronique amélioré correspondants. Si l’événement était un clic, l’impression sur laquelle le clic a été effectué sera envoyée en tant que cible de clic sur le produit.

Créer les déclencheurs

Nous aurons besoin d’un énorme quatre déclencheurs tous attachés à la balise.

Une Visibilité des éléments le déclencheur gérera la création de la file d’attente par lots à partir des vues d’impression de produit.

UN Événement personnalisé déclenchera la balise lorsque l’utilisateur essaie de quitter la page.

UN Minuteur le déclencheur enverra périodiquement les éléments dans la file d’attente batch.

UN Cliquez sur déclenche le tag lorsque l’utilisateur clique sur une impression de produit.

Le déclencheur Element Visibility

Le déclencheur Element Visibility se déclenchera chaque fois qu’un Nouveau l’impression du produit devient visible. Il ne se déclenchera qu’une seule fois par élément, ce qui garantit que les éléments pour lesquels un hit d’impression a déjà été envoyé ne recevront pas une autre impression envoyée pendant que l’utilisateur est sur la page.

Le déclencheur Element Visibility sera configuré pour se déclencher lorsqu’un élément avec le donner attribut d’ID de produit devient visible. Il est important que vous utilisiez le même nom d’attribut vous avez utilisé dans les deux variables JavaScript personnalisées créées ci-dessus. Si le nom de l’attribut était, par exemple, data-productidle sélecteur CSS que vous devez configurer dans le déclencheur Element Visibility doit être [data-productid]. Cochez cette case si vous avez besoin d’un rappel sur les sélecteurs CSS.

Quoi qu’il en soit, assurez-vous que le déclencheur ressemble à quelque chose comme ceci (avec le changement dans le sélecteur CSS si nécessaire) :

Vous pouvez modifier le pourcentage de l’élément qui doit être visible si vous le souhaitez.

Le déclencheur d’événement personnalisé

Le déclencheur d’événement personnalisé est simple. Il se déclenche chaque fois que le beforeunload écouteur (créé dans le customTask variable) est déclenchée par l’utilisateur essayant de quitter la page.

Le déclencheur de la minuterie

Le déclencheur Timer répartira les éléments dans la file d’attente lorsqu’il se déclenchera. C’est une bonne sauvegarde à avoir, car sinon vous courez le risque que des éléments soient laissés indéfiniment dans la file d’attente, pour être envoyés uniquement lorsque l’utilisateur déclenche un autre événement de visibilité dans le futur. Cela peut conduire à des sessions ermites, où les seuls hits sont ces hits de vue d’impression. Pas très utile.

Vous pouvez librement modifier les paramètres du déclencheur. L’avoir en feu en continu n’est pas si grave. La balise Google Analytics se déclenchera toujours, oui, mais la customTask s’assurera qu’aucun hit n’est réellement construit à moins que la file d’attente batch ne contienne réellement des éléments.

Comme vous pouvez le voir, je m’assure également que le déclencheur du minuteur ne se déclenche que sur des pages valides en vérifiant si une variable de couche de données pour la clé ecommerce.impressions n’est pas undefined. De cette façon, le déclencheur ne s’activera que sur les pages où il est possible d’afficher des impressions. Vous pouvez changer la condition en quelque chose d’autre si cela a plus de sens.

Le déclencheur de clic

Le déclencheur Click a un objectif simple. Il se déclenche lorsqu’une impression de produit est cliquée, envoyant ainsi une charge utile Product Click à Google Analytics (ainsi que toutes les impressions qui auraient pu se trouver dans la file d’attente par lots).

N’oubliez pas de modifier le sélecteur CSS pour qu’il corresponde à l’attribut HTML que vous utilisez pour encoder l’ID de produit pour chaque élément d’impression de produit sur la page.

Si vous êtes curieux de connaître le [data-productid], [data-productid] * syntaxe, consultez cet article.

Créer la balise

Enfin, la balise elle-même. Maintenant que vous avez créé toutes les variables et tous les déclencheurs nécessaires, il ne vous reste plus qu’à les regrouper dans la balise.

N’hésitez pas à modifier ce que vous envoyez avec Catégorie d’événement, Action d’événementet Libellé de l’événement.

Assurez-vous d’avoir le transport champ défini sur beaconpuisque vous les voudrez beforeunload hits à envoyer même si la page a déjà été déchargée.

• Type de balise: Analytique universelle

• Type de piste: Événement

• Catégorie: Commerce électronique

• Action: Impressions

• Étiquette: {{Rechercher – Obtenir le libellé d’impression}}

• Coup sans interaction: {{Recherche – Obtenir une interaction d’impression}}

• Activer les paramètres de remplacement dans cette balise: Vérifié

• ID de suivi: UA-XXXXXX-Y

• Champs à définir:
  – Nom de domaine: customTask, Évaluer: {{JS – Fonction – Gestionnaire d’impressions True View}}
  – Nom de domaine: transport, Évaluer: beacon

• Activer les fonctionnalités de commerce électronique améliorées: Vrai
  – Lire les données de la variable: {{JS – Obtenir l’objet True View}}

Enfin, ajoutez les quatre déclencheurs créés dans le chapitre précédent à cette balise.

Et vous êtes prêt ! Ensuite, il est temps de tester les choses.

Comment tester

C’est important ne pas compter sur le mode de débogage de Google Tag Manager pour tester cela. Pourquoi? Parce que même s’il indique qu’une balise Google Analytics s’est déclenchée, c’est customTask qui régit si la demande a été complétée ou non.

Je vous recommande donc d’installer l’excellente extension GTM/GA Debug de David Vallejo. Il vous montre à quels hits sont réellement envoyés…