Guide gratuit

Tracker les formulaires Hubspot avec Google Tag Manager + suivi avancé des conversions Google Ads

Suivre les soumissions de formulaires HubSpot est essentiel pour mesurer vos conversions, optimiser vos campagnes marketing et améliorer votre retour sur investissement.

11 min de lecture
8 chapitres
Aucun email demandé

HubSpot propose un système de formulaire puissant et heureusement, il est tout à fait possible de suivre les formulaires HubSpot avec Google Tag Manager et d’activer le suivi avancé des conversions Google Ads récupérant les données client transmises dans le formulaire HubSpot. Ce tutoriel vous guidera pas à pas dans la mise en place d’un suivi fiable et conforme au RGPD.

✅ À la fin de ce guide, vous serez en mesure de :

Capturer les soumissions de formulaires HubSpot dans le Data Layer de Google Tag Manager
Créer des déclencheurs personnalisés dans GTM
Configurer les conversions améliorées Google Ads manuellement

Comprendre le fonctionnement des formulaires HubSpot

Formulaires natifs vs formulaires intégrés

HubSpot permet d’intégrer les formulaires de contact/leads à vos pages de deux façons principales :

Intégration par script JavaScript (méthode recommandée) : le formulaire s’affiche dynamiquement dans la page via un code <script>. Cette méthode permet de suivre les événements de soumission dans Google Tag Manager.
Intégration par iframe : le formulaire est isolé dans une balise <iframe>. Dans ce cas, aucun événement JavaScript ne peut être capté depuis votre site. Le tracking via GTM est alors impossible sans solutions serveur/API complexes.

⚠️ Important : Le suivi des soumissions via GTM ne fonctionne que si vous utilisez l’intégration par script. Si vous intégrez un formulaire HubSpot via iframe, passez par une méthode alternative (formulaire tiers ou webhook).

Les événements `hsFormCallback` : ce que HubSpot envoie

Lorsqu’un formulaire HubSpot est affiché sur une page, le script de HubSpot envoie des événements de type hsFormCallback via window.postMessage. Deux événements principaux nous intéressent :

onFormSubmit : déclenché juste avant que le formulaire ne soit envoyé. Il contient les données saisies dans les champs.
onFormSubmitted : déclenché une fois la soumission réussie. Il indique que le formulaire a bien été envoyé.

💡 Ces événements sont capturables via un script d’écoute JavaScript, que nous allons insérer dans une balise HTML personnalisée dans Google Tag Manager.

Mettre en place le tracking dans Google Tag Manager

Créer une balise HTML personnalisée

Pour capter les soumissions de formulaires HubSpot intégrés par script, nous allons créer une balise HTML personnalisée dans Google Tag Manager contenant un écouteur d’événements.

Voici le code à insérer :

<script type="text/javascript">
  //Hubspot form listener Loic CHOSSIERE
  window.addEventListener("message", function(event) {
    if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
        window.dataLayer.push({
          'event': 'hubspot-form-success',
          'hs-form-guid': event.data.id,
          'event-data' : event.data
        });
    }
  });
</script>

🧩 Ce script écoute les messages `hsFormCallback` envoyés par HubSpot et les injecte dans la dataLayer de Google Tag Manager sous l’événement hubspot_form_success qui s’envoi après soumission réussie (confirmation de conversion)

Seule chose à faire : créez une balise dans GTM pour intégrer le script ci-dessus :

Allez dans l’onglet Balises de GTM
Cliquez sur Nouvelle balise
Type de balise : HTML personnalisé
Collez le code ci-dessus dans le champ HTML
Déclencheur : Consent Initialization – All Pages (ou seulement les pages contenant un formulaire HubSpot). En le déclenchant sur l’événement natif de GTM d’initialisation de consentement, vous garantissez que les événements seront envoyés le plus rapidement possibles à GTM si jamais l’utilisateur remplissait le formulaire avant le chargement complet de la page.

💡 Astuce : Pour limiter le déclenchement à certaines pages, créez un déclencheur de type “Consent Initialization” avec condition : Page URL contient /contact (ou autre selon votre structure).

2.2. Créer un déclencheur personnalisé basé sur les événements

Maintenant que le suivi des formulaires HubSpot est injecté dans le dataLayer, vous pouvez les utiliser pour déclencher des balises comme GA4, Google Ads, Facebook Pixel, Matomo…

