Data/Tracking

Track the origin of your conversions using UTM parameters in Webflow

outils :
Illustration croce

Table of contents

Video

1. Add custom code to retrieve the UTM parameter and store it in the session

Add this custom code in the head of each of your landing pages

 <script>
  // Récupération de la valeur des paramètres "utm_source" dans l'URL et la stock dans la session
  var utmSource;
  if (!sessionStorage.getItem("utmSource")) {
 utmSource = new URL(window.location.href).searchParams.get("utm_source") || "google";
  sessionStorage.setItem("utmSource", utmSource);
} else {
  utmSource = sessionStorage.getItem("utmSource");
}
</script>

2. Add fields to your form to raise UTM parameters

Remember to put these fields on display: none, your prospects do not need to see them and this may degrade your conversion rate.

3. Add an ID to each of the fields you use to retrieve values

4. Add custom code to show the UTM parameter in your form fields

 < script>
// Récupérer l'élément HTML correspondant au champ de formulaire
var leadSource = document.getElementById("leadSource");
// Modifier la valeur de l'élément HTML pour afficher firstPage
leadSource.value = utmSource;
</script>

Remember to put the value of the ID you entered earlier in place of “LeadSource”

5. Publish your site and test the result

These tutorials might interest you

Our tutorials in the same category

See all our tutorials
Illustration traits
We use the best tools

Your site is developed using the best tools and best practices

Gemeos doesn't just offer you a website, but expertise in the best tools to guarantee you the best possible return on your investment.

Figma

To design your custom website and optimize its conversion rate

Webflow

For pixel-perfect, optimized integration of your website

Client-first

Organizing your project to perfection

Wized

To add advanced features to your project

Make

Automate your workflows and save maximum time