Dernière mise à jour le 9 mars 2018 avec quelques nouveaux conseils.

Le déclencheur de profondeur de défilement dans Google Tag Manager a beaucoup à offrir. Suivre jusqu’où les utilisateurs font défiler une page donnée est depuis longtemps reconnu comme un rouage important dans le suivi des engagements machine, et il y a eu de très bonnes solutions pour mettre en œuvre le suivi de la profondeur de défilement pour l’analyse Web au fil des ans.

Avec le déclencheur natif de profondeur de défilement de Google Tag Manager, il est tentant de penser que nous avons maintenant une solution complète qui couvre toutes les bases. Cependant, comme pour tout le reste dans l’analyse, le déclencheur de profondeur de défilement natif nécessite une personnalisation pour vous fournir des informations pertinentes sur votre contenu et les visiteurs qui interagissent avec lui.

Dans cet article, j’explorerai quelques astuces qui pourraient vous être utiles lors de la personnalisation du déclencheur de profondeur de défilement.

1. Des pourcentages variables selon la page

La personnalisation la plus simple que vous puissiez faire est de suivre différents pourcentages en fonction de la page en question. Par exemple, sur les pages d’articles de mon blog, je pourrais être intéressé par un suivi par incréments de 25 % de la profondeur verticale défilée. Mais sur les pages de liste et les pages de résumé, je ne serais peut-être intéressé que de savoir qui défile vers le bas.

Les Profondeurs de défilement vertical et Profondeurs de défilement horizontal les champs nécessitent un nombre ou une liste de nombres (séparés par des virgules) pour fonctionner. Ainsi, vous pouvez facilement utiliser un Variable JavaScript personnalisée pour renvoyer une liste de nombres pour une certaine condition et une autre liste de nombres pour une autre condition.

Par exemple, voici une variable JavaScript personnalisée qui fait ce que j’ai décrit dans le premier paragraphe de ce chapitre.

function() {   return {{Page Path}}.indexOf('/analytics/') > -1 ? '25,50,75,100' : '75,100'; } 

Cette variable renvoie la chaîne 25,50,75,100 si l’URL de la page contient /analytics/et 75,100 autrement. Ainsi, sur les pages de blog, il mesurera la profondeur de défilement par incréments de 25 %, mais sur les autres pages, le défilement ne pourra atteindre que 75 % et 100 % en profondeur.

Ensuite, vous pouvez simplement ajouter cette variable au déclencheur comme ceci :

Vous n’avez pas avoir pour utiliser une variable JavaScript personnalisée. Je suis excentrique en ce sens que je préfère l’utiliser, toujours. Mais vous pouvez tout aussi bien utiliser une variable RegEx Table pour obtenir la même chose :

Il s’agit d’une personnalisation simple, mais elle vous permet de mesurer des mesures pertinentes pour les pages où cela a du sens.

2. N’activez le déclencheur de profondeur de défilement que sur les pages pertinentes

Cela devrait aussi être une évidence. Il peut être judicieux que le déclencheur de profondeur de défilement déclenche vos balises uniquement sur les pages où vous êtes réellement intéressé par le suivi de la profondeur de défilement. Par exemple, je ne suis en fait intéressé que par savoir jusqu’où les utilisateurs défilent sur les pages de mon blog et nulle part ailleurs. Ainsi j’ai pu apporter cette simple modification à la gâchette pour délimiter ses capacités de tir :

Une modification très simple mais qui vous aide à ne collecter que des données significatives.

2.1. Empêcher l’activation du déclencheur de profondeur de défilement

Comme vous pouvez le voir, il n’y a pas d’option “Activer quand…” sur le déclencheur de profondeur de défilement, similaire à ce que vous pourriez voir avec un déclencheur Just Links, par exemple. Ainsi, vous pourriez être tenté de penser qu’il n’y a aucun moyen d’empêcher ces embêtants gtm.scrollDepth événements de peupler le dataLayer sur les pages où vous n’êtes pas intéressé par le suivi des profondeurs de défilement.

Cependant, il existe un hack très simple pour s’assurer que la gâchette n’appuie sur rien. dataLayer. Définissez simplement le seuil de pourcentage sur 101. Il est impossible de faire défiler jusqu’à 101% de la longueur de la page, donc en définissant le seuil à ce niveau, vous désactiverez efficacement le déclencheur.

Ainsi, vous pouvez modifier # 2 ci-dessus en mettant la variable JavaScript personnalisée suivante dans le Pourcentages champ du déclencheur :

