0️⃣ Introduction : Pourquoi tracker ses formulaires Hubspot ?1️⃣ Étape 1 : Construire et connecter son formulaire 2️⃣ Étape 2 : Ajouter notre listener (🆕 compatible avec les nouveaux formulaires HubspotFormsV4)3️⃣ Étape 3 : Créer les variables et les déclencheurs dans GTM 1 - Variables 2- Distinguer plusieurs formulaires 3 - Déclencheurs 4️⃣ Étape 4 : Créer et enrichir ses tags 1 - Création du tag 2 - Enrichissement du tag avec les données du formulaire

0️⃣ Introduction : Pourquoi tracker ses formulaires Hubspot ?

HubSpot est une plateforme tout-en-un qui centralise CRM, marketing automation, création de landing pages, et bien sûr... gestion de formulaires. C’est souvent un point d’entrée clé dans un parcours client : collecte de leads, demandes de démo, inscriptions à une newsletter, etc.
Mais une soumission de formulaire ne sert à rien si on ne sait pas quand elle a lieu, d’où elle vient, ni comment elle se transforme ensuite.
C’est là que le tracking entre en jeu. En suivant précisément les soumissions de formulaires HubSpot, on peut :
mesurer et améliorer l’efficacité de ses campagnes avec des informations utilisateurs (Google Ads, Meta, Bing , etc.)
enrichir ses données analytics avec des données provenant des champs du formulaire
Activer des conversions dans ses outils publicitaires
Dans cet article, je te montre comment je fais avec Google Tag Manager, pour une solution souple, compatible multi outils et orientée performance.

1️⃣ Étape 1 : Construire et connecter son formulaire

Bon, je ne vous apprends rien, mais un tracking sur des formulaires sans formulaire risque de vous bloquer. 🙃

Je ne vais pas vous faire un cours sur “Comment créer le plus beau des formulaires” car je suis convaincu que vous êtes bien plus talentueux que moi. En revanche, il faut s’assurer que vos champs de formulaire soient bien connectés à votre back hubspot.

Pour ce faire, une fois que vous avez créé votre formulaire dans Hubspot, vous allez vérifier à ce que chacun de vos champs soient bien connectés à une propriété.

❌

Là, je vois que mon champ n’est pas connecté. Donc soit je choisis une propriété existante ou je créer ma propre propriété puis je l’associe à mon champ.

✅

Ok, c’est good mon champ est bien connecté ! Attention très important à savoir, la valeur de internal name sera le nom de ton paramètre de champ qui remontera côté front donc ce que l’on va remonter dans GTM.

Ici, mon champ de numéro de téléphone remontera sous le nom “hs-phone” en front.

Privilégiez donc une nomenclature claire dès le départ sinon vous risquez de vous emmêler les pinceaux.

Une fois que tous vos champs sont connectés, vous pouvez publier votre formulaire et choisir l’intégration adéquate (intégration via une page Hubspot ou en iframe via un script)

2️⃣ Étape 2 : Ajouter notre listener (🆕 compatible avec les nouveaux formulaires HubspotFormsV4)

💡

Avant d’entamer cette partie, rappel sur le fonctionnement des formulaires Hubspot:

Les formulaires présents sur ton site, quelle que soit leur intégration ont besoin de communiquer avec le back d’Hubspot afin de transmettre toutes les informations de soumission.

Pour cela :

Hubspot utilise l'API Post Message pour envoyer l'information de ton site au back Hubspot lorsque le formulaire a été soumis.

Dans GTM, nous récupérons cette information via un Listener.

Voici un beau schéma pour vous illustrer tout ça

⚠️ À l’heure où j’écris cet article, Hubspot a sorti il y a quelque temps un nouvel éditeur de formulaire. Et, les informations contenues dans le postMessage sont différentes que celles de l’ancien formulaire “Legacy Form Editor” ou “V3”. Je vous propose donc d’utiliser mon listener qui est compatible aussi bien pour les anciens formulaires que pour les nouveaux.

Copiez ce code ci-dessous :

javascript
<script>
var eventName = "hubspot-form-success";
var includeFormData = true;

// Listener pour les formulaires v3
window.addEventListener("message", function(event) {
  if (event.data && event.data.type === "hsFormCallback" && 
      (event.data.eventName === "onFormSubmitted")) {
    var formData = {
      event: eventName + "-v3",
      "hs-form-guid": event.data.id
    };
    
    if (includeFormData && event.data.data && event.data.data.submissionValues) {
      for (var field in event.data.data.submissionValues) {
        if (event.data.data.submissionValues.hasOwnProperty(field)) {
          var cleanedField = field.replace(/[^\w]/g, "_");
          var key = "hs-" + cleanedField;
          formData[key] = event.data.data.submissionValues[field];
        }
      }
    }
    
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push(formData);
  }
});

// Listener pour les formulaires v4
window.addEventListener("hs-form-event:on-submission:success", function(event) {
  if (typeof HubspotFormsV4 === "undefined") return;
  
  var form = HubspotFormsV4.getFormFromEvent(event);
  if (!form) return;
  
  var formData = {
    event: eventName + "-v4",
    "hs-form-id": form.getFormId()
  };
  
  if (includeFormData) {
    form.getFormFieldValues().then(function(values) {
      if (values && values.length) {
        for (var i = 0; i < values.length; i++) {
          var field = values[i];
          var cleanedName = field.name.replace(/[^\w]/g, "_");
          var key = "hs-" + cleanedName;
          formData[key] = field.value;
        }
      }
      window.dataLayer.push(formData);
    });
  } else {
    window.dataLayer.push(formData);
  }
});
</script>

