HubSpot - Formulaire Integre

Ce qu'on va faire sur cette page

HubSpot propose une API de callbacks pour tracker les formulaires. Contrairement aux iframes pures, HubSpot offre un event onFormSubmitted natif.

  1. Ouvrir GTM Preview
  2. Remplir et soumettre le formulaire HubSpot
  3. Observer le Custom Event dans le dataLayer
  4. Copier le listener adapte

Formulaire HubSpot embed

Formulaire HubSpot

Remplacer par le code d'embed HubSpot :
hbspt.forms.create({...})

Methode 1 : Callback onFormSubmitted 
// Methode 1 : Callback onFormSubmitted (RECOMMANDEE)
// Directement dans le code d'embed HubSpot :

hbspt.forms.create({
    region: "eu1",
    portalId: "VOTRE_PORTAL_ID",
    formId: "VOTRE_FORM_ID",
    target: "#hubspot-form-container",
    onFormSubmitted: function(form) {
        window.dataLayer.push({
            event: "hubspot_form_submit",
            form_id: form.guid || "hubspot-form",
            form_name: "Contact HubSpot"
        });
    }
});

// C'est la methode la plus propre car HubSpot appelle directement
// notre callback quand le formulaire est soumis avec succes.
Methodes alternatives 
// Methode 2 : Listener postMessage (si on ne controle pas le code embed)

<script>
  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
      });
    }
  });
</script>

// Methode 3 : HubSpot global event
// Si le script HubSpot est charge, on peut aussi ecouter :
window.addEventListener("message", function(e) {
  if (e.data && e.data.meetingBookSucceeded) {
    // Meeting scheduler HubSpot
    window.dataLayer.push({ event: "hubspot_meeting_booked" });
  }
});

HubSpot et GA4

HubSpot a sa propre integration GA4 native, mais elle a les memes limites que Calendly (tracking depuis le domaine HubSpot, pas le votre). Le listener custom via GTM donne un meilleur controle et une meilleure attribution.