Le déclencheur vidéo YouTube dans Google Tag Manager

Dernière mise à jour le 20 avril 2020: Clarification de la manière dont les vidéos chargées paresseusement peuvent être suivies avec ce déclencheur.

Allons droit au but. Google Tag Manager vient de publier le Vidéo Youtube déclencheur, qui vous offre une prise en charge native du suivi vidéo YouTube. Et c’est super ! Même si nous avons été plus que satisfaits des excellents scripts de suivi fournis par exemple par Cardinal Path et Bounteous (avec une petite modification de votre serviteur), c’est un pas de prise de tête pour une prise en charge native dans Google Tag Manager.

Le déclencheur YouTube Video vérifie à peu près toutes les cases auxquelles je m’attends dans un déclencheur de suivi vidéo. Il a des événements intégrés pour des choses comme Start, Progress (par exemple 25%, 50%, 75%) et Complete. Vous pouvez également l’utiliser pour décorer les URL YouTube intégrées avec les éléments requis enablejsapi=1 paramètre de requête, s’ils ne l’ont pas déjà.

Le déclencheur vidéo YouTube prend en charge le suivi paresseux ou des vidéos insérées dynamiquement, ce qui sera un soulagement pour les sites qui reportent le chargement des vidéos jusqu’à ce qu’elles soient réellement interagies par l’utilisateur.

Créer et configurer le déclencheur

Pour créer le déclencheur, faites défiler jusqu’à Déclencheurs dans l’interface utilisateur de Google Tag Manager et créez un nouveau déclencheur. Vous trouverez l’option YouTube Video dans la barre latérale qui s’envole lorsque vous cliquez pour choisir un type de déclencheur.

Une fois que vous avez sélectionné le type de déclencheur vidéo YouTube, il est temps de le configurer. Voici les options.

1. Capturer – Démarrer – recueille un start lorsque l’utilisateur commence à regarder la vidéo.

2. Capture – Terminé – recueille un complete lorsque l’utilisateur atteint la fin de la vidéo.

3. Capture – Pause, recherche et mise en mémoire tampon – recueille un pause lorsque l’utilisateur met la vidéo en pause ou saute en avant ou en arrière, et buffering lorsque la vidéo commence à être mise en mémoire tampon en raison d’un manque de bande passante.

4. Capture – Progression – recueille un progress le moment où l’utilisateur dépasse un pourcentage ou un seuil de temps (par exemple 25 %, 50 %, 75 % ou 10 secondes, 30 secondes, une minute).

5. Avancé – Ajouter la prise en charge de l’API JavaScript à toutes les vidéos – si vos intégrations YouTube manquent du nécessaire enablejsapi=1 paramètre, vous pouvez le cocher pour l’ajouter automatiquement à toutes vos vidéos. REMARQUE! Cela recharge l’iframe, de sorte que les utilisateurs peuvent voir le scintillement de la vidéo lorsqu’ils chargent la page pour la première fois. Cette option, lorsqu’elle est cochée, ajoute également les https://www.youtube.com/iframe_api bibliothèque à la page.

Voici ce que le dataLayer la charge utile ressemble à chaque fois qu’un événement YouTube est déclenché.

• event: 'gtm.video' – le nom de l’événement poussé dans dataLayer pour tous les événements vidéo YouTube. C’est ce qui déclenche votre déclencheur YouTube.

• gtm.videoProvider: 'youtube' – précise la plateforme dont vous suivez les vidéos. Vous pouvez considérer cela comme un indice que la prise en charge d’autres plates-formes est prévue !

• gtm.videoStatus: 'start' – spécifie l’état de la vidéo qui a provoqué le déclenchement de l’événement. Ces différentes valeurs de statut ne sont déclenchées que si vous les avez activées dans les paramètres de déclenchement. Les valeurs possibles sont 'start', 'complete', 'pause', 'buffering'et 'progress'.

• gtm.videoUrl: 'https://www.youtube.com/watch?v=...' – l’URL d’origine de la vidéo intégrée.

• gtm.videoTitle: 'Best of Simo Ahava' – le titre de la vidéo intégrée.

• gtm.videoDuration: 197 – la durée totale de la vidéo en secondes.

• gtm.videoCurrentTime: 30 – la marque de temps à laquelle se trouve l’utilisateur lorsque l’événement vidéo s’est produit.

• gtm.videoElapsedTime: 10 – le temps écoulé depuis la dernière fois que la vidéo a été mise en pause ou mise en mémoire tampon.

• gtm.videoPercent: 15 – le pourcentage où se trouve l’utilisateur lorsque l’événement vidéo s’est produit.

• gtm.videoVisible: true – Soit true ou alors falseselon que la vidéo était visible ou non dans la fenêtre du navigateur lorsque l’événement vidéo s’est produit.

Une chose qui pourrait vous faire respirer plus facilement, c’est qu’il y a de nouveaux Variables intégrées pour tous ces articles dans le dataLayer. Vous pouvez les trouver en cliquant sur le rouge CONFIGURER bouton lorsque vous naviguez vers Variables / Variables intégrées dans l’interface utilisateur de Google Tag Manager.

Petit mot sur le suivi des progrès

Notez que le suivi le progrès est relatif à la durée totale de la vidéo et non au temps réel ou au pourcentage que vous avez regardé la vidéo.

