Capturer l’élément correct dans Google Tag Manager

Dernière mise à jour le 24 août 2022: Les instructions de cet article ne sont plus très utiles, car vous pouvez simplement utiliser le JavaScript natif Element.closest(selector) au lieu de l’astuce {{Find Closest}} décrite dans cet article. Prise en charge du navigateur pour closest s’est heureusement beaucoup amélioré depuis la rédaction de cet article.

Google Tag Manager nous fournit un ensemble de déclencheurs pratiques, conçus pour faciliter la capture des interactions des utilisateurs sur le site Web. Ces déclencheurs font partie d’un paradigme appelé suivi automatique des événements, qui comprend le Cliquez sur, Former, Histoireet Erreur JavaScript types de déclencheurs.

Maintenant, j’ai couvert les déclencheurs de GTM de très nombreuses fois auparavant. Si vous avez besoin d’un rappel, consultez les articles suivants :

• Guide des déclencheurs pour Google Tag Manager
• Suivi automatique des événements dans GTM 2.0
• Résoudre les problèmes avec les écouteurs GTM
• Pourquoi mes auditeurs GTM ne fonctionnent-ils pas ?

Dans cet article, je veux aborder un aspect spécifique de Cliquez sur les déclencheurs. Si vous les avez déjà utilisés, vous saurez (au moins) deux choses :

1. Les Juste des liens le déclencheur capture l’élément de lien (<a/>) qui est le lien d’habillage le plus proche de l’élément cliqué.

2. Les Tous les éléments trigger capture l’élément cliqué lui-même.

En d’autres termes, le déclencheur Just Links remonte le document jusqu’à ce qu’il trouve un élément de lien et le renvoie pour que GTM le traite. Le All Elements agit plus comme un gestionnaire normal : il renvoie simplement l’élément sur lequel on a cliqué.

Dans cet article, je veux vous montrer comment tirer parti plus efficacement du déclencheur Tous les éléments. Fondamentalement, vous voudrez peut-être utiliser le déclencheur All Elements, mais imitez ensuite le déclencheur Just Links pour trouver l’élément d’emballage le plus proche et le renvoyer pour que GTM l’utilise.

Pourquoi utiliser All Elements ?

Eh bien, il y a une raison évidente : Il y a toutes sortes d’éléments sur la page que vous voudrez peut-être suivre. Même si les liens sont un élément de suivi très populaire, de nombreux éléments n’ont rien à voir avec les liens.

Vous souhaitez peut-être suivre un bouton, un champ de formulaire ou une image. Dans ces cas, vous aurez besoin du déclencheur Tous les éléments.

Une autre raison dont vous n’êtes peut-être pas conscient est très importante : Le déclencheur Tous les éléments utilise le Capturer phase du chemin de l’événement. Le déclencheur Just Links, ainsi que presque tous les autres déclencheurs GTM, utilisent le bulle phase.

Et pourquoi est-ce significatif ? Étant donné que la propagation des événements est le plus souvent annulée dans le bulle phase! De nombreuses personnes ont rencontré des formulaires et des liens qui refusent simplement de déclencher leurs déclencheurs respectifs dans Google Tag Manager. La raison en est que d’autres JavaScript sur le site peuvent empêcher l’événement de remonter le document jusqu’à l’endroit où les auditeurs de Google Tag Manager attendent.

Mais lorsque vous utilisez le déclencheur Tous les éléments, vous utilisez le Capturer phase, qui est annulée beaucoup moins souvent.

En d’autres termes, vous pouvez réellement utiliser le déclencheur All Elements pour appliquer le suivi des liens pour les liens qui ne créent pas d’événement GTM lors de l’utilisation du déclencheur Just Links !

Le seul problème avec cette approche est que le déclencheur Tous les éléments renvoie l’élément réel qui a été cliqué. Par exemple, supposons que vous ayez un code HTML comme celui-ci sur le site :

<div id="contact-us">   <a href="mailto:[email protected]">     <span>Send me mail</span>   </a> </div>

Si vous avez utilisé un Juste des liens déclencheur et que la propagation de l’événement n’a pas été arrêtée, cliquer sur le lien transmettra le <a href="mailto:[email protected]"/> à Google Tag Manager comme élément cible de l’événement. Mais si vous utilisez le Tous les éléments déclencheur, GTM capture le <span/>car c’est sur cela que le clic a réellement atterri !

Alors, comment tirer parti de All Elements avec ses Capturer gestionnaire de phase, mais toujours capable de capturer n’importe quel élément dans l’arborescence DOM ?

Avec une balise HTML personnalisée et une magie de variable JavaScript personnalisée, bien sûr !

La solution

La solution se décline en deux parties. Tout d’abord, nous devons créer une balise HTML personnalisée qui introduit un polyfill (lire : solution de contournement) pour les navigateurs plus anciens qui pourraient ne pas prendre en charge la méthode que nous allons utiliser.

Ensuite, nous allons utiliser une variable JavaScript personnalisée pour créer une fonction générique à laquelle nous pouvons passer un sélecteur CSS. Cette fonction, à son tour, monte dans l’arborescence du document et renvoie l’élément qui correspond au sélecteur.

