Relations de nœud et GTM

Il existe désormais un moyen beaucoup plus simple et natif pour GTM : le sélecteur CSS de correspondances.

Derrière ce titre tragiquement ennuyeux se cache une solution simple à de nombreux problèmes liés au suivi automatique des événements de Google Tag Manager. Le dénominateur commun à ces problèmes est un mauvais balisage du site Web. Les sélecteurs sont utilisés avec parcimonie et la hiérarchie des éléments est désordonnée. Ce mépris des relations de nœud appropriées signifie que vous devez recourir à des macros variables de couche de données qui ressemblent à

gtm.element.parentElement.parentElement.id

pour identifier l’élément qui était la cible de l’événement. En d’autres termes, il n’y a pas d’identifiant robuste et unique avec lequel vous pourriez identifier l’élément ciblé, vous devez donc monter ou descendre le modèle d’objet de document pour trouver quelque chose auquel vous pouvez vous accrocher.

C’est ne pas une solution stable.

Plus il y a d’étapes dans votre chaîne de sélection, plus il y a de chances que vous calculiez mal les étapes requises ou que du code sur un modèle de page produise une hiérarchie dont vous n’avez pas tenu compte, entraînant une perte de résultats.

Dans ce guide, je présente une solution assez simple. Il explore le concept de relations de nœuds en utilisant une simple fonction DOM pour le faire. Le tout est toujours une solution de contournement, et vous devriez certainement essayer de discuter avec vos développeurs de la façon de marquer vos éléments avec des identifiants appropriés.

(Au fait, pour des idées de balisage, voici deux excellents articles sur l’utilisation des attributs de données comme identifiants :

Suivi des clics à l’aide d’attributs de données personnalisés – Bounteous
Événements Google Tag Manager utilisant des attributs de données HTML5 – SwellPath)

Quoi qu’il en soit, ce guide démontrera une fonction DOM (Document Object Model) assez simple avec laquelle vérifier si un élément donné (par exemple {{element}}) est un ancêtre d’un autre élément (par exemple un wrapper de menu de niveau supérieur). La règle ressemblera à ceci :

Comme d’habitude, il y a la méthode facile et puis il y a la méthode avancée (qui n’est pas vraiment avancée du tout).

La méthode facile

La méthode simple consiste simplement à vérifier la relation de nœud entre un élément donné, tel que {{element}}, et un élément parent spécifique. Ceci est utile si vous n’avez qu’un ou deux cas où cela pose problème.

La méthode DOM que nous allons utiliser est Node.contains.

Ici se trouve le Macro JavaScript personnaliséequi est le moteur de la solution, dans toute sa simplicité :

{{le nœud contient l’élément}}

function() {   var controlElement = document.querySelector('#parentId');   return controlElement && controlElement !== {{element}} ? controlElement.contains({{element}}) : false; } 

Et puis votre règle de tir sera quelque chose comme :

{{le nœud contient l’élément}} est égal à vrai
{{event}} est égal à gtm.linkClick

N’hésitez pas à utiliser tout autre type de suivi d’événement automatique que vous souhaitez.

Cela ne déclenchera la balise que si un clic se produit sur un lien qui est un ancêtre direct d’un élément avec ID ID parent. Un cousin ou un frère de sang perdu depuis longtemps ne fera pas l’affaire ; les nœuds doivent avoir une relation ancestrale directe.

Alors c’était facile, non ? Qu’en est-il lorsque vous avez plusieurs relations ancêtre-descendant que vous souhaitez explorer ? Vous pouvez créer une règle et une macro pour chacun, mais un moyen beaucoup plus robuste consiste à utiliser une table de consultation ou une macro JavaScript personnalisée.

La méthode avancée

L’idée avec la méthode avancée est de faire varier le nœud par rapport auquel vous contrôlez l’élément d’événement, en fonction de certains paramètres. Dans cet exemple particulier, j’utilise {{chemin URL}} pour déterminer le nœud de contrôle à choisir, et une macro JavaScript personnalisée pour renvoyer le nouveau sélecteur de requête.

