Le déclencheur de visibilité des éléments dans Google Tag Manager

Sacrée visibilité, Batman ! La visibilité est un aspect sérieusement sous-évalué du suivi de l’analyse Web. Trop souvent, nous tombons dans le piège de penser que les “pages vues” ont en fait quelque chose à voir avec “l’affichage” d’une page. Ou que le suivi du défilement jusqu’à 25 %, 50 % ou 75 % de pages très différentes est logique au niveau agrégé. Vous serez donc très heureux d’apprendre que l’équipe de Google Tag Manager (qui a été sur FIRE récemment), vient de publier le Visibilité des éléments déclencheur. Et oh GARÇON quel déclencheur c’est !

C’est un très déclencheur impressionnant. Non seulement cela vous permet de faire quelques correct suivi du défilement (suivi des éléments, pas des pourcentages), mais il inclut également une fonctionnalité qui vous permet de suivre les modifications dans le DOM. Cela a généralement été assez difficile à suivre uniquement côté client, donc avoir la fonctionnalité nativement dans Google Tag Manager est très cool. En plus de cela, vous pouvez réellement mesurer les impressions de vue réelle (impressions pour les éléments visibles par l’utilisateur) ET combinez cela avec l’heure réelle pendant laquelle l’élément a été visualisé.

En bref, le déclencheur Element Visibility se déclenche chaque fois qu’un élément ou des éléments que vous spécifiez apparaissent dans le navigateur. fenêtre. La fenêtre d’affichage est la zone visible de la fenêtre du navigateur, ce qui signifie que si un élément y est visible, il est visible par l’utilisateur.

Dans cet esprit, passons directement aux fonctionnalités.

Méthode de sélection

Vous avez deux options ici – ID d’élément et sélecteur CSS. L’ancien utilise document.getElementById pour faire correspondre le premier élément de la page avec l’ID donné. Ce dernier utilise des sélecteurs CSS pour faire correspondre l’élément ou un groupe d’éléments sur la page.

À ce stade, je vous recommande vraiment de lire sur les sélecteurs CSS (voir aussi mon article sur le sujet). Ils font vraiment de Google Tag Manager plus que la somme de ses parties.

• IDENTIFIANT – le déclencheur attend un élément avec un certain id attribut à apparaître dans la fenêtre.

• Sélecteur CSS – le déclencheur attend que les éléments correspondant à la chaîne du sélecteur CSS entrent dans la fenêtre d’affichage.

La différence évidente entre les deux est que vous pouvez ajouter plusieurs sélecteurs d’éléments dans la chaîne de sélection CSS. Par exemple, si je veux savoir quand l’en-tête, le titre de l’article, le corps de l’article et le pied de page de l’article entrent dans la fenêtre d’affichage, je pourrais utiliser quelque chose comme ceci comme sélecteur :

#header, h2.title, div.content, div.footer

Le déclencheur pourrait alors se déclencher lorsque chacun d’entre eux entre dans la fenêtre (voir ci-dessous).

Le sélecteur d’ID, en revanche, fonctionne mieux si vous n’avez qu’un seul élément à suivre.

Quand déclencher ce déclencheur

C’est ici que vous gouvernerez ce qu’est réellement ce déclencheur. S’agit-il d’une vérification pour voir si un certain élément est dans la fenêtre d’affichage lorsque la page est chargée, ou s’agit-il d’un déclencheur de défilement avancé ?

• Une fois par page – ce déclencheur ne se déclenchera qu’une seule fois sur la page en cours. Le moment est celui où le premier élément qui correspond à l’ID ou à la chaîne de sélection entre dans la fenêtre d’affichage. Ainsi, si vous avez spécifié plusieurs sélecteurs ou s’il existe plusieurs éléments avec le même ID, ce paramètre de déclencheur déclenchera le déclencheur une seule fois – lorsque le premier élément correspondant entre dans la fenêtre.

• Une fois par élément – ce déclencheur ne se déclenchera qu’une seule fois si un élément avec un ID spécifique apparaît dans la fenêtre (même si plusieurs éléments partagent le même ID, auquel cas il ne se déclenchera que pour le premier). Cependant, lors de l’utilisation de sélecteurs CSS, ce paramètre se déclenchera une fois pour chaque élément correspondant au(x) sélecteur(s). En d’autres termes, ce serait le paramètre à utiliser si vous vouliez créer un déclencheur qui se déclenche lorsque différentes parties de la page entrent dans la fenêtre d’affichage !

• Chaque fois qu’un élément apparaît à l’écran – ce déclencheur se déclenche chaque fois qu’un élément correspondant apparaît dans la fenêtre d’affichage, et le fera chaque fois que l’élément réapparaît.

Parmi ceux-ci, je parie que les deux premiers seront les plus utilisés. Le suivi si un élément est visible est très utile, par exemple, pour le suivi des impressions de vue réelle, et le suivi lorsque plusieurs éléments différents apparaissent peut être utilisé pour créer un déclencheur de défilement avancé. Cependant, il peut également y avoir des cas d’utilisation pour la dernière option.

Avancé – Pourcentage minimum visible

Ici, vous pouvez spécifier une valeur en pourcentage, qui correspond à la quantité d’élément qui doit se trouver dans la fenêtre d’affichage pour que le déclencheur se déclenche. Ainsi, si vous définissez la valeur sur “50”, au moins 50 % de l’élément correspondant doit être visible pour que le déclencheur se déclenche.

C’est un excellent moyen de s’assurer que assez de l’annonce ou de l’élément de contenu est visible pour que vous puissiez interpréter les données comme significatives.

Avancé – Durée à l’écran

