Tracking des formulaires HubSpot avec Google Tag Manager (+GA4 et Google Ads)

Le suivi des conversions de vos formulaires est essentiel pour mesurer l’efficacité de vos campagnes marketing et optimiser vos parcours clients.

👉 HubSpot propose des formulaires faciles à déployer.

En effet, il est possible d’intégrer rapidement les formulaires de HubSpot au sein de son site web en copiant et collant un script ou un lien Iframe.

Exemple proposé par HubSpot pour l’intégration de formulaire

Une fois sur votre site, vous pouvez récolter les données sur les utilisateurs depuis votre CRM HubSpot.

👉 Mais si vous souhaitez exploiter pleinement vos données (notamment dans Google Analytics 4 ou pour des audiences Google Ads), je vous recommande d’utiliser Google Tag Manager pour faire remonter les soumissions de formulaire.

Cet article vous guide pas à pas pour configurer le tracking d’un formulaire HubSpot avec Google Tag Manager.

Pourquoi tracker les formulaires HubSpot avec GTM ?

HubSpot possède ses propres outils d’analyse.

Mais l’intégration avec GTM offre plusieurs avantages majeurs :

🔷 Centralisation du suivi : Gérez toutes vos balises (Google Analytics, Google Ads, Facebook Pixel, etc.) depuis une seule interface.

🔷 Données enrichies dans GA4 : Obtenez des informations détaillées sur les pages qui génèrent le plus de soumissions et sur les canaux qui apportent les prospects les plus qualifiés.

🔷 Optimisation des campagnes publicitaires : Utilisez les soumissions de formulaires comme des événements de conversion dans Google Ads pour piloter vos enchères et améliorer votre retour sur investissement (ROI).

🔷 Flexibilité et puissance : Déclenchez des actions personnalisées à chaque soumission de formulaire, bien au-delà de ce que permet l’intégration native.

Prérequis

Avant de poursuivre la lecture de ce guide, voici un prérequis pour suivre ce tutoriel :

• Un compte Google Tag Manager configuré sur votre site
• Un formulaire HubSpot intégré sur votre page
• Les accès administrateur à votre compte GTM

Dans notre tutoriel, nous allons suivre les envoies de formulaire HubSpot correspondant au téléchargement d’un guide Google Ads sur mon site web.

Tutoriel reposant sur la landing page « Guide Google Ads »

Le formulaire HubSpot est intégré sur mon site web.

👉 Nous allons tracker tous les envois de formulaires puis faire remonter les données dans GA4 et Google Ads.

Étape 1 : Créer une balise pour « écouter » les événements HubSpot

Les choses sérieuses commencent.

👉 L’idée durant cette première étape est de créer une nouvelle balise HTML personnalisée sur Google Tag Manager pour suivre toutes les soumissions d’un formulaire HubSpot sur votre site internet.

On appelle cela un « Listener » en anglais.

Lorsque qu’un utilisateur soumet avec succès un formulaire HubSpot, le script de HubSpot envoie un événement dans la couche de données (Data Layer) de votre site.

Cet événement en question s’appelle hubspot-form-success.

Alors comment intégrer ce « Listener » de suivi HubSpot dans Google Tag Manager :

1. Tout d’abord, rendez-vous dans la section « Balise » de Google Tag Manager. Puis cliquez sur « Nouvelle » dans l’interface pour créer une nouvelle balise.
2. Une fenêtre s’ouvre. Cliquez sur « Configuration de la balise »
3. Ensuite sélectionnez le type de balise « HTML personnalisé »
   
   
4. Une nouvelle interface s’affiche.
   Commencez à configurer votre balise en lui donnant un nom.
   Par exemple : SCRIPT – HubSpot Form Listener
5. Ensuite copiez et collez le code suivant dans votre nouvelle balise sur Google Tag Manager :

<script type="text/javascript">
window.addEventListener("message", function(event) {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
window.dataLayer.push({
'event': 'hubspot-form-data',
'hs-form-guid': event.data.id,
'hs-formData': event.data.data
});
}
});
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
});
}
});
</script>

6. Ajoutez comme déclencheur « Toute les pages »
Dans mon cas, j’ai sélectionné toutes les pages, mais vous pouvez également sélectionner des pages spécifiques où se trouvent vos formulaires HubSpot.

