Comment configurer un event de clic sur TagCommander ?

A l’instar de Google Tag Manager, il est désormais possible d’implémenter soi-même le tracking des clics via le TMS de TagCommander. Pour ce faire, il faut configurer un nouveau déclencheur de clics. Dans votre container préféré, rendez-vous à l’étape des règles, puis cliquez sur « Ajouter un déclencheur« . Ensuite, il faut aller dans la section « Clics » :

Cet écran s’affiche et permet de cocher les tags à appeler via ce nouveau déclencheur. Ensuite, la configuration se base sur les class css de votre lien ou du bouton à traquer. Dans mon cas, mon bouton de validation d’envoi du formulaire possède la class « .submit ».

Tips : Pour trouver la class css correspondante, effectuez un clic droit sur l’élément à traquer de votre site, puis cliquez sur inspecter.

Pour vérifier que votre implémentation fonctionne, générez une version puis simulez le container sur votre site (via l’extension Chrome) ou envoyez votre fichier sur votre environnement de recette. Pour rappel, n’hésitez-pas à consulter l’article suivant pour apprendre à vérifier les events TagCommander : Comment recetter les events de TagCommander ?

Notez qu’il est aussi possible d’implémenter vos tags de clics, via un évènement personnalisé. Cette méthode est d’ailleurs recommandée, dans le cas où vous avez prévu de traquer un grand nombre de clics dans votre plan de marquage. Dans ce cas, il faut demander à vos développeurs d’implémenter la fonction tC.event sur l’attribut onclick des liens et boutons, que vous souhaitez traquer sur votre site internet.

Ci-dessous un exemple :

tC.event.click(this, {'category':'inscription', 'action':'validation',
'label':'CTA validation inscription'})

Le nom de l’event est totalement personnalisable mais il semble logique ici de l’appeler « click ». Les paramètres de l’évènement sont libres également. Ici, on se cale sur un modèle Google Analytics avec la catégorie, l’action et le libellé qui sont attendus.

Ensuite, dans TagCommander, au lieu de sélectionner le déclencheur des clics, il faut se rendre dans l’onglet « Personnalisé » pour cocher les bons tags et renseigner le nom de l’event « click » en bas dans le champ :

N’oubliez pas d’enregistrer et le tour est joué !

2 Comments

  1. Bonjour Sébastien , merci pour cet article 🙂 je souhaiterai connaitre la syntaxe quand tu veux envoyer plusieurs variables et certaines de type tableau dans le même évent . est ce que ca pourrai ressembler à ceci :

    tC.event.productClick(
    this,
    {
    ‘category’:’eventCategory’,
    ‘action’:’eventAction’,
    ‘label’:’eventLabel’
    }

    « ecommerce »,
    {

    « click »,
    {
    ‘list’: ‘productList’,
    }

    « products »,
    {
    ‘id’: ‘productID’,
    ‘name’: ‘productName’,
    ‘price’: ‘productPrice’
    ‘category’: ‘productCategory’,
    ‘brand’: ‘productBrand’,
    « variant »: {‘productSize’, ‘Color’:’ ProductColor’},
    ‘position’: ‘productPosition’,
    }
    }
    }
    );

    et plus généralement comment passer de la syntaxe GTM (Google Tag Manager) a celle de TagCo merci pour ta réponse !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *