web-dev-qa-db-fra.com

Différences entre "Click Classes" et "Click Element" dans Google Tag Manager

Je ne comprends pas vraiment les différences entre "Click classes" et "Click Element" dans Google Tag Manager. Je ne comprends pas l'utilisation attendue de ces événements et je ne comprends pas leur comportement respectif concernant "contient" et "sélecteur CSS".

Disons que j'ai class="buttons primary small".

Ce qui fonctionne:

Click Element -> Matches CSS selector -> .buttons.small 
Click Classes -> contains -> small 

Ce qui ne fonctionne pas

Click Element -> contains -> .buttons.small 
Click Classes -> Matches CSS selector -> small 

si Click Classes est "un tableau des classes sur un objet", que se passe-t-il vraiment "sous le capot" de GTM lors de ce type de manipulation?

Ce n'est pas que j'ai un vrai problème, j'essaie juste de bien comprendre.

11
Simon Breton

Cliquez sur Classes renvoie la valeur de l'attribut class de l'élément HTML qui était la cible de l'action. Il s'agit toujours d'une chaîne et, dans votre exemple, retournerait des "boutons principaux petits", mais pas nécessairement dans cet ordre.

Click Element renvoie l'élément HTML qui était la cible de l'action.

"contient" est un type de correspondance dans GTM que vous utilisez contre des chaînes. C'est pourquoi cela fonctionne avec les classes de clic (qui renvoie une chaîne) et non avec l'élément de clic.

"Correspond au sélecteur CSS" est une vérification si un élément donné correspond à un sélecteur CSS donné. "Matches CSS Selector" doit donc être fait contre un élément HTML. C'est pourquoi cela fonctionne avec Click Element et non avec Click Classes.

À mon avis, les classes de clic sont redondantes, car il vaut toujours mieux faire une vérification du sélecteur CSS contre l'élément de clic plutôt qu'une correspondance de chaîne contre les classes de clic. Il est plus robuste de cette façon, et vous n'avez pas non plus à vous soucier des noms de classe dans un certain ordre dans la valeur d'attribut de classe.

En d'autres termes, mieux:

Cliquez sur Élément correspond au sélecteur CSS .buttons.primary.small

Pire:

Cliquez sur Classes contient boutons principal petit

16
Simo Ahava