Ainsi, si vous configurez le déclencheur pour qu’il se déclenche à 25 %, 50 % et 75 %, il déclenchera ces événements lorsque l’utilisateur atteindra les marques respectives dans la chronologie de la vidéo. même s’ils n’ont pas regardé en continu depuis le début. Ainsi, si vous commencez à lire une vidéo et que vous passez directement à la barre des 25 %, l’événement se déclenchera même si vous venez tout juste de commencer à regarder.

Il en va de même pour les seuils temporels.

Vous pouvez tirer parti de la Temps écoulé de la vidéo variable pour voir combien de temps l’utilisateur a regardé la vidéo en continu depuis la dernière pause. L’utilisation des seuils de temps et de pourcentage vous indique uniquement si l’utilisateur a atteint un jalon spécifique dans la vidéo, pas nécessairement s’il a réellement regardé jusqu’à ce point. C’est une différence minime mais potentiellement significative.

Mettre tous ensemble

Étant donné qu’il existe de nombreuses combinaisons d’événements que vous pouvez collecter avec le déclencheur vidéo YouTube, je vais vous montrer une manière assez générique de mesurer début, pause, pourcentage de progression et Achevée événements avec une seule balise d’événement Universal Analytics. La balise ressemble à ceci :

Le déclencheur qui déclenche cette balise ressemble à ceci :

Et le Variable JavaScript personnalisée nommé {{JS – Obtenir une action vidéo}} ressemble à ça:

function() {   var status = {{Video Status}};   switch (status) {     case 'start':       return 'Start playing';     case 'pause':       return 'Pause';     case 'buffering':       return 'Buffering';     case 'progress':       return 'Reached ' + {{Video Percent}} + '%';     case 'complete':       return 'Reached the end';   } } 

Ceci traduit les valeurs de paramètre par défaut de l’objet vidéo en dataLayer dans un format plus lisible. Ainsi, nous pouvons utiliser la même balise d’événement pour tous les événements vidéo.

Suivre les vidéos chargées paresseusement / insérées dynamiquement

Si vos vidéos se chargent lors du chargement initial de la page, tout se passe bien pour vous. En vérifiant le Ajouter la prise en charge de l’API JavaScript à toutes les vidéos option, GTM se chargera d’initialiser les vidéos afin qu’elles puissent être suivies par le déclencheur. Cette option télécharge également la bibliothèque d’API requise pour vous (voir ci-dessous).

Cependant, de nos jours, de plus en plus de sites se méfient des performances et reportent le chargement de tout contenu intégré jusqu’à ce que l’utilisateur ait laissé entendre qu’il souhaitait regarder la vidéo. Vous pouvez en savoir plus sur les implications techniques ici.

Heureusement, le déclencheur YouTube Video prend en charge le suivi des vidéos qui sont chargées et intégrées après le chargement initial de la page. La seule chose que vous devez faire est de vous assurer que lorsque la page se charge pour la première fois, l’API YouTube iframe est également chargée :

<script src="https://www.youtube.com/iframe_api">

Donc, si votre site charge paresseusement ou charge dynamiquement des vidéos (par exemple, s’il s’agit d’une application d’une seule page), assurez-vous que la bibliothèque ci-dessus est chargée avant que le déclencheur vidéo de GTM ne soit initialisé. Un déclencheur “Page vue” fait généralement le travail.

Encore une fois, si une vidéo intégrée YouTube est présente lors du chargement initial de la page, vous n’avez pas à vous en soucier. Les Ajouter la prise en charge de l’API JavaScript à toutes les vidéos se charge de charger cette bibliothèque pour vous.

Le déclencheur YouTube ne fonctionne pas

Si, pour une raison quelconque, le déclencheur ne suit pas vos intégrations YouTube, vous pouvez utiliser la méthode suivante pour étudier le problème.

1. Vérifiez que le site a chargé le https://www.youtube.com/iframe_api une bibliothèque.

2. Vérifiez que les iframes YouTube ont le enablejsapi=1 paramètre dans le src attribut.

3. Vérifiez que les iframes YouTube ont un paramètre qui ressemble à data-gtm-yt-inspected-XXXXXX.

Si les trois vérifient, cela signifie généralement que quelque chose sur le site recharge l’iframe après que GTM l’a inspecté. Lorsque Google Tag Manager initialise le déclencheur vidéo, il initialise l’écouteur sur l’intégration. Tout rechargement de l’intégration supprime cet écouteur, et parce que l’iframe a le data-gtm-yt-inspected-XXXXXX GTM ne réévalue pas l’écouteur.

Parlez aux développeurs et assurez-vous que les iframes ne sont pas “recyclées” (même élément iframe utilisé pour plusieurs vidéos), et qu’une fois que l’iframe a été ajouté au site, il n’est pas rechargé pour une raison quelconque.

Résumé

Je suis assez satisfait du déclencheur YouTube Video. Il fait à peu près tout ce que j’attendrais de la première itération de la fonctionnalité. J’espère que nous verrons la prise en charge d’autres services et lecteurs vidéo à l’avenir.

Il n’y a pas grand-chose qui me manque. J’aimerais surtout qu’il y ait un gtm.videoTotalElapsedTimequi mesurerait combien au total J’ai regardé n’importe quelle vidéo. Les gtm.videoElapsedTime me dit seulement le temps écoulé depuis la dernière pause/tampon/recherche, mais pas le temps total regardé.

Que pensez-vous du déclencheur vidéo YouTube ? Est-il tout simplement parfait pour vos besoins de suivi, ou avez-vous des fonctionnalités en tête que vous voudriez voir dans une future version ?