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é.

Hubspot Form Listener
  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>
Balise HTML personnalisé pour ajouter l'Hubspot form listener
Balise HTML personnalisé pour ajouter l'Hubspot form listener

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.

Événement generate_lead dans le Data Layer
Événement generate_lead dans le Data Layer

Créer les variables Data Layer correspondantes

L’identifiant du formulaire

Récupérer le form_id dans le Data Layer
Récupérer le form_id dans le Data Layer

Les champs de formulaires

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

Récupérer les champs du formulaire dans le Data Layer
Récupérer les champs du formulaire dans le Data Layer

Aller plus loin

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