Tracker les formulaires Hubspot avec Google Tag Manager
Mis à jour : vendredi 6 juin 2025
Les formulaires Hubspot
Les formulaires créés avec Hubspot sont difficiles à tracker avec les déclencheurs natifs de Google Tag Manager.
Je vais vous montrer comment tracker uniquement les envois valides d’un formulaire Hubspot et également comment récupérer les données utilisateurs (comme par exemple l’adresse email) pour les transmettre aux plateformes publicitaires.
Installer l’Hubspot Form listener
Pour écouter l’envoi d’un formulaire valide Hubspot, vous devez ajouter ce code dans Google Tag Manager avec une balise HTML personnalisé.
1<script>
2if(typeof HubspotFormsV4 != 'undefined') {
3 window.addEventListener("hs-form-event:on-submission:success", function(event) {
4 var form = HubspotFormsV4.getFormFromEvent(event);
5 if (form) {
6 window.dataLayer = window.dataLayer || [];
7 form.getFormFieldValues().then(function(fieldValues){
8 window.dataLayer.push({
9 event: "generate_lead",
10 form_id: form.getFormId(),
11 instance_id: form.getInstanceId(),
12 conversion_id: form.getConversionId(),
13 user_data: normalizeUserData(fieldValues, 'v4'),
14 other_properties: getOtherProperties(fieldValues)
15 });
16 });
17 }
18 });
19}
20
21window.addEventListener('message', function(event) {
22 if (event.data && event.data.type == "hsFormCallback" &&
23 (event.data.eventName == "onFormSubmitted")) {
24 window.dataLayer = window.dataLayer || [];
25 window.dataLayer.push({
26 event: 'generate_lead',
27 form_id: event.data.id,
28 conversion_id: event.data.data.conversionId,
29 user_data: normalizeUserData(event.data.data.submissionValues, 'v3'),
30 other_properties: getOtherProperties(event.data.data.submissionValues, 'v3')
31 });
32
33 }
34});
35
36function getOtherProperties(fieldValues, version) {
37
38 var other_properties = {};
39
40 var user_data_to_exclude = [
41 'email',
42 'phone',
43 'mobilephone',
44 'firstname',
45 'lastname',
46 'address',
47 'city',
48 'state',
49 'country',
50 'zip'
51 ];
52
53 if(version == 'v4') {
54 fieldValues.forEach(function(field) {
55 var name = field.name;
56 var value = field.value;
57 var cleanName = name.split('/').pop();
58 if(!user_data_to_exclude.includes(cleanName) && value) {
59 other_properties[cleanName] = value
60 }
61 });
62 } else if (version == 'v3') {
63 for (var key in fieldValues) {
64 if (fieldValues.hasOwnProperty(key) && fieldValues[key] && !user_data_to_exclude.includes(key) && key != 'hs_context') {
65 other_properties[key] = fieldValues[key];
66 }
67 }
68 }
69
70 return other_properties;
71
72}
73
74function normalizeUserData(fieldValues, version) {
75 var user_data = {};
76
77 var fieldMap = {
78 email: 'email_address',
79 phone: 'phone_number',
80 mobilephone: 'phone_number',
81 firstname: 'address.first_name',
82 lastname: 'address.last_name',
83 address: 'address.street',
84 city: 'address.city',
85 state: 'address.region',
86 country: 'address.country',
87 zip: 'address.postal_code'
88 };
89
90 if(version == 'v4') {
91 fieldValues.forEach(function(field) {
92 var name = field.name;
93 var value = field.value;
94 var cleanName = name.split('/').pop();
95 var mappedPath = fieldMap[cleanName];
96
97 if (mappedPath && value) {
98 var keys = mappedPath.split('.');
99
100 if (keys.length === 1) {
101 user_data[keys[0]] = value;
102 } else if (keys.length === 2) {
103 if (!user_data[keys[0]]) {
104 user_data[keys[0]] = {};
105 }
106 user_data[keys[0]][keys[1]] = value;
107 }
108 }
109 });
110 } else if(version == 'v3') {
111 for (var key in fieldValues) {
112 if (fieldValues.hasOwnProperty(key) && fieldValues[key]) {
113 var mappedPath = fieldMap[key];
114 if (mappedPath) {
115 var keys = mappedPath.split('.');
116
117 if (keys.length === 1) {
118 user_data[keys[0]] = fieldValues[key];
119 } else if (keys.length === 2) {
120 if (!user_data[keys[0]]) {
121 user_data[keys[0]] = {};
122 }
123 user_data[keys[0]][keys[1]] = fieldValues[key];
124 }
125 }
126 }
127 }
128 }
129
130 return user_data;
131}
132/*
133* v0.1.0
134* Created by Data Marketing School at https://www.data-marketing-school.com
135* Written by https://www.linkedin.com/in/lucasrollin/
136*/
137</script>

Je vous conseille de déclencher cette balise uniquement sur la ou les pages qui contiennent des formulaires Hubspot.
Exemple d’un envoi valide de formulaire
Lors d’un envoi valide du formulaire Hubspot, l’événement generate_lead
est envoyé dans le Data Layer.
Si vous avez plusieurs formulaires sur la même page, vous devrez vous baser sur la variable form_id
pour les différencier dans GTM.

Créer les variables Data Layer correspondantes
L’identifiant du formulaire

Les champs de formulaires
Ici vous devez créer une variable pour chaque champ de votre formulaire.

Aller plus loin
Vous pouvez transmettre les données utilisateurs collectées via votre formulaire Hubspot aux plateformes publicitaires pour améliorer vos performances :