language
Nous contacter
language
Blog > Capturer et envoyer les UTM’s et GCLID lors d’une soumission de formulaire Webflow

Capturer et envoyer les UTM’s et GCLID lors d’une soumission de formulaire Webflow

Julien Chastagnier
Julien Chastagnier
2 min
10 décembre 2024
2 min
10 décembre 2024
SOMMAIRE

Dans le cadre de la gestion de campagnes publicitaires en ligne, il est essentiel de pouvoir suivre précisément l'origine des conversions pour évaluer l'efficacité des différentes sources de trafic. Si vous utilisez Webflow pour héberger votre site web, vous pouvez configurer le suivi des paramètres UTM et GCLID lors de la soumission de formulaires. Cela vous permet de recevoir ces informations par e-mail, vous offrant une vue d’ensemble des campagnes qui génèrent les meilleurs résultats.

Pourquoi capturer les UTM et GCLID ?

Les paramètres UTM (Urchin Tracking Module) et le GCLID (Google Click Identifier) sont des outils puissants pour le suivi des performances des campagnes publicitaires. Les UTM permettent de suivre les sources de trafic comme Google Ads, les réseaux sociaux ou les campagnes d'e-mailing, tandis que le GCLID est un identifiant unique utilisé par Google Ads pour suivre les clics publicitaires. En capturant ces informations lors de la soumission d’un formulaire sur votre site Webflow, vous pouvez :

  • Suivre précisément la source des leads : savoir si un lead provient d’une campagne Google Ads, d’une newsletter ou d’un post social.
  • Optimiser vos campagnes publicitaires : identifier les campagnes qui fonctionnent le mieux et ajuster vos stratégies en conséquence.
  • Améliorer le ROI (Retour sur Investissement) : en comprenant quelle source apporte des leads de qualité, vous pouvez mieux allouer votre budget publicitaire.

Étape 1 : installer les scripts pour capturer et stocker les paramètres

La première étape consiste à installer deux scripts sur toutes les pages de votre site. Ces scripts vont capturer les informations GCLID et UTM présentes dans l'URL d’arrivée de l’utilisateur, les stocker dans le local storage du navigateur et les injecter dans des champs cachés de formulaire lors de la soumission.

Script pour capturer et stocker le GCLID