Voici comment créer un déclencheur pour un événement de conversion souhaité :

Allez dans l’onglet Déclencheurs de GTM
Cliquez sur Nouveau
Type de déclencheur : Événement personnalisé
Nom de l’événement : hubspot-form-success
Laissez les autres options par défaut
Enregistrez le déclencheur

✅ Vous pouvez maintenant utiliser ce déclencheur pour activer vos balises de conversion dans GTM (Google Ads, Facebook, LinkedIn, etc.).

Vérification des données et configuration des variables GTM

Vérifier les événements dans le mode Aperçu de Google Tag Manager

Avant de configurer les conversions améliorées, nous devons nous assurer que les données du formulaire apparaissent bien dans le DataLayer lorsque le formulaire est soumis.

Voici comment procéder :

Ouvrez Google Tag Manager et cliquez sur Prévisualiser
Rendez-vous sur une page contenant un formulaire HubSpot (intégré par script)
Soumettez un test avec des données fictives
Dans l’onglet de prévisualisation de GTM ouvert dans votre navigateur, repérez l’événement hubspot-form-success dans la colonne de gauche
Cliquez dessus puis ouvrez l’onglet DataLayer

Vous devriez voir une structure contenant l’ID du formulaire, et parfois un objet data avec les valeurs des champs du type :

{
  event: "hubspot-form-success",
  data: {
  submissionValues: {
       firstname: "Alice",
       lastname: "Durand",
       email: "alice@example.com",
       phone: "+33600000000"
     }
  }
}

💡 Si vous ne voyez pas les données du formulaire, assurez-vous que vous avez bien inclus l’événement onFormSubmit dans la balise HTML personnalisée.

Créer des variables GTM pour récupérer les données du formulaire

Pour alimenter le suivi avancé des conversions Google Ads via les données client des formulaires HubSpot, nous allons devoir créer des variables GTM qui extraient les valeurs des champs du formulaire (email, prénom, nom, téléphone, etc.).

Voici comment créer la variable pour l’email :

Dans GTM, allez dans l’onglet Variables
Cliquez sur Nouvelle variable
Type de variable : Variable de couche de données (Data Layer Variable)
Nom de la variable : DLV – Hubspot Email
Nom de la clé : event-data.data.submissionValues.email
Enregistrez

Répétez la procédure pour les autres champs utiles :

Prénom : event-data.data.submissionValues.firstname
Nom : event-data.data.submissionValues.lastname
Téléphone : event-data.data.submissionValues.phone
Si vous avez un champ custom utilisez l’identifiant du champ entré dans vos formulaires HubSpot, par exemple “campus” : event-data.data.submissionValues.campus

✅ Vos variables sont maintenant prêtes à être utilisées dans les balises Google Ads pour envoyer des conversions améliorées (enhanced conversions).

💡 Astuce : Si les données ne sont pas disponibles sous event-data, testez avec hs-data.data.submissionValues.email à la place. Cela dépend de la version du script HubSpot utilisée, si vous utilisez celle ci-dessus, ce sera event-data.

Configurer le suivi avancé des conversions Google Ads pour les formulaires HubSpot via GTM

Créer une balise Google Ads avec les données utilisateur

Maintenant que vous avez créé les variables nécessaires dans Google Tag Manager, vous pouvez les utiliser pour activer les conversions améliorées dans votre balise Google Ads.

Voici les étapes à suivre :

Dans GTM, cliquez sur Balises > Nouvelle
Type de balise : Conversion Google Ads
Entrez votre ID de conversion (XXXXXXX) sans le AW- et le label de conversion
Cochez Inclure les données fournies par l’utilisateur depuis votre site Web

Choisissez Configuration manuelle
Dans la section “Sélectionner les données utilisateur”, cliquez sur Nouvelle variable
Cela va vous permettre de créer une nouvelle variable de type Données fournies par l’utilisateur
Mapper les champs de cette variable que vous souhaitez transmettre à Google Ads, par exemple la variable DLV – Hubspot Email pour mapper l’email.

Enregistrez la variable et utilisez là dans la balise de conversion.

Déclencheur de la balise : utilisez le déclencheur hubspot-form-success
Enregistrez la balise