Disons que j’ai trois modèles de page :

1. Page d’accueil (chemin url === ‘/’), où je veux suivre les clics sur les liens dans la navigation principale (id === ‘#mainNav’)

2. Pages de produits (chemin d’url === ‘/products/*’), où je souhaite suivre les clics dans l’un des trois éléments de page Call-to-action (class === ‘call-to-action’)

3. Toutes les autres pages, où je veux suivre les clics sur les liens dans le pied de page (nom de la balise === ‘footer’)

Maintenant, pour compléter la macro JavaScript personnalisée ci-dessus, je veux que le sélecteur de requête soit dynamique, selon laquelle des conditions ci-dessus est vraie. Alors modifions un peu la macro :

function() {   var controlElement = document.querySelector({{get query selector}});   return controlElement && controlElement !== {{element}} ? controlElement.contains({{element}}) : false; } 

Donc c’est pareil, mais le document.querySelector() récupère la chaîne de requête à partir d’une macro appelée {{obtenir le sélecteur de requête}}.

Et à quoi ressemble cette macro ? Eh bien, pour satisfaire les trois exigences que j’ai énumérées ci-dessus, voici ce que vous obtiendrez :

function() {   var homeRegex = /^\/$/,       productRegex = /^\/products\//;   if(homeRegex.test({{url path}})) {     return '#mainNav';   } else if (productRegex.test({{url path}})) {     return '.call-to-action';   }   return 'footer'; } 

Cela renvoie une chaîne différente à chaque fois, selon la condition satisfaite par le chemin URL du document.

Vous pouvez maintenant créer une balise unique pour chacune de ces trois variantes, en faisant toujours référence à la même macro dans la règle, car elle renverra vrai/faux selon la condition satisfaite. Si vous souhaitez une vérification plus détaillée que juste booléen vrai/faux, vous pouvez modifier la macro d’origine pour renvoyer le sélecteur de requête lui-même, après quoi vous pouvez modifier la règle en conséquence :

function() {   var controlElement = document.querySelector({{get query selector}});   return controlElement && controlElement !== {{element}} && controlElement.contains({{element}}) ? {{get query selector}} : false; } 

Ce morceau de code renvoie “#mainNav” si le clic s’est produit sur la navigation de la page d’accueil, “.call-to-action” si le clic s’est produit sur l’un des trois éléments d’appel à l’action de la page d’accueil, ou “footer ‘ pour tous les autres cas. Ensuite, si vous avez une balise qui ne doit se déclencher que sur les clics sur les appels à l’action de la page produit, la règle ressemblera à ceci :

{{événement est égal à gtm.linkClick}}
{{node contains element}} est égal à .call-to-action

Et c’est tout pour la méthode avancée. N’oubliez pas que l’un des grands avantages de l’utilisation d’une solution de gestion des balises est la possibilité de consolider vos balises et d’alléger l’ensemble de la configuration. L’utilisation de macros JavaScript personnalisées pour les recherches avancées ou de la macro de table de consultation pour les récupérations de valeurs simples est généralement la clé pour réduire le poids de votre implémentation.

conclusion

C’était un guide très basique sur une petite méthode douce de l’objet DOM Node que peu de gens semblent connaître. Le point ici est qu’au lieu de construire de vastes chaînes de sélecteurs, où chaque lien est plus faible que celui qui le précède, vous pouvez simplement utiliser une recherche d’ancêtre globale, ce qui réduit les risques d’erreur.

Si vous voulez être vraiment flashy, il y a toujours la méthode Node.compareDocumentPosition(), qui renvoie un masque de bits représentant la relation entre deux nœuds. Il ne prend pas seulement en compte l’ascendance, il recherche également les relations descendantes, ce qui peut être utile dans certains cas. Cependant, ce n’est pas dans le cadre de ce guide, et je suis presque sûr que la plupart des problèmes peuvent être résolus avec la recherche d’ancêtre.

JavaScript est amusant! Google Tag Manager est amusant !