À un moment donné de l’année turbulente de 2020, vous avez peut-être eu le souffle coupé en regardant l’interface d’aperçu de Google Tag Manager. Non, je ne parle pas de la nouvelle interface du mode aperçu.
Au lieu de cela, je fais référence à la façon dont le Cliquez sur élément et Élément de formulaire les variables intégrées afficheraient désormais un Chemin CSS chaîne plutôt que l’attendu [object HTMLDivElement] (ou équivalent).
Il y avait du bon et mauvais dans cette mise à jour.
Les bon chose était que la variable Click Element était maintenant beaucoup plus informative en mode Aperçu. Honnêtement, vous ne pouvez pas faire grand-chose avec la chaîne d’éléments d’objet en termes de débogage. Être capable de voir le chemin CSS nous donne plus d’indices sur la façon dont l’élément cliqué a été atteint.
Les mal chose était que la sortie du mode de prévisualisation est très trompeuse. Il prétend maintenant que Click Element Retour un chaîne et un chemin CSS. Il ne fait ni l’un ni l’autre. C’est encore Retour un élément HTML que vous pouvez utiliser avec vos prédicats de sélecteur CSS et vos scripts de traversée DOM personnalisés.
Juste pour réitérer : Le comportement de Click Element a ne pas modifié. La seule chose qui a changé est la façon dont la variable Click Element est affiché dans l’interface d’aperçu.
Je me serais attendu à ce que Google conserve l’élément Click tel qu’il était et introduise à la place une nouvelle variable intégrée appelée Click CSS Path ou quelque chose. Cela aurait évité l’ambiguïté tout en ajoutant de la valeur aux variables dans le conteneur.
Eh bien, je veux vous montrer comment vous pouvez créer votre propre variable de chemin CSS. La variable utilise exactement la même méthode que GTM utilise pour déterminer le chemin CSS, elle doit donc toujours correspondre à ce que vous voyez dans l’interface de prévisualisation.
La variable de chemin CSS
Dans Google Tag Manager, accédez à variables et cliquez sur le Nouveau bouton pour créer un nouveau variable définie par l’utilisateur.
Ensuite, choisissez Variable JavaScript personnalisée comme type.
Malheureusement, les modèles personnalisés ne prennent pas (encore) en charge la traversée du DOM ou la gestion des éléments HTML, vous devez donc utiliser une variable JavaScript personnalisée pour cela.
Copiez-collez ce qui suit dans l’éditeur de code :
function() { // Build a CSS path for the clicked element var originalEl = {{Click Element}}; var el = originalEl; if (el instanceof Node) { // Build the list of elements along the path var elList = []; do { if (el instanceof Element) { var classString = el.classList ? [].slice.call(el.classList).join('.') : ''; var elementName = (el.tagName ? el.tagName.toLowerCase() : '') + (classString ? '.' + classString : '') + (el.id ? '#' + el.id : ''); if (elementName) elList.unshift(elementName); } el = el.parentNode } while (el != null); // Get the stringified element object name var objString = originalEl.toString().match(/\[object (\w+)\]/); var elementType = objString ? objString[1] : originalEl.toString(); var cssString = elList.join(' > '); // Return the CSS path as a string, prefixed with the element object name return cssString ? elementType + ': ' + cssString : elementType; } } Enregistrez-le et vous êtes prêt à partir !
Le script construit d’abord la liste des éléments sur le chemin de clic, jusqu’au nœud le plus élevé du document (html).
Il le fait en vérifiant ce que tagName de l’élément est, puis en lui ajoutant des modificateurs de classe et/ou d’ID. Ensuite, il passe à l’élément suivant dans l’arborescence DOM.
Une fois la liste construite, le script prend finalement le nom d’objet de l’élément sous forme de chaîne lui-même (par exemple HTMLDivElement) et l’ajoute comme préfixe à la chaîne de chemin CSS.
Un exemple de valeur de retour du script pourrait ressembler à ceci :
'HTMLDivElement: html > body > div#blog > div.hasCoverMetaIn#main'
Cela signifie que l’élément cliqué est un HTMLDivElement (<div>), avec une seule classe de hasCoverMetaIn et l’identifiant main. L’élément a trois ancêtres : un <div id="blog">les <body> balise, et enfin la <html> nœud lui-même.
Résumé
A quoi sert ce script ? Bonne question!
Ce n’est pas très utile dans un déclencheur, car vous pouvez utiliser le correspond au sélecteur CSS prédicat pour une approche plus robuste de l’identification des éléments dans l’arborescence DOM.
Cependant, il peut être intéressant d’envoyer des métadonnées à l’outil d’analyse de votre choix avec l’événement de clic. Parfois, l’envoi du chemin de clic aidera à découvrir des informations manquantes que vous n’auriez peut-être pas envisagé d’envoyer en premier lieu.
Par exemple, vous pouvez découvrir que votre déclencheur de clic a été trop laxiste, en collectant les clics d’éléments auxquels vous n’aviez jamais pensé. Vous pouvez vérifier le chemin CSS pour voir quels “éléments voyous” reçoivent des clics, après quoi vous pouvez calibrer le déclencheur de clic lui-même pour être plus précis.
De plus, écrire des articles comme celui-ci me manque, où je regarde une personnalisation astucieuse réalisable avec JavaScript.
J’espère que vous avez apprécié l’article! Si vous pensez à un cas d’utilisation pour la variable de chemin CSS, faites-le nous savoir dans les commentaires !
