Il y a environ quatre ans, Google Tag Manager a publié un nouveau prédicat de déclencheur nommé correspond au sélecteur CSS. Lentement mais sûrement, il est devenu l’une des petites fonctionnalités les plus utiles de GTM.

Même si j’ai déjà écrit plusieurs fois sur les sélecteurs CSS, je voulais compiler toutes les informations pertinentes dans un seul guide. Pour une ressource externe, je recommande de mettre en signet la référence du sélecteur CSS w3schools.com. Mais pour votre utilisation quotidienne des sélecteurs CSS dans GTM, ce guide vous sera, espérons-le, utile.

N’oubliez pas de lire mon article sur les 10 sélecteurs que je considère comme les plus utiles dans GTM – cette liste contient des cas d’utilisation plus concrets à utiliser. Si vous voulez un moyen concret de tester les sélecteurs CSS avec (en dehors de GTM), consultez le testeur de sélecteur CSS w3schools.com.

Que sont les sélecteurs CSS ?

Vous pouvez utiliser des sélecteurs CSS pour cibler n’importe quel élément sur une page Web. Chaque élément est position unique dans le modèle d’objet de document (DOM), et ainsi les sélecteurs peuvent être utilisés pour trouver même les éléments les plus génériques.

Parfois les sélecteurs sont très simples tout en étant extrêmement robustes. Par exemple, lors de l’utilisation d’un sélecteur comme div#authorvous sélectionnez un élément qui ressemble à <div id="author">. Puisqu’il a le id attribut, il est raisonnable de s’attendre à ce que ce soit le seul tel élément sur la page, donc même ce petit sélecteur est très puissant.

D’un autre côté, parfois, tout ce que vous pouvez faire est d’utiliser une chaîne très longue et complexe, car il y a si peu de caractéristiques d’identification uniques dans l’élément lui-même ou ses ancêtres les plus proches. Ainsi, le sélecteur pourrait finir par ressembler à ceci :

#main > article > div.post-content.markdown > div > p:nth-child(12) > a:nth-child(2)

Ce n’est pas joli, et cela porte le poids supplémentaire que plus le sélecteur CSS est long et complexe, plus il devient fragile. Le sélecteur ci-dessus sera invalidé lorsque l’un des éléments de la chaîne change de position ou de forme.

En d’autres termes, efforcez-vous toujours de créer un sélecteur le plus simple possible sans compromis sa précision pour cibler l’élément exact que vous souhaitez.

Les sélecteurs CSS sont nés, surprise surprise, dans les feuilles de style en cascade (CSS). Les feuilles de style sont des ensembles de règles et de déclarations qui régissent la façon dont les éléments HTML sont affichés (et parfois interagissent avec) sur une page Web. Voici à quoi pourrait ressembler une déclaration de style typique :

a:hover, a:active {     text-decoration: none;     font-weight: bold }