Dans GTM, créez une balise “Custom HTML” et collez le code.

Vous allez vouloir déclencher la balise sur toutes les pages.

Une fois que c’est fait, enregistrez la balise.

Maintenant, on peut tester de soumettre un formulaire :

▶️

Je constate qu’au moment de la soumission de mon formulaire, j’ai un évènement "hubspot-form-success-v4” qui a été push dans le dataLayer.

Je constate également qu’au sein du dataLayer de nouveaux paramètres sont également poussés :

javascript
dataLayer.push({
  event: "hubspot-form-success-v4",
  hs-form-id: "5726b52a-cbeb-4d56-931e-7bd74bafc52a",
  hs-0_1_firstname: "Vive",
  hs-0_1_lastname: "GTM",
  hs-0_1_email: "vive.gtm@gmail.com",
  hs-0_1_phone: "+33600000000",
  hs-0_1_type_de_demande: "Demande de devis",
  gtm.uniqueEventId: 106
})

✅ Félicitations votre listener est bien en place, il ne reste plus qu’à créer mes variables et mes déclencheurs dans GTM !

3️⃣ Étape 3 : Créer les variables et les déclencheurs dans GTM

1 - Variables

Rien de plus simple, je vais créer une variable dataLayer et je renseigne le champ que je souhaite remonter

2- Distinguer plusieurs formulaires

Si vous avez plusieurs formulaires Hubspot au sein de votre site, vous allez devoir les distinguer en utilisant l’identifiant du formulaire ou hs-form-id Voici une des techniques qui est bien évidemment non exhaustive :

Je commence par créer dans GTM la variable hs-form-id

Ensuite, je vais créer un tableau de conversion, je rentre mes ID de formulaire et j’indique en sortie les noms correspondants

3 - Déclencheurs

Maintenant que vos formulaires sont bien distincts, vous n’avez plus qu’à créer le trigger correspondant à chaque formulaire.

Dans cet exemple, je vais vouloir créer un trigger sue mon formulaire de contact qui servira à alimenter un tag Google Ads.

Je vais donc créer un trigger “Custom Event”

▶️

J’ajoute en nom d’événement l’événement qui a été poussé dans le dataLayer.

Ensuite, j’identifie de quel formulaire il s’agit grâce à mon tableau de conversion.

Et enfin, je conditionne ce déclencheur au consentement.

✅ Tout est bien paramétré, vous n’avez plus qu’à créer vos tags !

4️⃣ Étape 4 : Créer et enrichir ses tags

▶️

Dans cet article, je vais prendre pour exemple la création d’un tag Google Ads avec le paramétrage d’Enhanced Conversion. Mais bien évidemment, vous pouvez l’appliquer à n’importe quels tags. Attention cependant à bien contrôler ce que vous envoyez aux différents partenaires. Car vous jouez avec de la donnée personnelle de vos utilisateurs, à manier avec précaution et expertise donc.

1 - Création du tag

J’ajoute un nouveau tag de suivi de conversion Google Ads et je rentre ces informations :

▶️

Le Conversion ID

Le Conversion Label

Je sélectionne le déclencheur que j’ai au préalable créé

J’enregistre et mon tag est créé ! Mais il manque encore l’enrichissement de mon tag avec les données des champs du formulaire.

2 - Enrichissement du tag avec les données du formulaire

Dans mes variables, je vais aller créer une variable “User-Provided Data” ou “Données fournies par l’utilisateur”.

Je vais ensuite renseigner manuellement les informations que je peux récolter. Dans mon exemple, je souhaite simplement collecter les adresses mail et les numéros de téléphone.

Je vais alors chercher les variables dataLayer que j’ai précédemment créé

⚠️

Petit rappel :

Lorsque vous utilisez la variable User-Provided Data dans GTM, vous manipulez souvent des informations sensibles : Email, prénom, téléphone, etc.

Avant d’envoyer ces données à des partenaires publicitaires ou analytiques, assurez-vous que :

✅ L’utilisateur a donné son consentement explicite (via une CMP, par exemple)

✅ Le partenaire en question est bien déclaré dans votre politique de confidentialité

✅ Vous respectez les exigences du RGPD ou des législations locales applicables

Ce type de données est précieux pour vos campagnes, mais il mérite d’être traité avec soin.

Une fois que ma variable est créée, je peux maintenant l’ajouter à mon tag de conversion.

✅ Tout est bien paramétré, vous n’avez plus qu’à créer vos tags ! Votre tag est enfin créé ! Vous n’avez plus qu’à tester que tout fonctionne

Je simule une soumission de formulaire et je regarde dans un premier temps dans mon debug GTM

✅

Je constate que mon tag s’est bien déclenché avec les informations utilisateurs (adresse mail et numéro de téléphone). Il est toujours important cependant, de double check avec la console chrome.

J’ouvre la console chrome et je filtre sur mon hit

✅

Je constate que mon hit part bel et bien vers Google Ads avec le paramètre em qui est le paramètre contenant toutes les informations utilisateurs d’Enhanced Conversion. Et on constate également que la valeur de ce paramètre est bien haché, offrant une protection des données utilisateurs.