function() {   return {{Page Path}}.indexOf('/analytics/') > -1 ? '25,50,75,100' : '101'; } 

Cela définit les seuils à ‘25,50,75,100’ sur les pages où l’URL contient /analytique/et ‘101’ ailleurs.

3. Ne déclenchez les balises que sur les pages où les seuils ne sont pas collectés automatiquement

Un problème avec le déclencheur Scroll Depth est qu’il ne se soucie pas de savoir si la page est longue ou courte. Si vous avez une page très courte, il est possible que tous les seuils soient atteints lors du chargement de la page, ce qui entraîne un tas de gtm.scrollDepth événements poussés dans dataLayerdéclenchant vos balises même si l’utilisateur n’a jamais fait défiler !

Heureusement, il existe une astuce astucieuse que nous pouvons utiliser pour lutter contre cela. Nous pouvons empêcher le déclencheur de profondeur de défilement de fonctionner sur les pages où le le rapport entre la hauteur de la fenêtre du navigateur et la hauteur de la page est trop élevé. Les fenêtre du navigateur est la zone du navigateur Web qui est remplie par votre page. La page elle-même est le document entier, dont certaines parties sont susceptibles d’être invisibles sous le pli de la fenêtre d’affichage.

Plus le rapport entre la hauteur de la fenêtre visible et la hauteur de la page est élevé, moins il y a de défilement. Par exemple, si la fenêtre d’affichage visible a une hauteur de 400 pixels et que la hauteur de la page est également de 400 pixels, il n’y a rien à faire défiler. La page entière sera visible dans la fenêtre d’affichage et tous les seuils verticaux que vous avez définis dans le déclencheur de profondeur de défilement se déclencheront automatiquement.

Ainsi, si vous souhaitez uniquement déclencher le déclencheur lorsque l’utilisateur fait défiler jusqu’à 25 %, 50 %, 75 % et 100 %, vous devez vous assurer que le rapport entre la hauteur de la fenêtre visible et la hauteur de la page est moins de 0,25. Cela signifie que moins de 25 % de la page est visible dans la fenêtre d’affichage du navigateur.

Pour ce faire, vous devez créer un Variable JavaScript personnalisée ça ressemble à ça :