7. Cliquez sur « Enregistrer » pour terminer la configuration

Par la suite, notre travail dans GTM va consister à :

1. Écouter cet événement spécifique hubspot-form-success.
2. Capturer des informations utiles comme l’ID unique du formulaire.
3. Déclencher une balise (par exemple, un événement Google Analytics 4) lorsque cet événement est détecté.

Explication des deux événements distincts dans le code fourni

1. onFormSubmit se déclenche avant que HubSpot n’envoie vraiment les données : il nous permet de récupérer tout le contenu du formulaire (event.data.data) et de le pousser dans le dataLayer sous l’événement hubspot-form-data.

2. onFormSubmitted se déclenche après que la soumission soit validée côté HubSpot : il ne renvoie que la réussite de l’envoi, sous l’événement hubspot-form-success.

Étape 2 : Créer la variable pour l’ID du formulaire HubSpot (en option)

Pour pouvoir identifier quel formulaire a été soumis (si vous en avez plusieurs), nous allons créer une variable qui capture son ID.

Cette étape est optionnelle.

👉 Suivez les instructions suivantes pour créer une nouvelle variable :

1. Dans Google Tag Manager, allez dans la section « Variables« .
2. Dans « Variables définies par l’utilisateur », cliquez sur « Nouvelle« .
   
3. Cliquez sur « Configuration de la variable » et choisissez « Variable de couche de données« .
   
4. Nommez votre variable, par exemple : DLV – HubSpot Form ID.
5. Dans le champ « Nom de la variable de couche de données », entrez exactement : hs-form-guid
6. Laissez les autres options par défaut et cliquez sur « Enregistrer ».

Étape 3 : Créer un nouveau déclencheur

Le déclencheur va indiquer à Google Tag Manager quand envoyer les données.

Il va s’activer dès qu’il détecte notre « fameux événement ».

👉 Suivez les instructions suivantes pour créer un nouveau déclencheur :

1. Allez dans la section « Déclencheurs » et cliquez sur « Nouveau« .
2. Nommez votre déclencheur, par exemple : CE – HubSpot Form Success. (CE pour « Custom Event »)
   Ici je l’ai appelé HS Form Submission + checklist
3. Cliquez sur « Configuration du déclencheur » et choisissez « Événement personnalisé« .
4. Dans le champ « Nom de l’événement« , entrez exactement : hubspot-form-success
5. Laissez l’option « Tous les événements personnalisés » cochée pour l’instant.
   Cela signifie que le déclencheur s’activera pour tous les formulaires HubSpot.
   
6. Enregistrez le déclencheur pour terminer cette étape.

Pour aller plus loin

Si vous souhaitez ne suivre qu’un formulaire spécifique, sélectionnez « Certains événements personnalisés ».

Ensuite configurez la condition : DLV – HubSpot Form ID – contient – [collez ici l’ID de votre formulaire].

Dans mon exemple, j’ai renseigné l’ID de mon formulaire pour déclencher cet événement uniquement lorsque l’envoie du formulaire de mon lead magnet Guide a été réalisé.

Étape 4 : Créer une balise GA4

Maintenant que notre déclencheur est prêt à écouter, nous devons créer la balise qui enverra les informations à Google Analytics 4 chaque fois qu’un formulaire est soumis.

Créer la balise GA4

👉 Suivez les instructions suivantes pour créer un nouvelle balise GA4 :

1. Rendez-vous dans la section « Balises » de votre interface Google Tag Manager et cliquez sur « Nouvelle ».
2. Nommez votre balise de manière descriptive.
   Par exemple : GA4 - Event - Soumission Formulaire Checklist.
3. Cliquez sur la section « Configuration de la balise » et sélectionnez « Google Analytics : Événement GA4 » dans la liste.
4. Configurez les détails de l’événement :
   • Balise de configuration : Sélectionnez votre balise de configuration GA4 existante.
   • Nom de l’événement : C’est le nom qui apparaîtra dans vos rapports Google Analytics. Choisissez un nom clair et en minuscules, comme generate_lead.
Dans mon exemple, il s’appelle : Checklist_GoogleAds.

Paramètres de l’événement

C’est ici que nous ajoutons du contexte à notre événement.

Cliquez sur « Ajouter une ligne » pour chaque paramètre :