✅ Vous venez de configurer une balise Google Ads qui envoie les données utilisateur et les hashera automatiquement pour enrichir vos conversions et améliorer le taux d’attribution.

Activer les conversions améliorées dans Google Ads

Pour que Google accepte les données envoyées, vous devez également activer l’option côté interface Google Ads :

Connectez-vous à votre compte Google Ads
Allez dans Outils et paramètres > Conversions
Modifiez la conversion concernée
Cochez Activer les conversions améliorées
Sélectionnez Google Tag Manager comme méthode de configuration
Enregistrez

💡 Astuce : Google recommande d’inclure au moins une adresse e-mail ou un numéro de téléphone pour améliorer la correspondance utilisateur.

Vous pouvez vérifier que le suivi avancé des conversions fonctionne dans l’interface Google Ads au même endroit, onglet “Diagnostic” :

Envoi des données client : hashage ou non ?

Pour configurer correctement les conversions améliorées Google Ads, vous devez transmettre des données utilisateur (comme l’email ou le téléphone). Depuis fin 2024, deux méthodes sont désormais acceptées :

Données non hachées : vous envoyez les données brutes (ex. : alice@example.com), et Google se charge du hashage SHA256. C’est la technique réalisée via le guide ci-dessus.
Données déjà normalisées et hachées : vous préparez les données en suivant les normes attendues, puis vous appliquez vous-même le hashage SHA256. C’est la technique recommandée lorsque votre DPO souhaite être peinard et vous embête avec ce sujet afin de garantir que Google ne voit à aucun moment la donnée brute. Mais n’oubliez pas, Google garantie qu’il hashe la donnée avant de la collecter !

https://support.google.com/sa360/answer/14218731

Normalisation avant hashage

Avant d’appliquer le hash, Google demande que vous ayez normalisé les données :

Convertir en minuscules
␣ Supprimer les espaces en début/fin
Formater les numéros de téléphone au format E.164 (ex. : +33612345678)

Hashage attendu (optionnel si données brutes)

Si vous souhaitez envoyer les données déjà hachées :

Utilisez l’algorithme SHA256
Format de sortie : chaîne hexadécimale (ex. : a8af8341...)
Ne jamais envoyer de données vides ou incorrectement formatées

Champs autorisés pour les conversions améliorées

Au moins l’un des éléments suivants est requis :

📧 Email (le plus recommandé)
🏠 Adresse complète : prénom, nom, code postal et pays obligatoires
📱 Numéro de téléphone : uniquement si couplé à un email ou à une adresse complète

Vous pouvez transmettre plusieurs valeurs pour augmenter le taux de correspondance (jusqu’à 3 emails ou téléphones, 2 adresses complètes).

6. Comment hasher les données client avec SHA-256 dans Google Tag Manager

🎯 Dans certains cas, vous pouvez préférer hasher vous-même les données utilisateur (email, téléphone, etc.) avant de les envoyer à Google Ads, notamment pour garantir une conformité stricte avec le RGPD et éviter toute collecte brute de données personnelles.

📌 Google accepte désormais les deux méthodes : envoi brut (puis hash côté serveur) ou envoi déjà hashé côté client. Voici comment mettre en place le hashage côté client via Google Tag Manager.

6.1. Pourquoi hasher côté client ?

✅ Vous maîtrisez le traitement des données avant qu’elles ne sortent du navigateur
✅ Compatible avec toutes les plateformes (Google Ads, Facebook CAPI, etc.)
❌ Ne jamais envoyer de données hachées vers Google Analytics : cela enfreint les conditions d’utilisation

Hasher une variable GTM avec SHA-256

Dans Google Tag Manager, créez une nouvelle variable personnalisée :

Type de variable : JavaScript personnalisé
Nom suggéré : JS – SHA256 Email ou JS – SHA256 Phone
Collez le script suivant, en remplaçant {{value}} par la variable GTM correspondante (ex. : {{DLV – Hubspot Email}})