function() {   // Change this to reflect the percentages or pixels you want to fire the trigger for   var verticalScrollDepths = '25,50,75,100';      // Change this to the MAXIMUM ratio of viewport height / page height you want the trigger to activate for   var maximumRatio = 0.25;      // Change this to what thresholds should be tracked if the ratio is more than the maximum   // Leave it at '101' if you want to prevent the trigger from functioning in this case   var fallbackDepths = '101';      var heightOfPage = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);      var heightOfViewport = Math.max(document.documentElement.clientHeight, window.innerHeight);      var ratio = heightOfViewport / heightOfPage;      return ratio < maximumRatio ? verticalScrollDepths : fallbackDepths; } 

La première chose que vous devez faire est de modifier le verticalScrollDepths variable pour refléter la liste des seuils que vous souhaitez suivre si la page réussit la vérification du ratio.

Ensuite, éditez le maximumRatio pour refléter le rapport maximum (entre 0 et 1) de la hauteur de la fenêtre visible par rapport à la hauteur de la page réelle. Une valeur de 0.25 signifierait qu’au plus 25 % de la page peut être visible dans la fenêtre d’affichage lorsque la page est chargée.

Enfin, éditez le fallbackDepths variable pour donner une valeur “par défaut” pour les cas où le ratio maximum est dépassé. Si vous souhaitez empêcher le déclencheur de profondeur de défilement de fonctionner lorsque le rapport maximum est dépassé, utilisez la valeur 101car une profondeur de 101 % ne peut jamais être suivie.

Ensuite, ajoutez simplement ceci au champ “Profondeurs de défilement vertical” et vous devriez être prêt.

Désormais, le déclencheur ne se déclenchera que dans les cas où la page est suffisamment longue pour avoir un sens pour votre suivi.

4. Suivre les pourcentages de défilement d’un élément de contenu spécifique

C’est un peu plus délicat, mais toujours faisable avec un peu de magie JavaScript.

Par défaut, le déclencheur de profondeur de défilement calcule la profondeur de défilement verticale du haut de la page au bas de la page. Mais vous pourriez seulement être intéressé par la profondeur de défilement d’un élément de contenu spécifique, tel que le corps de l’article. Par exemple, sur mon site, peu m’importe si les utilisateurs défilent au-delà de la fin de l’article, à travers les commentaires Disqus, jusqu’en bas. Mais je me soucie s’ils défilent jusqu’au bas du corps de l’article principal.

Pour que cela fonctionne, calculez d’abord la hauteur de l’élément HTML contenant le contenu dont vous souhaitez suivre la profondeur de défilement. Ensuite, vous devez vérifier à quelle distance se trouve cet élément du haut de la page. Enfin, vous devez dire au déclencheur de profondeur de défilement de suivre les seuils de pixels qui correspondent aux profondeurs souhaitées de l’élément de contenu, et d’ajouter la distance jusqu’au haut de la page à ces chiffres.

Je pense que c’est plus facile à illustrer.

Comme vous pouvez le voir, la hauteur totale de l’élément est 1200 pixels. Si je veux suivre des incréments de profondeur de défilement de 33%, cela signifie que les marques respectives sont à 400, 800 et 1200 pixels. Étant donné que le haut de l’élément de contenu est exactement 250 pixels à partir du haut de la page, je dois ajouter ce nombre aux seuils avant de l’introduire dans le déclencheur de profondeur de défilement, car il mesure tout en partant du haut de la page. Ainsi, les profondeurs de pixels finales seraient 650, 1050et 1450 pixels.

Maintenant, puisque nous ne voulons pas les coder en dur dans le déclencheur, car cela conduirait à un horrible gâchis à gérer (chaque page aurait besoin de son propre déclencheur), nous pouvons utiliser un Variable JavaScript personnalisée pour calculer dynamiquement les profondeurs de pixels.

function() {   // Change the contents of this array to reflect the percentages of scroll depth you want to track   var verticalPercentages = [25,50,75,100];      // Change this to fetch the element you want to track scrolling in   var targetElement = document.querySelector('div.post-content .main-content-wrap');      var elementHeight = targetElement.offsetHeight;      var totalOffsetTop = 0;      while (targetElement) {     totalOffsetTop += (targetElement.offsetTop - targetElement.scrollTop + targetElement.clientTop);     targetElement = targetElement.offsetParent;   }      return verticalPercentages.map(function(percentage) {     return parseInt(elementHeight * (percentage * 0.01) + totalOffsetTop);   }).join(); } 

Vous devrez ensuite ajouter cette référence de variable au Pixel champ dans la sélection Profondeurs de défilement vertical du déclencheur :

Cette configuration calcule dynamiquement les seuils de pixels corrects en fonction des pourcentages que vous avez écrits dans le verticalPercentages déployer. De cette façon, 0 % de profondeur correspond au haut de l’élément de contenu (spécifié dans targetElement), et la profondeur de 100 % correspond au bas de l’élément de contenu.

Avec cette solution de contournement, vous pouvez obtenir des mesures plus significatives sur les pages qui ont de nombreuses zones de contenu différentes remplissant l’espace du document lui-même.

4.1. Renvoie le pourcentage de profondeur de défilement du défilement de l’élément

Une chose qui manque à #4 est l’option de rapport sur le pourcentages l’utilisateur a fait défiler l’élément. Étant donné que le déclencheur est configuré à l’aide de profondeurs de pixels plutôt que de pourcentages, la variable intégrée {{Scroll Depth Threshold}} renverra toujours la profondeur de pixels que l’utilisateur a parcourue, plutôt que le pourcentage respectif de défilement.

Obtenir le pourcentage est en fait un peu un hack. Le problème avec le déclencheur Scroll Depth est qu’il est initialisé assez tôt dans le chargement de la page, souvent avant que DOM Ready et tout contenu injecté dynamiquement ne soient ajoutés à la page. Cela signifie que les seuils de défilement peuvent être inférieurs à ce que les pourcentages réellement refléterait.

C’est malheureusement inévitable en ce moment. Le déclencheur de profondeur de défilement n’a pas d’options pour retarder son initialisation jusqu’à ce que le contenu soit complètement chargé.

Cela signifie également que toutes les variables que vous utilisez pour déterminer la hauteur du contenu et, par la suite, ce que les pourcentages respectifs reflètent réellement, peuvent changer d’un événement déclencheur à l’autre. Ainsi, pour obtenir le réel pourcentages utilisés par le déclencheur Scroll Depth, nous devrons faire quelque chose que j’ai demandé à plusieurs reprises d’éviter à tout prix : implémenter un effet secondaire dans la variable JavaScript personnalisée.

Fondamentalement, nous devrons stocker les seuils de défilement dans un global lors de la première exécution de la variable JavaScript personnalisée. Après l’exécution initiale, nous extrairons toujours ce qui était stocké dans la variable globale au lieu de générer un nouvel ensemble à chaque fois que la variable est appelée. De cette façon, tous les déclencheurs et balises qui utilisent les seuils accéderont toujours aux mêmes valeurs, même s’ils peuvent être un peu éloignés des seuils de contenu. réellement sont.

La modification ressemble à ceci :

function() {      if (typeof window._gtm_scroll_set === 'undefined') {          // Change the contents of this array to reflect the percentages of scroll depth you want to track     var verticalPercentages = [25,50,75,100];        // Change this to fetch the element you want to track scrolling in     var targetElement = document.querySelector('div.post-content .main-content-wrap');        var elementHeight = targetElement.offsetHeight;        var totalOffsetTop = 0;        while (targetElement) {       totalOffsetTop += (targetElement.offsetTop - targetElement.scrollTop + targetElement.clientTop);       targetElement = targetElement.offsetParent;     }          window._gtm_scroll_set = {       thresholds: verticalPercentages.map(function(percentage) {           return parseInt(elementHeight * (percentage * 0.01) + totalOffsetTop);         }).join(),       percentages: verticalPercentages     };        }      return window._gtm_scroll_set.thresholds; } 

Comme vous pouvez le voir, nous remplissons une variable globale window._gtm_scroll_set avec un objet qui contient deux propriétés :

• thresholds: le tableau des seuils de défilement utilisés par le déclencheur Scroll Depth.

• percentages: le tableau des pourcentages verticaux que vous avez défini dans la même variable.

Maintenant que nous savons quels sont les seuils, quels sont les pourcentages et que nous pouvons être sûrs que les mêmes seuils sont renvoyés chaque fois que cette variable JavaScript personnalisée est invoquée, nous pouvons créer une autre Variable JavaScript personnalisée dont le seul travail consiste à renvoyer le pourcentage de défilement de l’utilisateur lorsque le déclencheur s’est déclenché. Voici à quoi ressemble cette variable :

function() {   if (typeof window._gtm_scroll_set !== 'undefined') {          var percentages = window._gtm_scroll_set.percentages;        var thresholds = window._gtm_scroll_set.thresholds.split(',').map(function       return parseInt     });          var crossedIndex = thresholds.indexOf({{Scroll Depth Threshold}});      return percentages[crossedIndex];      }   return {{Scroll Depth Threshold}}; } 

Cette variable JavaScript personnalisée vérifie quel seuil a été renvoyé par {{Scroll Depth Threshold}} et renvoie la valeur de pourcentage correspondante.

L’ordre des choses est donc :

1. Utilisez la première variable JavaScript personnalisée dans le champ Pixel Depths du déclencheur Scroll Depth.

2. Utilisez la deuxième variable JavaScript personnalisée chaque fois que vous souhaitez obtenir la valeur en pourcentage de la profondeur de défilement atteinte lorsque le déclencheur se déclenche.

Notez que même si j’introduis un effet secondaire dans la variable JavaScript personnalisé, il est atténué en vérifiant si la variable globale a déjà été définie. Ainsi, l’inconvénient typique des effets secondaires (mise à jour constante et imprévisible de l’état global) est atténué.

Ce n’est pas parfait – rien de ce qui a un impact sur l’état mondial ne l’est jamais. Il y a toujours le risque qu’un autre JavaScript accède et modifie window._gtm_scroll_setce qui casserait votre configuration.

Résumé

Ces quatre conseils allaient du très simple au modérément complexe.

Il existe de nombreuses façons de personnaliser le déclencheur par défaut de Google Tag Manager. Avec le déclencheur de profondeur de défilement, ces personnalisations sont presque nécessaires, car le déclencheur lui-même manque pour l’instant de certaines options de configuration critiques.

Par exemple, j’aimerais voir les fonctionnalités suivantes dans le déclencheur :

• Possibilité d’établir lorsque le déclencheur est initialisé (par exemple après DOM Ready, avec un événement Data Layer, etc.).

• Option pour empêcher le déclencheur de se déclencher automatiquement si les seuils ont été franchis lors du chargement de la page.

• Option pour réinitialiser le déclencheur manuellement, ce qui est particulièrement utile sur les applications d’une seule page.

• Option pour définir un élément de contenu au lieu de la page entière pour déterminer la profondeur de défilement.

Avec les conseils de cet article, vous pouvez faire beaucoup, mais surtout la fonctionnalité où vous pouvez réinitialiser le déclencheur manque cruellement à l’implémentation actuelle.

Avez-vous des conseils à partager concernant le déclencheur de profondeur de défilement de Google Tag Manager ?