• Ligne 1 :
  • Nom du paramètre : hs_form_id
  • Valeur : Cliquez sur l’icône « brique » 🧱 et sélectionnez votre variable {{DLV - HubSpot Form ID}}. Cela permettra d’identifier quel formulaire a été soumis.
• Ligne 2 :
  • Nom du paramètre : page_path
  • Valeur : Cliquez sur l’icône « brique » 🧱 et sélectionnez la variable intégrée {{Page Path}}. Cela vous indiquera sur quelle page la soumission a eu lieu.

Associer le déclencheur

• • Cliquez sur la section « Déclenchement » juste en dessous.
  • Sélectionnez le déclencheur que vous avez créé à l’étape précédente
    Dans votre cas, HS Form Submission + checklist

Enregistrer votre balise

Notre configuration est maintenant terminée !

Étape 5 : Créer une balise Google Ads

En plus d’envoyer un événement à Google Analytics 4 pour l’analyse, il est aussi important d’envoyer un signal de conversion directement à Google Ads.

Cela permet à la plateforme d’optimiser vos campagnes, de mesurer le Coût Par Acquisition (CPA) et le Retour sur Investissement Publicitaire (ROAS).

👉 Suivez les instructions suivantes pour créer un nouvelle balise GA4 :

1. Dans votre espace GTM, retournez dans la section « Balises » et cliquez sur « Nouveau ».
2. Nommez votre balise de manière explicite.
   Par exemple : GAds - Conversion - Checklist.
3. Cliquez sur « Configuration de la balise » et choisissez le type de balise « Suivi des conversions Google Ads ».
4. Renseignez les informations de conversion que vous venez de récupérer :
   • ID de conversion : Collez l’ID de conversion fourni par Google Ads.
   • Libellé de conversion : Collez le Libellé de conversion.
   • Vous pouvez laisser les autres champs (valeur, devise, etc.) vides si vous n’avez pas besoin de leur suivi pour cette conversion spécifique.
5. Définissez le déclenchement :
   • Cliquez sur la section « Déclenchement » en bas de la page.
   • Sélectionnez le même déclencheur que celui utilisé pour votre balise GA4, car l’action de conversion est la même.
     Dans mon cas, il s’agit de HS Form Submission + checklist.
6. Enregistrez la balise.

Résultat de cette opération ?

Désormais, lorsqu’un utilisateur soumettra le formulaire de la checklist, deux balises se déclencheront simultanément :

• Une vers Google Analytics 4 pour vos analyses d’audience et de comportement.
• Une vers Google Ads pour mesurer directement la performance de vos campagnes publicitaires.

Étape 6 : Prévisualisation et validation des balises dans GTM

C’est l’étape de contrôle qualité.

Avant de publier vos modifications et d’impacter votre site en production, vous devez vous assurer que tout fonctionne exactement comme prévu.

Le mode « Prévisualisation » de GTM est votre meilleur allié pour cela.

6.1 Lancer le Mode Prévisualisation

• Si vous n’êtes plus en mode prévisualisation, cliquez sur le bouton « Prévisualiser » en haut à droite de votre espace de travail GTM.
• Entrez l’URL exacte de la page où se trouve votre formulaire HubSpot à tester.
• Cliquez sur « Connect ». Une nouvelle fenêtre de navigateur s’ouvrira sur votre site, avec un badge « Tag Assistant Connected » en bas à droite. Votre onglet GTM original affichera maintenant le panneau de débogage.

6.2 Effectuer le Test de Soumission

• Allez dans la fenêtre de votre site web (celle ouverte par GTM).
• Remplissez le formulaire « Checklist » avec des informations de test.
• Cliquez sur le bouton pour soumettre le formulaire.

6.3 Analyser les Résultats dans le Débogueur GTM

Retournez à la fenêtre du débogueur GTM (tagassistant.google.com). C’est ici que la magie opère.

• Dans la colonne de gauche (« Summary »), cherchez et cliquez sur l’événement hubspot-form-success.
  Votre déclencheur a bien été activé.
• Vérifiez les balises déclenchées
  Une fois que vous avez cliqué sur hubspot-form-success, regardez la section principale. Sous le titre « Balises », vous devez impérativement voir vos deux balises :✅ GA4 – HubSpot Form Event – Checklist
  ✅ GADS – Checklist Google Ads