Notez que vous pouvez réaliser la plupart de ces opérations facilement avec jQuery ou quelque chose de similaire. Cependant, je veux montrer la façon native de le faire en JavaScript, car ce n’est pas si complexe.

La balise HTML personnalisée

La balise HTML personnalisée doit se déclencher le plus tôt possible sur la page, vous pouvez donc utiliser le déclencheur Toutes les pages, si vous le souhaitez. Voici ce qu’il contient :

<script>   if (!Element.prototype.matches) {     Element.prototype.matches =          Element.prototype.matchesSelector ||          Element.prototype.mozMatchesSelector ||         Element.prototype.msMatchesSelector ||          Element.prototype.oMatchesSelector ||          Element.prototype.webkitMatchesSelector ||         function(s) {             var matches = (this.document || this.ownerDocument).querySelectorAll(s),                 i = matches.length;             while (--i >= 0 && matches.item(i) !== this) {}             return i > -1;                     };   } </script> 

C’est un bon ajout au code du site en général, donc si possible de l’ajouter au JavaScript régulier du site, je vous recommande de le faire !

Le polyfill est copié avec gratitude à partir des pages du Mozilla Developer Network.

Le script vérifie si le navigateur prend en charge la méthode Element.matches() ou l’une de ses alternatives. Si aucune correspondance n’est trouvée, elle est corrigée avec une méthode personnalisée qui fait défiler les éléments du document et vérifie si l’un d’entre eux correspond au sélecteur CSS donné.

Une fois que cela fonctionne, vous pouvez commencer à l’utiliser!

La variable JavaScript personnalisée

Pour que les choses fonctionnent, nous avons besoin d’un petit utilitaire de variable JavaScript personnalisée. Créez donc une nouvelle variable JavaScript personnalisée et nommez-la {{Trouver le plus proche}}. C’est le code que vous devez mettre dans:

function() {   return function(target, selector) {     while (!target.matches(selector) && !target.matches('body')) {       target = target.parentElement;     }     return target.matches(selector) ? target : undefined;   } } 

Cette fonction prend deux paramètres : target et selector. Le premier est un élément HTML tel que le {{Cliquez sur l’élément}} variable intégrée. Ce dernier est une chaîne de sélecteur CSS. Le sélecteur CSS est ce que vous utilisez pour indiquer à GTM ce qui suit :

Commençant par targetcommencez à remonter la structure DOM d’emballage jusqu’à ce que vous trouviez un élément qui corresponde selector. Si un tel élément est trouvé, retournez-le. Si un tel élément n’est PAS trouvé, renvoie la cible d’événement d’origine.

L’idée ici est que même si le clic a atterri sur l’élément que vous vouliez cibler, vous voudrez peut-être accéder à un autre élément par rapport à la cible d’événement d’origine. Pour cela, le matches() La solution de contournement est inestimable, car elle vous permet de parcourir des chemins relatifs aux éléments.

Comment l’utiliser

Une fois que vous avez configuré le polyfill et la variable JavaScript personnalisée, vous pouvez exploiter la variable dans tous vos JavaScript Google Tag Manager avec la syntaxe suivante :

var elementFound = {{Find closest}}(someHTMLElement, 'someCSSselector');

Par exemple, supposons que vous ayez une structure HTML qui ressemble à ceci :

<div id="product_12345">   <div class="details">     <h2>Product 1</h2>   </div>   <div class="link">     <a href="product1.html">       Product 1     </a>   </div> </div>

Maintenant, vous avez mis en place un Cliquez – Juste des liens ou alors Cliquez – Tous les éléments déclencheur pour capturer les clics sur le <a/> élément. Maintenant, cependant, vous souhaitez également saisir la valeur de id attribut du plus haut div (“produit_12345”). Pour cela, vous pouvez utiliser une variable JavaScript personnalisée comme celle-ci :

function() {   var el = {{Find closest}}({{Click Element}}, 'div[id^="product"]');   return typeof el !== 'undefined' ? el.id : undefined; } 

Cette variable JavaScript personnalisée prend {{Click Element}} (l’élément sur lequel on a cliqué à l’origine), puis commence à parcourir le DOM jusqu’à ce qu’elle trouve un div à qui id L’attribut commence par la chaîne “produit”. Si un tel élément est trouvé, il renvoie la valeur de id attribut en question. Si l’élément n’est pas trouvé, il renvoie simplement undefined.

Résumé

Traverser le modèle d’objet de document avec des sélecteurs CSS peut être un très bon ami pour vous, en effet. Les gestionnaires de clics sont généralement aussi précis, car ils renvoient des éléments que nous ne nous attendions pas à ce qu’ils renvoient, ou ils renvoient des éléments trop profonds dans le DOM pour avoir de l’importance.

C’est pourquoi il est bon d’avoir un outil qui vous permet d’accéder plus délibérément à la structure DOM. Traverser le DOM avec la solution de contournement {{Trouver le plus proche}} est un bon moyen d’atteindre le type de liberté en utilisant du JavaScript natif que l’on ne trouve généralement que dans des frameworks comme jQuery.