Dans ce champ, vous pouvez spécifier le temps total en millisecondes l’élément doit être visible dans la fenêtre pour que le déclencheur se déclenche. Notez que c’est cumulatifsupposons que vous ayez le paramètre suivant :

Cela déclencherait le déclencheur uniquement après que le ou les éléments correspondants aient été visibles dans la fenêtre d’affichage pendant un le total de 5 secondes. En d’autres termes, l’utilisateur peut d’abord faire défiler jusqu’à l’élément, le visualiser pendant une seconde, puis faire défiler jusqu’à ce que l’élément disparaisse, puis revenir à l’élément, le visualiser pendant quatre secondes supplémentaires, moment auquel le déclencheur se déclenche.

Notez que puisque GTM doit gérer une minuterie pour chaque élément que vous souhaitez surveiller, le suivi d’un seul élément avec le ID d’élément La méthode de sélection fonctionne mieux qu’un groupe d’éléments définis avec des sélecteurs CSS.

Avancé – Observer les changements DOM

Ce paramètre vous permet de suivre la visibilité des éléments qui pourraient ne pas exister dans le DOM lors du premier chargement de la page ! En d’autres termes, si vous avez des éléments insérés dynamiquement, vous pouvez cocher cette case pour savoir quand ils deviennent également visibles.

Le cas d’utilisation le plus évident est si vous avez un formulaire résistant au déclencheur de formulaire de GTM en raison de complications dans le JavaScript sur site, vous pouvez utiliser ce paramètre de déclencheur pour attendre qu’un élément HTML avec le message de remerciement apparaisse. Donc quelque chose comme ça :

Désormais, le déclencheur se déclenchera lorsqu’un élément avec l’ID #form-thank-you devient visible, même s’il est inséré dynamiquement dans le modèle d’objet de document !

Semblable au suivi de la durée à l’écran, le paramètre DOM Changes fonctionne mieux lorsque vous suivez un seul élément avec la méthode de sélection Element ID.

Le contenu de l’objet événement

Lorsque le déclencheur de visibilité se déclenche, un événement portant le nom gtm.elementVisibility est poussé dans la couche de données. L’objet comporte un certain nombre de variables auxquelles vous pouvez vous référer à l’aide de variables intégrées (ou de variables de couche de données si vous souhaitez les configurer manuellement).

• gtm.element – l’élément devenu visible. Vous pouvez capturer cela avec le Clic / élément de formulaire Variable intégrée.

• gtm.elementClasses – la chaîne du nom de classe de l’élément devenu visible. Vous pouvez capturer cela avec le Cliquez / Formulaire Classes Variable intégrée.

• gtm.elementId – la valeur ID de l’élément devenu visible. Vous pouvez capturer cela avec le Clic / ID de formulaire Variable intégrée.

• gtm.elementTarget – la valeur de l’attribut cible de l’élément devenu visible. Vous pouvez capturer cela avec le Clic / Formulaire Cible Variable intégrée.

• gtm.elementUrl – la valeur de l’attribut href ou action de l’élément devenu visible. Vous pouvez capturer cela avec le Cliquez / URL du formulaire Variable intégrée.

• gtm.visibleRatio – un nombre décimal entre 0 et 100, vous indiquant quelle partie de l’élément était visible dans la fenêtre lorsque le déclencheur s’est déclenché en pourcentages. Vous pouvez capturer cela avec le Pourcentage de visibilité Variable intégrée.

• gtm.visibleTime – le temps total cumulé que l’élément a passé dans la fenêtre lorsque le déclencheur s’est déclenché. Le nombre est en millisecondes. Vous ne verrez une valeur supérieure à 0 que si vous avez défini la “Durée à l’écran” dans votre déclencheur (car sans durée minimale à l’écran, le déclencheur se déclenchera toujours immédiatement lorsque l’élément apparaîtra). Vous pouvez capturer cela avec le Durée à l’écran Variable intégrée.

• gtm.visibleFirstTime – le temps en millisecondes lorsque l’élément est devenu visible pour la première fois dans la fenêtre. Ce temps est calculé comme le delta entre le moment où le navigateur a commencé à afficher l’extrait de conteneur Google Tag Manager et le moment où le déclencheur s’est déclenché.

• gtm.visibleLastTime – le temps en millisecondes auquel l’élément est devenu le plus récemment visible dans la fenêtre. Le calcul est similaire à gtm.visibleFirstTimesauf que cette fois-ci chaque fois que le déclencheur se déclenche pour l’élément donné, la valeur est mise à jour.

Vous pouvez utiliser ces variables (de préférence en tant que variables intégrées) pour créer des configurations encore plus avancées dans vos autres balises, déclencheurs et variables.

Variables intégrées

De nouvelles variables intégrées ont également été introduites :

En plus de cela, vous avez à votre disposition les variables intégrées Click / Form habituelles, puisque l’élément qui a déclenché le déclencheur Element Visibility est utilisé pour remplir ces variables intégrées.

Résumé

Le mois ou les deux derniers mois ont été fous au pays de Google Tag Manager. Les fonctionnalités que nous mourions d’envie de voir ont été publiées avec une rapidité et une attention aux détails impressionnantes.

Hors du groupe, je pense que ce nouvel élément de visibilité est mon préféré. Il a le potentiel de transformer l’ensemble de votre suivi d’analyse Web, puisque vous pouvez réellement vous concentrer sur le suivi des interactions qui question plutôt que des interactions qui ont simplement lieu. La visibilité est un aspect tellement important des choses que nous faisons sur une page Web. Si un élément n’est pas visible, il ne peut pas vraiment être utilisé par un utilisateur.