👉 Si elles sont bien là, cela signifie que votre déclencheur a correctement activé vos deux balises.

C’est le principal point de validation du bon fonctionnement du déclenchement des balises.

6.4 Vérifier les données envoyées

Cliquez sur l’onglet « Variables » dans le panneau de débogage (avec hubspot-form-success toujours sélectionné).

👉 Cherchez votre variable DLV – HubSpot Form ID et vérifiez qu’elle contient bien l’ID alphanumérique de votre formulaire.

6.4 Vérifier dans Google Analytics 4 (Optionnel mais recommandé)

Pour être sur à 100%, vous pouvez voir l’événement arriver en temps réel dans GA4 :

1. Dans un autre onglet, ouvrez votre propriété Google Analytics 4.
2. Allez dans Administration > Affichage de débogage (DebugView).
3. Vous devriez voir une colonne d’événements arriver. Cherchez le nom de votre événement (Checklist_GoogleAds dans cet exemple).
   Si vous le voyez, vous pouvez cliquer dessus pour voir les paramètres que GA4 a reçus.

Étape 7 : Publier vos modifications pour mettre le suivi en production

Toutes nos balises sont configurées, le déclencheur est prêt et les tests sont concluants.

👉 Il est temps de déployer ces changements pour que le suivi soit actif pour tous les visiteurs de votre site.

Cette étape consiste à publier une nouvelle version de votre « conteneur » GTM.

Pourquoi est-ce important de bien documenter ?

Chaque fois que vous publiez, vous créez un point de sauvegarde.

Nommer et décrire précisément vos versions est une pratique essentielle.

👉 Cela vous permet, ainsi qu’à vos collaborateurs, de savoir exactement quelles modifications ont été apportées et quand.

En cas de problème, vous pourrez facilement revenir à une version précédente.

Le processus de publication

1. Dans l’interface principale de votre espace de travail Google Tag Manager, cliquez sur le bouton bleu « Envoyer » situé en haut à droite de l’écran.
2. Un panneau « Envoyer les modifications » va s’ouvrir. Remplissez les champs avec soin :
   • Nom de la version : Donnez un titre court et explicite. Par exemple :Ajout Suivi Formulaire Checklist (GA4 + GAds)
   • Description de la version : C’est ici que vous détaillez le travail effectué. Soyez précis. Plus il y a de détails, plus ce sera facile à relire plus tard.
     Par exemple : Objectif : Mettre en place le suivi de conversion pour le formulaire « Checklist » de HubSpot.Modifications apportées :
     • Variable : Création de DLV - HubSpot Form ID pour capturer l’ID du formulaire.
     • Déclencheur : Création de HS Form Submission + checklist qui écoute l’événement hubspot-form-success.
     • Balise GA4 : Ajout de la balise GA4 - Event - Checklist GoogleAds pour l’analyse.
     • Balise Google Ads : Ajout de la balise de conversion GADS - Checklist Google Ads pour le suivi des performances publicitaires.
3. Une fois que tout est bien documenté, cliquez sur le bouton « Publier » en haut à droite du panneau.

GTM va alors enregistrer et déployer instantanément cette nouvelle version sur votre site.

Bonnes pratiques

4 conseils avant de conclure cet article :

✅ Nommer clairement vos événements et variables pour faciliter la gestion de vos tags dans GTM.

✅ Documenter dans un Google Sheet vos balises et déclencheurs (très utile si d’autres personnes interviennent sur le tracking)

✅ Segmenter bien les événements « Prioritaires » (demande devis, contact) créés dans GA4 ou Google Ads des événements secondaires  (newsletter, ebook).

✅ Dès que vous faites des mises à jours, faites un check que les balises fonctionnent correctement avec la « prévisualisation » sur Google Tag Manager

Conclusion

Félicitations !

Votre système de suivi de conversions avancé pour le formulaire HubSpot est maintenant actif.

👉 Les données commenceront à être collectées immédiatement dans Google Analytics 4 et les conversions seront attribuées dans vos campagnes Google Ads, vous offrant une vision précise et exploitable de vos performances.

Merci d’avoir lu jusqu’au au bout.

Si vous avez des questions, merci de les poser dans l’espace commentaire.

Sur ce, à bientôt.