Suivre les soumissions de formulaires HubSpot dans Google Analytics

HubSpot est aujourd'hui l'un des outils marketing les plus utilisés par les entreprises B2B, et les formulaires de capture de leads figurent parmi ses fonctionnalités les plus employées. Ces formulaires servent généralement sur les sites web pour des CTA comme « Demander une démo » ou « Télécharger un exemplaire », etc. L'utilisateur doit alors renseigner quelques informations, puis envoyer le formulaire.

Il est facile de suivre ces soumissions dans HubSpot, mais qu'en est-il d'avoir ces données dans Google Analytics ? Il est important de configurer le suivi des conversions dans GA pour pouvoir mesurer la performance de votre site et analyser le détail au-delà de ce que montre HubSpot.

Dans cet article, nous vous montrons une méthode rapide pour suivre n'importe quelle soumission de formulaire HubSpot avec GA et Google Tag Manager, et pour créer vos propres événements personnalisés pour chaque formulaire.

Prérequis

Pour que cela fonctionne, Google Tag Manager doit être installé sur votre site web. C'est assez simple à faire, vous pouvez le découvrir dans le tutoriel de Google. Google Tag Manager est un outil très utile pour l'analytique du marketing digital, et je vous recommande de l'utiliser si ce n'est pas déjà le cas. Il vous permet en gros de gérer tous vos scripts personnalisés sans avoir à les intégrer dans la page elle-même : vous installez Tag Manager, puis tous les autres scripts à l'intérieur de Tag Manager.

Une fois Tag Manager installé, vous pouvez passer aux étapes ci-dessous pour configurer le suivi des soumissions de formulaires HubSpot dans Google Analytics 4.

Les étapes

Il n'y a que quelques étapes à suivre, et la partie la plus complexe est le Javascript, mais pas d'inquiétude : vous pouvez simplement copier-coller ce code.

1. D'abord, créer un écouteur d'événements en Javascript
2. Créer un déclencheur d'événement personnalisé dans Tag Manager
3. Créer une balise d'événement GA4 à partir du déclencheur
4. Prévisualiser et tester la nouvelle balise dans GTM
5. Consulter l'événement dans GA et le marquer comme conversion

Étape 1 : créer un écouteur d'événements en Javascript

Toutes les actions ou tous les événements d'une page web sont suivis dans le DOM (Document Object Model). Cela signifie qu'avec un peu de Javascript très simple, nous pouvons créer ce qu'on appelle un écouteur d'événements (event listener) qui « écoute » un événement précis et déclenche une action lorsqu'il se produit. C'est ainsi que nous allons suivre et enregistrer les soumissions de formulaires HubSpot et les actions de conversion.

Ainsi, chaque fois qu'un formulaire HubSpot est soumis, il crée un événement dans le DOM. Le détail de ces événements est consultable dans la documentation de l'API Forms de HubSpot. HubSpot crée un événement spécifique appelé onFormSubmitted à chaque soumission réussie d'un formulaire : c'est cet événement que nous voulons écouter. Vous n'avez pas vraiment besoin de vous soucier des détails.

Comment faire, alors ? La première étape consiste à ouvrir Google Tag Manager et à créer une nouvelle balise HTML personnalisée. Cela nous permet d'ajouter l'écouteur Javascript. Sous la capture d'écran, nous avons ajouté le code à copier-coller dans la section HTML.

C'est la partie la plus complexe du processus, et si vous n'avez aucune expérience du Javascript, elle risque de n'avoir que peu de sens, voire aucun. Mais pas d'inquiétude : une fois expliquée, elle est assez facile à comprendre... en tout cas, je l'espère.

Ignorez certains morceaux de ce code, car ils n'auront pas de sens si vous ne comprenez pas le fonctionnement du Javascript. En gros, ce script ajoute un EventListener à la fenêtre ouverte, et lorsqu'il rencontre un événement dont le type de données correspond aux conditions mentionnées dans la question, il ajoute un nouvel événement à ce qu'on appelle la data layer.

Une data layer est un objet Javascript (une entité virtuelle). Elle transmet des informations de votre site web à Google Tag Manager : lorsque cet événement se produit, l'information est donc transmise à la data layer.

Ce code est à copier-coller. Voici ce qu'il signifie :

Si vous voulez créer un événement qui suit TOUTES les soumissions de formulaires HubSpot, vous pouvez retirer du JS la condition qui indique event.data.id === “id” : l'ID saisi ici est celui du formulaire, que vous trouverez dans HubSpot. Si vous supprimez cet élément du script, l'événement se déclenchera à chaque soumission de formulaire.

Déclencher un événement précis pour un formulaire précis est une meilleure pratique qu'un événement global pour tous les formulaires. Cela vous donne plus de contrôle sur les événements et sur les conventions de nommage.

Une fois publié dans Tag Manager, ce code crée un nouvel événement appelé « form-submission-event-name » (vous pouvez le nommer comme vous voulez). Vous pouvez désormais utiliser le nom de cet événement pour en déclencher d'autres : nous allons donc configurer un déclencheur à partir de ce nom d'événement.

Étape 2 : créer un déclencheur d'événement personnalisé