Les deux éléments précédant le { et séparés par une virgule sont les sélecteurset les deux lignes contenues dans les accolades sont les déclarations. Voici comment vous liriez la règle :

1. Sélectionnez tous les liens (a) qui sont actuellement survolées par la souris (:hover)
2. ET sélectionnez tous les liens (a) qui sont actuellement cliqués par la souris (:active)
3. PUIS supprimez toutes les décorations de texte (par exemple le soulignement) d’eux
4. ET définissez leur poids de police sur audacieux

CSS est sa propre discipline merveilleusement complexe dans la conception et le développement de sites Web. Il y a tellement de choses étranges et magnifiques que vous pouvez faire avec, du remplacement de la fonctionnalité JavaScript à l’exécution de transitions complexes à l’aide de l’accélération matérielle.

Eh bien, dans ce guide, nous essaierons d’être un peu plus modestes et de nous concentrer sur la façon dont les sélecteurs CSS peuvent être utilisés avec le JavaScript de Google Tag Manager pour tirer le meilleur parti des déclencheurs, des balises et des variables, où sélectionner, interroger ou analyser le bon élément est de la plus haute importance.

Sélecteurs CSS en JavaScript

Dans Javascriptvous rencontrerez souvent des sélecteurs CSS dans deux scénarios :

1. Tu dois récupérer un ou des éléments spécifiques de la page.

2. Vous devez vérifier si un élément donné allumettes un sélecteur CSS.

Ces deux scénarios sont très pertinents dans Google Tag Manager. Avant de nous plonger dans leur fonctionnement dans GTM, examinons la gestion par JavaScript des sélecteurs CSS.

En utilisant document.querySelector et document.querySelectorAll

Les deux méthodes JavaScript que vous utiliserez le plus souvent avec les sélecteurs CSS sont document.querySelector(selector) et document.querySelectorAll(selector).

La première renvoie le premier élément de la page qui correspond au sélecteur donné.

La deuxième renvoie une liste de tous les éléments de la page qui correspondent au sélecteur donné.

// Get the first outbound link element on the page var firstOutbound = document.querySelector('a:not([href="mydomain.com"])');  // Get all the checked checkbox and radio button elements on the page var allChecked = document.querySelectorAll('input[type="checkbox"]:checked,input[type="radio"]:checked'); 

Comme vous pouvez le voir, le sélecteur est passé en tant que chaîne argument de la méthode.

N’oubliez pas que les éléments HTML sont essentiellement des objets et que leur simple capture n’a souvent aucun sens. Au lieu de cela, vous voudrez faire quelque chose avec ces objets, comme en analyser certaines propriétés.

// Get the first outbound link element on the page var firstOutbound = document.querySelector('a:not([href="mydomain.com"])');  // Push the URL of this outbound link into dataLayer window.dataLayer.push({   firstOutboundLinkURL: firstOutbound.getAttribute('href') }); 

Dans l’exemple ci-dessus, nous utilisons document.querySelector pour récupérer le premier lien sortant (c’est-à-dire un lien qui n’a PAS mydomain.com dans son href), puis nous le poussons dans dataLayer.

Une chose à retenir est que document.querySelectorAll ne renvoie pas un déployer mais plutôt un NodeList. Cela signifie que vous ne pouvez pas utiliser les méthodes de tableau régulières avec tout ce que la méthode retourne. Vous devrez recourir à certaines solutions de contournement si vous souhaitez, par exemple, map() tous les éléments de la liste pour obtenir un tableau modifié en conséquence.

// Get ALL outbound links on the page var allOutbound = document.querySelectorAll('a:not([href="mydomain.com"])');  // Create an array of all their href values var allHrefValues = Array.prototype.map.call(allOutbound, function(link) { return link.href; });  // Remove all duplicates var uniqueHrefValues = allHrefValues.filter(function(href, index) { return allHrefValues.indexOf(href) === index; }); 

Comme vous pouvez le voir, pour exécuter le map() méthode par rapport à la liste renvoyée par document.querySelectorAll, vous devez appeler la méthode à partir du prototype de tableau. C’est une bonne chose à garder à l’esprit si jamais vous vous retrouvez à travailler avec document.querySelectorAll.

En utilisant element.matches

Si vous voulez vérifier si un élément donné allumettes un sélecteur CSS spécifique, vous pouvez utiliser le matches() méthode comme celle-ci :

// Check if the clicked element is an outbound link function checkIfClickedElementIsOutbound() {   var element = {{Click Element}};   if (element.matches('a:not([href="mydomain.com"])') {     return true;   } else {     return false;   } } 

Vous invoquez le matches() méthode sur l’élément lui-même (l’élément doit être un élément HTML), et comme querySelector / querySelectorAll, vous transmettez le sélecteur comme argument de chaîne. La méthode retourne true pour un match, et false autrement.

La chose à propos matches() est qu’il n’avait pas l’habitude d’avoir un support de navigateur stellaire, donc si vous voulez utiliser ces méthodes avec Internet Explorer à l’esprit, vous devrez peut-être implémenter un polyfill pour prolonger le support (voir ici pour l’inspiration).

Heureusement, le matches() La méthode est abstraite dans Google Tag Manager lors de l’utilisation de déclencheurs, ce qui est de loin le cas d’utilisation le plus courant. Alors plongeons dedans !

Sélecteurs CSS dans Google Tag Manager

Dans Gestionnaire de balises Googlevous trouverez des sélecteurs CSS à plusieurs endroits.

Vous pouvez les utiliser comme méthode de sélection dans la variable DOM Element :

L’utilisation d’un sélecteur CSS ici vous permet de cibler des éléments spécifiques qui pourraient ne pas avoir l’attribut ID (la seule autre méthode de sélection fournie).

Vous pouvez également trouver la même option dans le déclencheur Element Visibility :

Alors que la variable DOM Element ne renvoie que le première élément correspondant (ressemblant ainsi à document.querySelector), le déclencheur Element Visibility peut être défini sur la cible tous les éléments correspondants, ce qui rend les sélecteurs CSS super puissants dans ce type de déclencheur particulier.

Le troisième scénario, et de loin le plus utile pour les sélecteurs CSS dans Google Tag Manager, est le prédicat du sélecteur CSS matches lorsqu’il est utilisé avec le {{Cliquez sur l’élément}} variable intégrée.

La variable d’élément de clic

Les Cliquez sur élément variable est une variable intégrée que vous devez permettre avant de pouvoir utiliser. Le moyen le plus simple de l’activer est d’aller sur variables via la navigation principale de GTM, et cliquez sur le bleu Configurer bouton dans le coin supérieur du contenu.

Dans la superposition qui s’ouvre, cochez la case à côté de Cliquez sur élément et tu as fini. Vous pouvez maintenant choisir la variable Click Element dans toutes les listes déroulantes de variables de GTM.

Cliquez sur élément renvoie le élément HTML qui était la cible de l’action de déclenchement d’événement automatique. En d’autres termes:

• Il renvoie le élément cliqué lors de l’utilisation des déclencheurs Clic / Tous les éléments et Clic / Liens uniquement.

• Il renvoie le élément de formulaire envoyé lors de l’utilisation du déclencheur de soumission de formulaire.

• Il renvoie le élément correspondant devenu visible lors de l’utilisation du déclencheur Element Visibility.

Comme il renvoie un élément HTML, vous pouvez l’utiliser dans vos balises HTML personnalisées et vos variables JavaScript personnalisées avec des méthodes d’élément HTML typiques telles que getAttribute, appendChildet oui, matches.

Dans GTM, vous l’utiliserez le plus souvent, je suis assez confiant pour dire, avec le correspond au sélecteur CSS prédicat dans vos déclencheurs Click and Form. Ce n’est pas très utile avec le déclencheur Element Visibility, puisque vous spécifiez déjà l’ensemble d’éléments correspondants avec le paramètre de sélecteur CSS dans le déclencheur.

Le prédicat Matches CSS Selector

Vous pouvez utiliser le correspond au sélecteur CSS prédicat de déclenchement avec le Cliquez sur élément variable pour vérifier si l’élément correspond à un sélecteur spécifique (d’oh).

Ceci est particulièrement utile avec le Tous les éléments déclencheur, car il se déclenche vraiment lorsque rien sur la page est cliqué, et vous pouvez utiliser des sélecteurs CSS pour empêcher la balise à laquelle le déclencheur est attaché de se déclencher trop souvent.

Pour que cela fonctionne, vous devez d’abord vérifier le Ce déclencheur se déclenche sur… Certains clics/Certains clics sur des liens/Certains formulaires l’option, puis sélectionnez l’option Cliquez sur élément variable du sélecteur de variable, la correspond au sélecteur CSS prédicat dans le sélecteur de prédicat, puis tapez le sélecteur dans le champ à droite, comme ceci :

Une chose à garder à l’esprit est que le Tous les éléments saisit vraiment le exact l’élément sur lequel l’utilisateur a cliqué. Ainsi, il peut s’agir de quelque chose d’imbriqué dans l’élément pour lequel vous avez réellement rédigé le sélecteur. Avec le déclencheur Tous les éléments, vous devez utiliser généreusement le caractère générique (*) sélecteur. Lisez cet article pour plus d’informations.

Dans le chapitre de référence ci-dessous, j’ai inclus à quoi ressemblerait un déclencheur de clic pour tous les sélecteurs répertoriés dans la référence.

Référence du sélecteur CSS pour Google Tag Manager

La référence ci-dessous est une version modifiée (allégée) de l’excellente ressource de w3schools. J’ai adapté les différents sélecteurs en pensant aux cas d’utilisation imaginaires de Google Tag Manager.

N’oubliez pas que vous pouvez combiner des sélecteurs pour identifier différents aspects de l’élément. Lorsque vous combinez des sélecteurs, placez-les l’un après l’autre avec non espace entre les deux. Par exemple, pour cibler tous <a> éléments qui ont le author classer, simo comme ID, et qui sont également des liens sortants, utilisez quelque chose comme ceci :

a.author#simo:not([href="mydomain.com"])

L’ordre est sans conséquence, mais il est d’usage d’ajouter pseudo-classes (par exemple :checked, :not) jusqu’à la fin pour plus de lisibilité.

.classer

Correspond aux éléments qui ont la classe donnée comme l’un des noms de classe dans leur class attribut.

Exemple de structure HTML

<a class="highlight author" href="/author-page/">   <span>Simo Ahava</span> </a>

Exemple de déclencheur

Sélecteur

.author

Résultat

Le déclencheur se déclenche si le lien est cliqué. clique sur le <span> fonctionnent aussi, puisque le déclencheur Just Links récupère automatiquement l’emballage de fermeture <a> élément de tout ce qui a été réellement cliqué.

#identifiant

Correspond aux éléments qui ont l’ID donné comme valeur de leur id attribut.

Exemple de structure HTML

<div class="date">   <a href="/archives">     <span id="date">2019-04-09</span>   </a> </div>

Exemple de déclencheur

Sélecteur

#date

Résultat

La gâchette se déclenche si le <span id="date">...</span> l’élément est cliqué.

élément

Correspond aux éléments qui sont donnés element (par exemple a pour les liens, img pour les images).

Exemple de structure HTML

<a class="author" href="/author-page">   <img id="simo" src="simo.jpg"/> </a>

Sélecteur

img#simo

Exemple de déclencheur

Résultat

Le déclencheur se déclenche si l’élément cliqué est le <img id="simo".../>. Comme vous pouvez le voir, le sélecteur combine les deux element et idce qui signifie que l’élément correspondant doit être à la fois une image et avoir l’ID simo.

élément, élément

Correspond aux éléments qui peuvent être sélectionnés avec QUELCONQUE des sélecteurs séparés par une virgule (vous pouvez ajouter plusieurs sélecteurs, chacun séparé par une virgule).

Exemple de structure HTML

<a class="author" href="/author-page">   <img id="simo_img" src="simo.jpg"/>   <p id="simo_name">Name: Simo Ahava</p> </a>

Exemple de déclencheur

Sélecteur

img#simo_img, p#simo_name

Résultat

Le déclencheur se déclenche si le clic atterrit sur SOIT <img id="simo_img".../> OU ALORS <p id="simo_name">...</p>.

élément élément

Correspond à l’élément le plus à droite lorsqu’il se trouve dans l’élément le plus à gauche de l’arborescence DOM. La relation fait ne pas doit être parent-enfant – il suffit que l’élément de gauche enveloppe l’élément de droite à un moment donné.

Exemple de structure HTML

<section id="main">   <div id="article">     <a href="/archives">       <h1>Hello world!</h1>     </a>   </div> </section>

Exemple de déclencheur

Sélecteur

section#main h1

Résultat

Le déclencheur se déclenche si le clic atterrit sur <h1>Hello world!</h1> car l’un de ses éléments d’habillage correspond au premier sélecteur (section#main).

* (caractère générique)

Correspond à n’importe quel élément. Extrêmement utile lorsqu’il est utilisé avec le déclencheur Click / All Elements.

Exemple de structure HTML

<div id="navi">   <ul>     <li><a href="/home">Home</a></li>     <li><a href="/products">Products</a></li>     <li><a href="/contact">Contact us</a></li>   </ul> </div>

Exemple de déclencheur

Sélecteur

div#navi, div#navi *

Résultat

La gâchette se déclenche lorsque le <div id="navi"> élément ou quelconque de ses éléments imbriqués (<ul>, <li> et <a>) sont cliqués.

Le sélecteur est div#navi, div#navi *. D’après ce que vous avez appris ci-dessus, c’est en fait deux sélecteurs, div#navi et div#navi *et le déclencheur se déclenchera si vous cliquez sur l’un ou l’autre.

Le premier sélecteur correspond aux clics directement sur le <div id="navi"> élément. Le deuxième sélecteur correspond aux clics sur quelconque élément qui est enveloppé par <div id="navi">. L’espace blanc est important ici. Si le deuxième sélecteur était div#navi > *seuls les clics sur le <ul>car c’est le seul enfant direct de <div id="navi">.

élément>élément

Correspond à l’élément le plus à droite lorsque son parent direct est l’élément à gauche.

Exemple de structure HTML

<section id="main">   <div id="article">     <a href="/archives">       <h2>Hello world!</h2>     </a>   </div> </section> <section id="end">   <div id="footer">     <h2>Goodbye world!</h2>   </div> </section>

Exemple de déclencheur

Sélecteur

div>h2

Résultat

Le déclencheur se déclenche si le clic atterrit sur <h2>Goodbye world!</h1> parce que son parent direct est <div>. Ce sera ne pas tirer sur <h2>Hello world!</h2> parce que le parent direct de cet élément est <a>.

élément+élément

Correspond à l’élément le plus à droite s’il vient directement après l’élément le plus à gauche. Ils doivent partager le même parent.

Exemple de structure HTML

<div id="author">   <img src="/author.jpg" id="author_image"/>   <p>Author name</p> </div>

Exemple de déclencheur

Sélecteur

img#author_image+p

Résultat

Le déclencheur se déclenche si le clic atterrit sur le <p>car c’est juste après le <img id="author_image"/>.

élément1~élément2

Correspond à l’élément le plus à droite s’il est précédé de l’élément le plus à gauche. Ils doivent partager le même parent. En d’autres termes, il est légèrement moins strict que le sélecteur précédent, en ce sens que l’élément précédent n’a pas besoin d’être immédiatement à côté de l’élément ciblé.

Exemple de structure HTML

<div id="author">   <img src="/author.jpg" id="author_image"/>   <span>Author name</span>   <a href="https://www.simoahava.com">Author home page</a> </div>

Exemple de déclencheur

Sélecteur

img#author_image~a

Résultat

Le déclencheur se déclenche si le clic atterrit sur le <a>car il est précédé de <img id="author_image"/>.

[attribute]

Correspond si l’élément a l’attribut donné.

Exemple de structure HTML

<div id="main_content">   <div data-name="gtm_example">     <span>GTM examples</span>   </div> </div>

Exemple de déclencheur

Sélecteur

div[data-name]>span

Résultat

Le déclencheur se déclenche si le clic atterrit sur le <span>car son parent direct est un <div> avec le data-name attribut.

[attribute=value]

Correspond si l’élément a l’attribut donné avec la valeur exacte.

Exemple de structure HTML

<div id="main_content">   <div data-name="gtm_example">     <span>GTM example</span>   </div>   <div data-name="second_gtm_example">     <span>Another GTM example</span>   </div> </div>

Exemple de déclencheur

Sélecteur

div[data-name="second_gtm_example"]>span

Résultat

Le déclencheur se déclenche si le clic atterrit sur le seconde <span>car seul il a un parent direct dont data-name l’attribut a la valeur second_gtm_example.

[attribute^=value]

Correspond si l’élément a l’attribut donné dont la valeur commence par la chaîne fournie.

Exemple de structure HTML

<div id="main_content">   <span id="product_12345">     Product 12345   </span>   <span id="product_23456">     Product 23456   </span>   <span id="attachment_12345">     Attachment 12345   </span> </div>

Exemple de déclencheur

Sélecteur

span[id^="product"]

Résultat

Le déclencheur se déclenche si le clic atterrit sur l’un des deux <span> éléments dont l’ID commence par product. Il ne se déclenchera pas si le clic atterrit sur la troisième plage, car cet ID d’élément commence par attachment.

[attribute$=value]

Correspond si l’élément a l’attribut donné dont la valeur se termine par la chaîne fournie.

Exemple de structure HTML

<div id="main_content">   <span id="product_12345">     Product 12345   </span>   <span id="product_23456">     Product 23456   </span>   <span id="attachment_12345">     Attachment 12345   </span> </div>

Exemple de déclencheur

Sélecteur

span[id$="_12345"]

Résultat

Le déclencheur se déclenche si le clic atterrit sur le premier <span> ou le dernier <span>puisque les attributs ID des deux éléments se terminent par _12345. Il ne se déclenchera pas si le clic atterrit sur <span id="product_23456">puisque cet ID ne se termine pas par _12345.

[attribute*=value]

Correspond si l’élément a l’attribut donné dont la valeur contient la chaîne fournie.

Exemple de structure HTML

<div id="author">   <span id="simo_ahava_profile">Simo's profile</span>   <span id="profile_benjamin_ahava">Benjamin's profile</span>   <span id="derek_anderson">Derek's profile</span> </div>

Exemple de déclencheur

Sélecteur

div#author > span[id*="ahava"]

Résultat

Le déclencheur se déclenche si le clic atterrit sur l’un des deux premiers <span> éléments, car ils ont des identifiants qui contenir la ficelle ahava. Il ne tirera pas pour le troisième <span> car l’attribut ID de cet élément ne contient pas la chaîne ahava.

:vérifié

Correspond si l’élément donné est vérifié (boutons radio, cases à cocher et <option> éléments dans les menus de sélection).

Exemple de structure HTML

<form id="contact-us">   My name: <input type="text" name="name" /><br />   I consent to everything <input type="checkbox" name="consent" /><br />   <input type="submit" /> </form>

Exemple de déclencheur

Sélecteur

input[name="consent"]:checked

Résultat

Le déclencheur se déclenche si le clic atterrit sur la case à cocher quand c’est coché (c’est-à-dire l’utilisateur décoche il).