Comment tracker un formulaire Hubspot ?

Le tracking des soumissions de formulaires HubSpot est crucial pour analyser vos conversions. Grâce à un event listener en JavaScript, vous pouvez capturer ces événements directement et les transmettre à des outils comme Google Tag Manager ou Google Analytics. Voici comment procéder, étape par étape. Voir notre guide sur tracking server-side. Voir notre guide sur tracker formulaire Typeform ?. Voir notre guide sur tracker formulaire Webflow ?.

Le tracking des formulaires HubSpot a changé.

Si vous utilisez les nouveaux formulaires HubSpot créés avec l’éditeur mis à jour, la bonne méthode consiste à écouter les global form events de HubSpot, puis à récupérer les données du formulaire via l’objet HubSpotFormsV4. HubSpot expose notamment l’événement hs-form-event:on-submission:success, ainsi que des méthodes comme getFormId(), getFieldValue(), getFormFieldValues() et getConversionId(). Les anciens événements hsFormCallback existent toujours, mais ils concernent surtout les legacy forms. e les soumissions d’un formulaire HubSpot dans GTM

Pour suivre les soumissions d’un formulaire HubSpot avec Google Tag Manager, ajoutez une balise HTML personnalisée déclenchée sur les pages où le formulaire est présent.

Voici un exemple de listener compatible avec les nouveaux formulaires HubSpot :

<script>
window.addEventListener('hs-form-event:on-submission:success', async function(event) {
  if (!window.HubSpotFormsV4) return;

  var form = HubSpotFormsV4.getFormFromEvent(event);
  if (!form) return;

  var formId = form.getFormId();
  var conversionId = form.getConversionId();
  var eventName = 'form_submit';

  try {
    var values = await form.getFormFieldValues();
    var fields = {};

    values.forEach(function(field) {
      fields[field.name] = field.value;
    });

    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: eventName,
      form_id: formId,
      conversion_id: conversionId || undefined,
      form_data: {
        conversion_id: conversionId || undefined,
        email: fields['0-1/email'] || undefined,
        phone: fields['0-1/mobilephone'] || undefined,
        firstName: fields['0-1/firstname'] || undefined,
        lastName: fields['0-1/lastname'] || undefined,
        postalCode: fields['0-1/form_postal_code'] || undefined,
        city: fields['0-1/form_contact_city'] || undefined
      }
    });
  } catch (error) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: eventName,
      form_id: formId,
      conversion_id: conversionId || undefined
    });

    console.warn('[HubSpot GTM] fallback push:', error);
  }
});
</script>

Cette approche s’appuie sur l’événement officiel hs-form-event:on-submission:success, puis sur HubSpotFormsV4.getFormFromEvent(event) pour récupérer l’instance du formulaire. HubSpot permet ensuite de lire l’ID du formulaire, le conversionId, ou encore l’ensemble des champs via getFormFieldValues(). À noter : les champs de type fichier ne sont pas renvoyés par getFieldValue() ni getFormFieldValues(). guration dans Google Tag Manager

Une fois ce listener installé, créez dans GTM :

• un déclencheur de type Événement personnalisé basé sur les noms poussés dans la dataLayer, par exemple form_contact_submit, form_devis_submit ou form_submit ;

• des variables de couche de données comme :

  • form_id

  • conversion_id

  • form_data.email

  • form_data.phone

  • form_data.firstName

  • form_data.lastName

  • form_data.postalCode

  • form_data.city

Vous pourrez ensuite réutiliser ces données pour déclencher vos tags GA4, Google Ads, Meta, Mixpanel ou tout autre outil marketing.

Important : adapter les noms de champs

Dans l’exemple ci-dessus, les champs récupérés utilisent des noms comme :

• 0-1/email

• 0-1/mobilephone

• 0-1/firstname

• 0-1/lastname

Ces noms dépendent de la configuration réelle de votre formulaire HubSpot. Il faut donc toujours vérifier les bons identifiants de champs avant mise en production. HubSpot permet de récupérer soit un champ précis avec getFieldValue("nom_du_champ"), soit tous les champs avec getFormFieldValues(). vous utilisez encore un ancien formulaire HubSpot ?

Si votre site repose encore sur des legacy forms, vous pouvez continuer à écouter les événements historiques de type hsFormCallback. HubSpot documente notamment onBeforeFormSubmit, onFormSubmit et onFormSubmitted. Sur les legacy forms, onFormSubmit et onBeforeFormSubmit se déclenchent avant que la soumission soit réellement persistée, tandis que onFormSubmitted intervient après la soumission réussie. pour un ancien formulaire :

<script>
window.addEventListener('message', function(event) {
  if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'hubspot_form_success',
      form_id: event.data.id,
      form_data: event.data.data && event.data.data.submissionValues
        ? event.data.data.submissionValues
        : undefined
    });
  }
});
</script>

Quelle méthode utiliser aujourd’hui ?

Si vous créez un nouvel article en 2026, il faut être direct :

• nouveaux formulaires HubSpot : utilisez hs-form-event:on-submission:success + HubSpotFormsV4

• anciens formulaires HubSpot : gardez hsFormCallback uniquement si vous êtes encore sur une implémentation legacy. s pratiques

Pour éviter les erreurs de tracking :

• déclenchez vos tags marketing sur un événement de succès réel, pas sur un simple clic bouton ;

• nommez vos événements GTM de façon métier (form_contact_submit, form_devis_submit, etc.) ;

• n’envoyez pas de données personnelles brutes vers vos plateformes sans cadrage juridique et technique adapté ;

• testez chaque formulaire en mode Preview GTM avant mise en ligne.

Christophe Dubois

Consultant tracking & data, freelance senior depuis 2012. Architecture de mesure, server-side, attribution.