Declencheur : Click - All Elements

Ce qu'on va faire sur cette page

Le declencheur Click - All Elements capture TOUS les clics sur la page, quel que soit l'element (bouton, image, div, texte...). On va tester sur differents types d'elements.

  1. Ouvrir GTM Preview sur cette page
  2. Cliquer sur chaque element dans la zone de demo
  3. Observer les events "Click" dans le Summary
  4. Regarder les variables Click Element, Click Classes, Click ID, Click Text
  5. Creer un trigger Click - All Elements avec un filtre sur Click Classes ou Click ID

Clique sur chacun de ces elements et observe dans GTM Preview les variables qui remontent.

Ceci est un lien <a>
Ceci est un <div> cliquable (pas un bouton ni un lien)
Image cliquable

Image cliquable

Ceci est un <span> cliquable
Variables Click dans GTM 
// Variables disponibles dans GTM pour chaque clic :

Click Element  -> L'element HTML clique (ex: <button class="btn btn-primary" id="btn-demo-primary">)
Click Classes  -> Les classes CSS (ex: "btn btn-primary")
Click ID       -> L'id de l'element (ex: "btn-demo-primary")
Click Text     -> Le texte visible (ex: "Bouton principal")
Click Target   -> L'attribut target (pour les liens)
Click URL      -> L'URL du lien (pour les <a>)
Trigger avec filtre sur Click ID 
// Exemple de trigger avec filtre :
// Declencheur : Click - All Elements
// Condition : Click ID contient "btn-demo"
//
// Ce trigger ne fire que pour les boutons dont l'id contient "btn-demo"
// -> Ca filtre les 4 boutons de la demo mais ignore les autres clics

Attention au "bubbling"

Si tu cliques sur le texte <code> a l'interieur du div cliquable, GTM remonte l'element <code> comme Click Element - pas le div parent. C'est le "event bubbling". Pour eviter ca, utilise un filtre sur Click ID ou Click Classes avec l'option "contient" ou "correspond a l'expression reguliere".