function() {
  return sha256({{DLV – Hubspot Email}}); // Remplacez par votre variable GTM

  function sha256(r){if(r){r=r.toString();for(var $,_,o=Math.pow,f=o(2,32),t="length",a="",n=[],h=8*r[t],i=sha256.h=sha256.h||[],c=sha256.k=sha256.k||[],e=c[t],s={},u=2;e<64;u++)if(!s[u]){for($=0;$<313;$+=u)s[$]=u;i[e]=o(u,.5)*f|0,c[e++]=o(u,1/3)*f|0}for(r+="\x80";r[t]%64-56;)r+="\0";for($=0;$<r[t];$++){if((_=r.charCodeAt($))>>8)return;n[$>>2]|=_<<(3-$)%4*8}for(_=0,n[n[t]]=h/f|0,n[n[t]]=h;_<n[t];){var v=n.slice(_,_+=16),g=i;for($=0,i=i.slice(0,8);$<64;$++){var l=v[$-15],k=v[$-2],x=i[0],S=i[4],d=i[7]+(A(S,6)^A(S,11)^A(S,25))+(S&i[5]^~S&i[6])+c[$]+(v[$]=$<16?v[$]:v[$-16]+(A(l,7)^A(l,18)^l>>>3)+v[$-7]+(A(k,17)^A(k,19)^k>>>10)|0),p=(A(x,2)^A(x,13)^A(x,22))+(x&i[1]^x&i[2]^i[1]&i[2]);(i=[d+p|0].concat(i))[4]=i[4]+d|0}for($=0;$<8;$++)i[$]=i[$]+g[$]|0}for($=0;$<8;$++)for(_=3;_+1;_--){var w=i[$]>>8*_&255;a+=(w<16?0:"")+w.toString(16)}return a}function A(r,$){return r>>>$|r<<32-$}}
}

6.3. Utiliser cette variable dans vos balises

Une fois la variable créée, vous pouvez l’injecter dans votre balise Google Ads de type “Données utilisateur”

⚠️ Assurez-vous que les données soient préalablement normalisées (minuscules, sans espaces, format international) avant le hash, sinon le taux de correspondance sera réduit.

💡 Pour hasher plusieurs valeurs (ex. : deux adresses email), créez plusieurs variables hashées et envoyez-les sous forme de tableau.

FAQ – Suivi des formulaires HubSpot avec Google Tag Manager

Pourquoi est-il important de suivre les soumissions de formulaires HubSpot ?

Le suivi des formulaires permet d’analyser précisément vos conversions, de mesurer la performance de vos pages, et d’améliorer vos campagnes marketing. Sans ce suivi, vous perdez une information essentielle sur vos prospects.

Quel code JavaScript utiliser pour écouter les événements de soumission des formulaires HubSpot ?

Le code utilise window.addEventListener("message") pour capter les événements hsFormCallback, en particulier onFormSubmit et onFormSubmitted. Ces événements sont ensuite envoyés dans la dataLayer de Google Tag Manager pour traitement.

Comment créer un déclencheur personnalisé dans Google Tag Manager pour les formulaires HubSpot ?

Dans GTM, créez un déclencheur de type “Événement personnalisé”, nommez-le hubspot_form_success, et associez-le à vos balises de conversion (Google Ads, Meta, etc.). Ce déclencheur s’active uniquement lors d’une soumission réussie du formulaire.

Comment accéder aux données des champs de formulaire dans Google Tag Manager ?

Créez des variables GTM de type “Variable DataLayer” avec les chemins comme event-data.data.submissionValues. Ces champs sont disponibles dans l’événement data, déclenché avant la validation du formulaire.

Peut-on activer les conversions améliorées Google Ads avec HubSpot Free / Marketing Hub Pro et supérieure ?

Oui, en exposant les champs nécessaires dans le DataLayer et en les liant dans GTM à une balise de conversion Google Ads configurée en mode manuel. Cela permet de profiter des conversions améliorées quelle que soit votre version d’HubSpot Marketing.

Quels outils marketing peut-on déclencher après une soumission ?

Vous pouvez déclencher des balises pour Google Ads, Facebook Pixel, LinkedIn Insight Tag, Matomo, Piwik Pro, ou tout autre outil compatible avec Google Tag Manager, dès qu’un formulaire est soumis.

Quelles précautions prendre pour rester conforme au RGPD ?

Assurez-vous que le consentement est recueilli via un bandeau cookies (CMP), et ne déclenchez vos balises qu’après validation explicite. N’envoyez jamais d’adresses e-mail ou de données personnelles non hachées vers Google Analytics ou d’autres outils non adaptés.