Declencheur : Form AJAX (Custom Event)

Ce qu'on va faire sur cette page

La plupart des formulaires modernes (React, Typeform, HubSpot, etc.) envoient les donnees en AJAX sans recharger la page. Le trigger "Form Submission" de GTM ne les detecte pas. Il faut utiliser un Custom Event.

  1. Essayer de soumettre le formulaire AJAX ci-dessous
  2. Observer que "Form Submit" n'apparait PAS dans GTM Preview
  3. Le formulaire push un Custom Event dans le dataLayer
  4. Creer un trigger "Custom Event" avec le nom de cet event

Formulaire AJAX - la soumission se fait en JavaScript, sans rechargement de page

DataLayer push + Configuration GTM 
// Ce que le formulaire AJAX pousse dans le dataLayer :
window.dataLayer.push({
    event: "form_submit_ajax",
    form_id: "demo-ajax-form",
    form_name: "Formulaire demo AJAX"
});

// Dans GTM, creer ce trigger :
// Type : Custom Event
// Event name : form_submit_ajax
//
// Puis un tag GA4 Event :
// Event name : generate_lead
// Parametres :
//   form_id = {{DLV - form_id}}
//   form_name = {{DLV - form_name}}
Exemple : ecouter les events HubSpot 
// Pour les formulaires tiers (HubSpot, Typeform, etc.),
// il faut ajouter un tag Custom HTML qui ecoute leurs events :

// Exemple HubSpot :
window.addEventListener("message", function(event) {
    if (event.data.type === "hsFormCallback" &&
        event.data.eventName === "onFormSubmitted") {
        window.dataLayer.push({
            event: "hubspot_form_submit",
            form_id: event.data.id
        });
    }
});

Regle d'or

Si le formulaire ne recharge pas la page quand on le soumet, le trigger "Form Submission" de GTM ne marchera pas. Il faut soit : (1) ajouter un listener JS custom, (2) utiliser la page de redirection "thank you page", ou (3) utiliser l'API/callback du formulaire tiers.