Tracking HubSpot : GA4, GTM et formulaires HubSpot dans un dataLayer propre

Pour tracker un site HubSpot CMS dans GA4, on insère le conteneur GTM dans les réglages du site, puis on pousse un événement generate_lead dans le dataLayer à chaque soumission de formulaire. Le tracking natif de HubSpot sert au CRM : il ne remplace pas GA4 et ne crée pas seul un événement de conversion exploitable dans vos rapports. La configuration se fait en quatre points, décrits ci-dessous, et chacun a un piège connu.

Si vous voulez qu’un consultant HubSpot analytics reprenne ce cadrage sur votre portail, la mission commence par un audit de l’existant.

Ce que HubSpot mesure déjà, et ce qu’il ne mesure pas pour GA4

HubSpot charge son propre tracking code sur les pages du site. Un cookie, hubspotutk, relie le visiteur anonyme à un contact dès qu’il est identifié (soumission de formulaire, clic sur un email). Ces données alimentent les rapports et les workflows HubSpot.

Trois conséquences pratiques :

• Les pages vues et les sources HubSpot ne sont pas des hits GA4. Un écart de volume entre les deux outils est normal.
• L’identifiant du CRM (le contact) et l’identifiant GA4 (client_id) sont différents. La réconciliation se fait au niveau du lead, pas du visiteur.
• Garder les deux. GA4 pour le pilotage marketing (canaux, parcours, audiences, export BigQuery), HubSpot pour le cycle de vie du contact.

Insérer GTM dans un HubSpot CMS

Le plus simple est d’ajouter le snippet <head> de GTM dans le Header HTML du site et le snippet <body> dans le Footer HTML, via les réglages du site. Cela évite de toucher à chaque template.

Emplacement	Contenu	Piège courant
Header HTML	Script GTM (<head>)	Coller le script dans un module de page : il ne s’exécute que sur cette page
Footer HTML	Noscript GTM (<body>)	Oublier le noscript, sans impact visible mais sans ce bloc les lecteurs sans JS sont invisibles
Templates	Rien de GTM	Dupliquer le conteneur quand un template contient déjà un snippet

Vérifiez en mode aperçu GTM que le conteneur se charge sur une page de landing, sur un article de blog et sur une page de remerciement.

Formulaires HubSpot : déclencher generate_lead

Un formulaire HubSpot embarqué via le script officiel js.hsforms.net/forms/embed/v2.js expose des callbacks dans hbspt.forms.create. Le callback onFormSubmitted s’exécute après la soumission. C’est le point d’accroche pour le dataLayer :

<script>
  window.dataLayer = window.dataLayer || [];

  hbspt.forms.create({
    portalId: "VOTRE_PORTAL_ID",
    formId: "VOTRE_FORM_ID",
    target: "#form-contact",
    onFormSubmitted: function () {
      window.dataLayer.push({
        event: "generate_lead",
        form_id: "contact-hubspot",
        form_location: window.location.pathname
      });
    }
  });
</script>

Dans GTM, un déclencheur sur l’événement personnalisé generate_lead alimente un événement GA4 du même nom, marqué comme conversion dans GA4. Le paramètre form_id permet de distinguer les formulaires dans les rapports.

Les pièges à vérifier, formulaire par formulaire :

• Formulaire dans une iframe ou un builder tiers. Les callbacks du frame parent ne se déclenchent pas toujours. Dans ce cas, il faut écouter les messages émis par le formulaire HubSpot (événements globaux de formulaire), et non le seul callback de l’embed.
• Formulaire HTML maison. Un <form> écrit à la main, envoyé vers l’API HubSpot, ne produit aucun événement HubSpot. Il faut pousser le dataLayer dans votre propre handler de soumission, ou passer par l’API Forms de manière explicite.
• Redirection immédiate. Si le formulaire redirige vers une page de remerciement, le push doit précéder la redirection. La doc HubSpot recommande onFormSubmitted pour les redirections personnalisées, plutôt que les callbacks antérieurs à l’envoi.
• Double comptage. Ne déclenchez pas generate_lead à la fois sur le callback et sur la page de remerciement. Choisissez un seul point de déclenchement et documentez-le.
• Plusieurs formulaires sur une page. Sans form_id distinct, toutes les soumissions se confondent dans GA4.

