L’API de visibilité des pages pour les navigateurs Web est plutôt sympa. Il vous permet d’interroger, en utilisant de nouvelles propriétés du document objet, que la page en cours soit visible ou non par l’utilisateur. La visibilité est masquée si la page n’est pas ouverte dans l’instance actuelle de l’onglet du navigateur ou si la fenêtre du navigateur a été réduite.
Dans cet article, je vais donner un exemple de la façon dont les fonctionnalités de l’API Page Visibility pourraient être utilisées avec Google Tag Manager. Notez cependant que la prise en charge de l’API par les navigateurs exclut à peu près toutes les versions d’IE antérieures à 10 du champ d’application de cet article.
Dans cet exemple, nous allons configurer des balises, des règles et des macros qui nous aideront à éviter de recevoir des pages vues pour des pages qui ont été ouvertes dans des onglets mais qui n’ont jamais été lues. Je ne sais pas pour vous, mais avoir une page vue pour une page qui n’a pas été consultée semble contre-intuitif. La page vue ne sera envoyée qu’une fois que la page sera visible pour la première fois.
L’auditeur de visibilité
Tout d’abord, nous allons créer un écouteur de visibilité. Ce qu’il fait, c’est envoyer un événement de navigateur chaque fois que l’état de visibilité d’une page change.
-
Créer une nouvelle macro JavaScript personnalisée {{préfixe de visibilité}}
-
Ajoutez le code suivant dans :
function() { var prefixes = ['moz', 'ms', 'o', 'webkit']; if ('hidden' in document) { return ''; } // Loop through each prefix to see if it is supported. for (var i = 0; i < prefixes.length; i++) { var testPrefix = prefixes[i] + 'Hidden'; if (testPrefix in document) { return prefixes[i]; } } return; } -
Créer une nouvelle macro JavaScript personnalisée {{visibilité masquée}}
-
Ajoutez le code suivant dans :
function() { switch ({{visibility prefix}}) { case '': return document['hidden']; case 'moz': return document['mozHidden']; case 'o': return document['oHidden']; case 'webkit': return document['webkitHidden']; default: return; } } -
Créer une nouvelle balise HTML personnalisée
-
Ajoutez le code suivant dans :
<script> if (typeof {{visibility prefix}} !== 'undefined') { var visibilityEvent = {{visibility prefix}} + 'visibilitychange', hiddenState = {{visibility hidden}}, visibilityChanged = function() { if (typeof hiddenState !== 'undefined') { dataLayer.push({ 'event' : 'visibilityChange' }); } }; // Attach visibility listener to document document.addEventListener(visibilityEvent, visibilityChanged, false); } </script>- Définir la balise pour qu’elle se déclenche {{event}} est égal à gtm.js
Nous créons d’abord une macro utilitaire qui renvoie le préfixe de navigateur requis pour configurer l’écouteur et tester l’état de visibilité. Dans la macro suivante, on récupère l’état du document (true : le document est caché, false : le document est visible).
Enfin, dans la balise, nous créons un écouteur pour les changements de visibilité de la page. Si la visibilité change, un dataLayer l’événement est poussé.
Nous utiliserons ces données dans l’exemple suivant.
Bloquer l’affichage de la page jusqu’à ce que la page soit visible
Le but ici est donc de ne pas envoyer de page vue à Google Analytics tant que la page n’est pas visible. Cela s’applique également à tous vos événements. Vous devrez donc ajouter ces mêmes règles et fonctions (modifiées pour correspondre à la logique de déclenchement d’origine) à vos balises d’événement, sinon vous risquez d’avoir des sessions avec uniquement des événements et aucune page vue. Ceci est à éviter.
Voici la logique :
-
Lorsque la page vue est déclenchée pour la première fois (généralement {{event}} est égal à gtm.js), utilisez la visibilité de la page comme règle de blocage. Si la page est masquée, ne déclenchez pas la balise.
-
Lorsque la page devient visible, utilisez l’événement de visibilité comme déclencheur pour la balise.
-
Lorsque la page vue s’est déclenchée, utilisez son hitCallback pour empêcher l’écouteur de visibilité de déclencher à nouveau la balise.
Alors, allons-y.
-
Créer une nouvelle macro JavaScript personnalisée {{rappel de visibilité}}
-
Ajoutez le code suivant dans :
function() { return function() { if (typeof {{visibility prefix}} !== 'undefined') { var visibilityEvent = {{visibility prefix}} + 'visibilitychange'; document.removeEventListener(visibilityEvent, visibilityChanged); } } } -
Dans votre balise de page vue, créez une nouvelle règle avec les deux conditions suivantes et ajoutez-la à la balise. Gardez également toutes les anciennes règles en place!
-
{{event}} équivaut à la visibilitéModifier
-
{{visibilité masquée}} est égal à faux
-
-
Dans votre balise de page vue, ajoutez ce qui suit Règle de blocage
- {{visibilité masquée}} est égal à vrai
-
Dans votre balise de page vue, naviguez jusqu’à Champs à définiret ajoutez un nouveau champ
-
Nom de domaine: hitCallback
-
Évaluer: {{rappel de visibilité}}
-
Et ça devrait le faire. Il s’agit d’une longue chaîne d’actions, mais elle suit le chemin décrit au début de cette section.
conclusion
L’API de visibilité de la page est plutôt cool, mais elle est avant tout conçue pour économiser des ressources. Utilisez-le pour arrêter la lecture d’une vidéo lorsque l’onglet n’est pas ciblé ou pour arrêter un carrousel d’images.
Avec Google Tag Manager, vous pouvez effectuer plusieurs actions, telles que :
-
Bloquer la vue de page pour les pages non visibles (exploré dans cet article)
-
Envoyer la visibilité lors de la consultation de la page en tant que dimension personnalisée (pour savoir si la page est ouverte dans un nouvel onglet ou directement)
-
Suivre le changement de visibilité en tant qu’événement GA (pour voir si les gens se concentrent sur votre contenu)
-
Pause Timer Listener lorsque la page est masquée et redémarrez-la lorsqu’elle devient visible
Etc.