Ce script capture le GCLID depuis l'URL et le stocke dans le local storage avec une durée de vie de 90 jours :

 
<script>
function getParam(p) {
var match = RegExp('[?&]' + p + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

function getExpiryRecord(value) {
var expiryPeriod = 90 * 24 * 60 * 60 * 1000; // 90 jours d'expiration en millisecondes
var expiryDate = new Date().getTime() + expiryPeriod;
return {
value: value,
expiryDate: expiryDate
};
}

function addGclid() {
var gclidParam = getParam('gclid');
var gclidFormFields = ['gclid_field', 'foobar']; // tous les IDs possibles des champs de formulaire pour le GCLID
var gclidRecord = null;
var currGclidFormField;

var gclsrcParam = getParam('gclsrc');
var isGclsrcValid = !gclsrcParam || gclsrcParam.indexOf('aw') !== -1;

gclidFormFields.forEach(function (field) {
if (document.getElementById(field)) {
currGclidFormField = document.getElementById(field);
}
});

if (gclidParam && isGclsrcValid) {
gclidRecord = getExpiryRecord(gclidParam);
localStorage.setItem('gclid', JSON.stringify(gclidRecord));
}

var gclid = gclidRecord || JSON.parse(localStorage.getItem('gclid'));
var isGclidValid = gclid && new Date().getTime() < gclid.expiryDate;

if (currGclidFormField && isGclidValid) {
currGclidFormField.value = gclid.value;
}
}

window.addEventListener('load', addGclid);
</script>

Script pour capturer et stocker les paramètres UTM

Ce script capture les paramètres UTM et les stocke également dans le local storage pour une durée de 90 jours :

 
<script>
function getParam(p) {
var match = RegExp('[?&]' + p + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

function getExpiryRecord(value) {
var expiryPeriod = 90 * 24 * 60 * 60 * 1000; // 90 jours d'expiration en millisecondes
var expiryDate = new Date().getTime() + expiryPeriod;
return {
value: value,
expiryDate: expiryDate
};
}

function addUtmParams() {
var utmParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];
var utmFormFields = {
'utm_source': 'utm_source_field',
'utm_medium': 'utm_medium_field',
'utm_campaign': 'utm_campaign_field',
'utm_term': 'utm_term_field',
'utm_content': 'utm_content_field'
};
var currUtmFormField, utmParam, utmValue, utmRecord, isUtmValid;

utmParams.forEach(function(param) {
utmParam = getParam(param);
if (utmParam) {
utmRecord = getExpiryRecord(utmParam);
localStorage.setItem(param, JSON.stringify(utmRecord));
}
});

utmParams.forEach(function(param) {
utmRecord = JSON.parse(localStorage.getItem(param));
isUtmValid = utmRecord && new Date().getTime() < utmRecord.expiryDate;
currUtmFormField = document.getElementById(utmFormFields[param]);

if (currUtmFormField && isUtmValid) {
currUtmFormField.value = utmRecord.value;
}
});
}

window.addEventListener('load', addUtmParams);
</script>

Ces scripts doivent être ajoutés à toutes les pages de votre site pour garantir la capture correcte des informations, quel que soit le point d'entrée de l'utilisateur.

Étape 2 : créer les champs cachés sur le formulaire Webflow

La deuxième étape consiste à ajouter des champs cachés dans vos formulaires Webflow pour recevoir les informations GCLID et UTM. Cela se fait en insérant un code embed dans le formulaire.

Ajoutez les lignes suivantes dans votre module code embed de votre formulaire Webflow :

 
<input type="hidden" id="gclid_field" name="gclid_field" value="">
<input type="hidden" id="utm_source_field" name="utm_source_field" value="">
<input type="hidden" id="utm_medium_field" name="utm_medium_field" value="">
<input type="hidden" id="utm_campaign_field" name="utm_campaign_field" value="">
<input type="hidden" id="utm_content_field" name="utm_content_field" value="">
<input type="hidden" id="utm_term_field" name="utm_term_field" value="">

Ces champs cachés seront automatiquement remplis avec les valeurs capturées par les scripts lors de la soumission du formulaire.

Étape 3 : configurer Google Ads pour envoyer les UTM's et GCLID dans les URL's des annonces

Pour que le GCLID soit envoyé, vous devez activer le taggage automatique dans votre compte Google Ads. Voici comment procéder :

  1. Connectez-vous à votre compte Google Ads.
  2. Allez dans "Paramètres du compte".
  3. Sous "Suivi", assurez-vous que le taggage automatique est activé.

Ensuite, configurez un modèle de suivi qui inclut les paramètres UTM pour capturer dynamiquement les informations dans les URLs. Voici un exemple de modèle :

 
{lpurl}?utm_source=google&utm_medium=cpc&utm_campaign={campaignid}&utm_term={keyword}&utm_content={creative}

En suivant ces étapes, vous serez en mesure de capturer et d'envoyer les informations UTM et GCLID lors de la soumission d’un formulaire sur Webflow. Cela vous permettra de mieux comprendre les performances de vos campagnes publicitaires et d’optimiser vos stratégies marketing en conséquence. Une configuration correcte du suivi est essentielle pour maximiser le ROI de vos campagnes et prendre des décisions basées sur des données précises.
ETOILES

Pour ne rien louper des conseils de nos experts Diginautes, inscrivez-vous à la newsletter !

Heading 1

with a request body that specifies how to map the columns of your import file to the associated CRM properties in HubSpot.... In the request JSON, define the import file details, including mapping the spreadsheet's columns to HubSpot data. Your request JSON should include the following fields:... entry for each column.

Diginaute_newsletter

Articles recommandés

Parcourir le blog
Agence d’acquisition digitale à Paris, Lyon, Biarritz et Nice.
Web
CRM
Data
A propos
Ressources
Nous contacter
Nous contacter

Mentions légales
Politique de confidentialité Plan du site

Logo final-DIGITALISIM-FR-white