Passer UTM et gclid dans les formulaires HubSpot

Pour que chaque contact HubSpot garde sa source d’acquisition, on transmet les paramètres au formulaire via des champs cachés (hidden fields). La valeur est lue au chargement de la page, depuis l’URL ou depuis un cookie posé par GTM au premier hit.

Étapes :

1. Capturer utm_source, utm_medium, utm_campaign et gclid au premier passage, avec un cookie d’environ 90 jours.
2. Créer les propriétés de contact correspondantes dans HubSpot (une par paramètre). Sans propriété dédiée, la valeur ne persiste pas sur le contact.
3. Renseigner les champs cachés du formulaire avec ces valeurs avant l’envoi.
4. Tester sur chaque formulaire embarqué, y compris ceux des pop-ups et des chatbots.

Attention à l’attribution : HubSpot et GA4 n’utilisent pas le même modèle. Comparer les deux sans l’aligner conduit à des conclusions contradictoires. Le gclid sert surtout à remonter les conversions vers Google Ads, sujet traité dans l’article sur les conversions offline.

Conversions offline depuis le CRM

Une soumission de formulaire n’est pas toujours une bonne conversion : elle ne dit rien de la qualité du lead. Les étapes du cycle de vie HubSpot (lead qualifié, opportunité, client) sont souvent plus utiles pour piloter les campagnes. HubSpot propose une synchronisation native vers Google Ads ; Meta et LinkedIn demandent généralement un connecteur ou un script. Le principe reste le même : envoyer l’événement de qualification, avec l’identifiant de clic quand il existe. Pour le détail des règles de matching et des délais, voir l’article sur les conversions offline Meta et Google Ads et l’article sur les conversions améliorées.

Bannière cookies et Consent Mode v2

HubSpot propose une bannière de consentement intégrée. Avant de la garder, vérifiez qu’elle transmet bien les signaux de consentement à GTM. Si vous utilisez Consent Mode v2 pour que GA4 et Google Ads continuent à mesurer en mode dégradé, la bannière doit alimenter ces signaux.

Si ce n’est pas le cas, une CMP externe, configurée en amont du conteneur GTM, est plus fiable. Le fonctionnement est détaillé dans le guide pratique Consent Mode v2 et dans la définition du Consent Mode.

Recette avant mise en production

Une recette courte, à faire sur chaque formulaire :

• Soumettre un formulaire de test depuis une landing page, puis depuis une page article.
• Vérifier generate_lead dans GA4 (DebugView) avec le bon form_id.
• Vérifier que le contact HubSpot créé contient les valeurs UTM et gclid.
• Refuser la bannière, puis resoumettre : vérifier ce qui part effectivement vers GA4 et Google Ads.
• Tester sur mobile, le formulaire étant souvent chargé plus tard.

Foire aux questions

HubSpot suffit-il pour mesurer mes leads ?

Non. HubSpot mesure le parcours dans le CRM, pas le comportement des visiteurs à l’échelle du site ni les canaux avec les mêmes règles que GA4. Les deux sont complémentaires.

Peut-on envoyer les soumissions HubSpot directement à GA4 ?

Pas sans code côté site. Il faut un événement dans le dataLayer ou un envoi serveur. Le callback décrit plus haut est la méthode la plus simple et la plus lisible.

Faut-il retirer le tracking natif HubSpot si GA4 est en place ?

Non. Il alimente les rapports et les workflows CRM. Le retirer casse la chaîne lead-contact-deal sans rien apporter à GA4.

Sources

• Formulaires HubSpot : embed, hbspt.forms.create, callbacks onFormReady et onFormSubmitted
• Événements globaux émis par les formulaires HubSpot