Soyez honnête, pouvez-vous penser à quelque chose de plus injuste que cela :
Une nouvelle fonctionnalité de Google Tag Manager, publiée sur 02h07 mon temps, et avec une chasse aux œufs de Pâques ? ! Bien sûr, c’est l’exaspérant Charles Farina qui a trouvé le nouveau long métrage et a remporté le prix. Maudits ! (Je plaisante Charles, tu es toujours génial.)
Quoi qu’il en soit, il y a une nouvelle fonctionnalité GTM en ville, et oh boy, cette fois c’est un big’un ! Sans plus tarder, permettez-moi de vous présenter un nouvel opérateur Trigger – le correspond au sélecteur CSS:
C’est mode opératoire est assez simple. Vous créez une condition de déclenchement, où un élément HTML est vérifié par rapport à un sélecteur CSS. Si le sélecteur CSS s’applique à l’élément HTML, la condition est acceptée.
Sélecteurs CSS et GTM
Les sélecteurs CSS sont des modèles que vous vérifiez dans n’importe quel élément HTML donné. Traditionnellement, les sélecteurs CSS ont été utilisés pour modifier les styles des éléments donnés. De nos jours, nous pouvons également les utiliser pour cibler des éléments HTML à d’autres fins, d’autant plus que des frameworks tels que jQuery, qui ciblent des éléments à l’aide de sélecteurs CSS, sont devenus omniprésents. Il y a aussi le JavaScript vanille querySelector(), querySelectorAll() et matches() Méthodes DOM qui vous permettent de sélectionner des éléments en fonction des sélecteurs CSS.
Pour une belle liste des sélecteurs CSS3 actuellement pris en charge, consultez le guide W3Schools : CSS Selector Reference.
Voici quelques sélecteurs CSS qui pourraient vous être très utiles. Ceux-ci sont tous liés au suivi automatique des événements, car les possibilités de suivi automatique des événements viennent de s’ouvrir d’une manière complètement nouvelle avec l’introduction de ce nouvel opérateur Trigger.
Au lieu de cibler ID de clic ou alors Classe de formulaire, vous devez maintenant toujours fournir un élément HTML à la condition de déclencheur. Vous devrez donc utiliser Cliquez sur élément ou alors Élément de formulaire (c’est la même chose) pour faire correspondre le modèle à votre élément cible d’événement automatique.
| Sélecteur | La description |
|---|---|
| .cette classe | Correspond si l’élément a la classe “thisclass” |
| .cetteclasse.cetteclasse | Correspond si l’élément a la classe “thisclass” et la classe “thatclass” |
| #thisid | Correspond si l’élément a l’ID “thisid” |
| #main .navlink | Correspond si l’élément a la classe “navlink” et est un descendant d’un élément avec l’ID “main” |
| div#main > .navlink | Correspond si l’élément a la classe “navlink” et est l’enfant direct d’un élément DIV avec l’ID “main” |
| :vérifié | Correspond si l’élément est coché (bouton radio ou case à cocher) |
| [data-title*=”chairman mao”] | Correspond si l’élément a l’attribut “data-title” avec la chaîne “chairman mao” quelque part dans sa valeur |
| une[href$=”.pdf”] | Correspond si l’élément est un lien (A) avec un attribut HREF qui se termine par “.pdf” |
| .contactmail:only-child | Correspond si l’élément a la classe “contactmail” et est le seul enfant de son parent |
Comme vous pouvez le voir, vous pouvez faire des choses assez créatives avec. L’atout le plus significatif est, de loin, la chance de voir des relations ancestrales. Vous pouvez maintenant vérifier si l’élément qui a été cliqué ou soumis est l’enfant ou le descendant direct d’un élément donné. Quelle manière ingénieuse de déclencher des balises uniquement sur les clics sous la navigation principale, par exemple !
N’oubliez pas que vous pouvez ajouter plusieurs sélecteurs comme avec CSS en utilisant une virgule entre les sélecteurs :
Cliquez sur Élément – correspond au sélecteur CSS – vidéo, vidéo *
Cette condition correspondrait aux clics sur un HTML5 <video> élément ou l’un de ses descendants.
Vous êtes limité par CSS3, principalement. Vous ne pouvez pas effectuer de vérifications descendantes, vous ne pouvez donc pas avoir un sélecteur CSS qui ne correspond à un élément que s’il a un élément spécifique comme enfant. Vous aurez toujours besoin de JavaScript pour cela, malheureusement.
Heureusement, CSS4 est déjà assez loin dans ses étapes de brouillon. Il apporte une multitude de nouvelles fonctionnalités étonnantes, qui ne feront que rendre ce déclencheur de sélecteur CSS encore plus puissant.
Détails techniques
Juste pour conclure cet article, voici une description technique du nouvel opérateur (merci Brian Kuhn !). Il n’y a rien de révolutionnaire là-dedans, prouvant à quel point GTM s’appuie toujours sur des pratiques bien fondées plutôt que d’inventer à chaque fois la roue.
L’opérateur utilise le matches() méthode avec des variations selon le navigateur que vous utilisez. Le matches() La méthode vous permet de vérifier si un élément donné correspond à un sélecteur CSS :
element.matches('.thisclass'); Le code ci-dessus serait évalué à vrai si l’élément donné a la classe “thisclass”.
matches() n’est pas pris en charge par tous les navigateurs, et par exemple Internet Explorer ne le prend en charge qu’à la version 9.0. Pour les navigateurs obsolètes, GTM revient à vérifier chaque nœud qui correspond à un sélecteur donné, et il renvoie vrai si l’élément donné est parmi ces nœuds.
