Declencheur : Custom Event

Ce qu'on va faire sur cette page

Le Custom Event est LE declencheur le plus polyvalent de GTM. Il se declenche quand un code JavaScript pousse un event dans le dataLayer. C'est la base de tout tracking avance.

  1. Ouvrir GTM Preview
  2. Cliquer sur les boutons ci-dessous
  3. Observer les Custom Events dans le Summary
  4. Creer un trigger Custom Event dans GTM
  5. Creer un tag GA4 Event lie a ce trigger

Chaque bouton pousse un event different dans le dataLayer

Clique sur un bouton - il deviendra vert pendant 1.5s pour confirmer que l'event a ete pousse.

dataLayer.push() pour chaque bouton 
// Ce que les boutons poussent dans le dataLayer :

// Bouton 1 - Event simple
window.dataLayer.push({
    event: "demo_click"
});

// Bouton 2 - Event avec parametres
window.dataLayer.push({
    event: "cta_click",
    event_category: "hero",
    event_label: "main_cta"
});

// Bouton 3 - Event type conversion
window.dataLayer.push({
    event: "sign_up",
    event_category: "form",
    event_label: "newsletter"
});
Configuration GTM complete 
// Configuration GTM :

// 1. Creer un trigger Custom Event
//    Type : Custom Event
//    Event name : demo_click
//    (ou utiliser une regex : demo_click|cta_click|sign_up)

// 2. Creer des variables Data Layer (pour les parametres)
//    Variable name : event_category -> DLV type
//    Variable name : event_label -> DLV type

// 3. Creer un tag GA4 Event
//    Event name : {{Event}}  (variable built-in qui contient le nom de l'event)
//    Parametres :
//      event_category = {{DLV - event_category}}
//      event_label = {{DLV - event_label}}

Quand utiliser le Custom Event ?

Pratiquement partout ! Le Custom Event est utilise pour :
- Les formulaires AJAX (HubSpot, Typeform, etc.)
- Les interactions custom (clic sur accordion, tab, modal)
- Les conversions cote serveur (achat, inscription)
- Les events de booking (Calendly, Cal.com)
- Tout ce que les triggers natifs de GTM ne couvrent pas