Vous avez maintenant un écouteur d'événements configuré et un nouvel événement créé. L'étape suivante consiste à configurer un déclencheur basé sur l'événement désormais envoyé à la Datalayer. C'est simple : il suffit de créer un nouvel événement personnalisé et d'y saisir le nom de l'événement créé dans le JavaScript.

Pour le déclencheur, vous devez utiliser exactement le même nom d'événement que celui indiqué à l'étape précédente dans le code Javascript. Cela transforme cet événement en déclencheur, que nous pouvons ensuite utiliser pour activer d'autres balises dans Google Tag Manager. On peut procéder autrement, mais je pense que cette méthode est plus propre.

Ce déclencheur servira ensuite de référence pour notre événement GA4. Autrement dit, chaque fois que cet événement se produit, le déclencheur active l'événement Google Analytics.

Étape 3 : créer une balise GA4 faisant référence à l'événement

Cette étape est très simple. Vous devez maintenant créer une nouvelle balise d'événement GA4 dans Google Tag Manager, comme illustré ci-dessous. Il faut y sélectionner un déclencheur : c'est ici que nous choisissons celui créé à l'étape 2. Enfin, donnez-lui un nom ; par exemple, nous avons appelé la nôtre « Request a Demo ».

Étape 4 : prévisualiser et tester la nouvelle balise

Ensuite, prévisualisez et testez cette nouvelle balise sur votre formulaire de test ou votre formulaire réel, selon votre configuration, pour vérifier qu'elle se déclenche correctement et fonctionne comme prévu. Si ce n'est pas le cas, le problème le plus courant est un nom d'événement différent.

Étape 5 : consulter l'événement dans Google Analytics et le marquer comme conversion

Une fois la balise testée et l'événement correctement déclenché dans votre conteneur Google Tag Manager, vous pouvez passer à Google Analytics pour vérifier qu'il y apparaît. Le mieux est de le faire dans la vue en temps réel.

Lorsque vous voyez que l'événement est bien enregistré dans Google Analytics, vous pouvez aller dans la zone d'administration et l'activer comme conversion si vous souhaitez le suivre ainsi. Et voilà, c'est terminé.

La plupart des sites n'ont qu'une action de conversion principale, mais vous pouvez aussi vouloir suivre les conversions liées au téléchargement d'un contenu ou à une autre inscription. Si vous comptez étendre les événements suivis, pensez à la convention de nommage de vos événements et efforcez-vous de rester cohérent, pour pouvoir tous les passer en revue facilement par la suite.

Pourquoi configurer des conversions dans Google Analytics ?

Certaines personnes ne configurent pas le suivi des conversions dans Google Analytics, car elles peuvent suivre et enregistrer toutes leurs soumissions de formulaires directement dans l'outil où elles ont créé le formulaire, comme HubSpot ou Salesforce.

Le problème, quand on ne suit les soumissions de formulaires que dans son CRM, c'est qu'en cas de changement d'outil, on perd l'historique des données. Il devient aussi plus difficile d'analyser les taux de conversion et les indicateurs de votre site si les conversions ne sont pas enregistrées dans Google Analytics.

Vous pouvez connecter HubSpot directement à votre compte Google Ads et en importer les conversions, mais vous pouvez aussi importer des conversions depuis Google Analytics. Cela vous donne simplement plus de flexibilité et prépare mieux l'avenir : c'est considéré comme une bonne pratique, à mon avis.

Créer des événements dans HubSpot pour Google Ads

En plus de configurer des événements dans Google Analytics, si vous utilisez HubSpot, vous pouvez créer des événements personnalisés à partir des données de votre CRM pour optimiser vos conversions dans Google Ads, à condition de connecter vos comptes Google Ads et HubSpot.

L'exemple ci-dessous montre comment j'ai créé 3 événements avec des déclencheurs différents. Ils sont ensuite resynchronisés dans Google Ads, où vous pouvez les sélectionner pour optimiser vos annonces en fonction de ces actions de conversion. Un guide plus détaillé est disponible dans la base de connaissances de HubSpot.

Utiliser les conversions optimisées de Google Ads avec HubSpot

Les conversions améliorées sont une fonctionnalité de Google Ads qui peut renforcer la précision de votre mesure des conversions et rendre vos enchères plus performantes. Elles complètent vos balises de conversion existantes en envoyant à Google, dans le respect de la vie privée, des données de conversion first-party hachées issues de votre site web.

Lorsqu'un client réalise une conversion sur votre site web, par exemple une demande de démo, vous recevez généralement des données first-party le concernant, comme une adresse e-mail, un nom et quelques autres informations professionnelles. Ces données peuvent être capturées par vos balises de suivi des conversions, hachées, envoyées à Google sous cette forme hachée, puis utilisées pour améliorer votre mesure des conversions.

Selon le type de conversions améliorées que vous utilisez, les données hachées servent de différentes manières à affiner votre mesure. Pour les marketeurs B2B, c'est utile : si une personne est connectée à un compte Google professionnel au travail, l'optimisation peut s'appuyer sur ces données.

Ces données servent ensuite à associer vos clients aux comptes Google auxquels ils étaient connectés lorsqu'ils ont interagi avec l'une de vos annonces.