Tracking

1 views

6 min

Track where your conversions come from with UTM parameters in Webflow

Video

UTM parameter	JS variable	Usage
utm_source	utmSource	Source platform (Google, Facebook, LinkedIn...)
utm_medium	utmMedium	Channel type (cpc, email, social...)
utm_campaign	utmCampaign	Campaign name
utm_content	utmContent	Content variant (A/B test)

In this episode, Sandro, cofounder of the Gemeos Webflow agency, shows you how to track where your conversions come from using UTM parameters in Webflow.

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

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

2. Add fields to your form to pass the UTM parameters through

Make sure to set these fields to display: none. Your prospects don't need to see them, and it could hurt your conversion rate.

3. Add an ID to each field you use to pass values through

‍

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

 < script>
// Get the HTML element for the form field
var leadSource = document.getElementById("leadSource");
// Update the HTML element value to display firstPage
leadSource.value = utmSource;

Make sure to replace "leadSource" with the ID value you set earlier

good to know

To track all UTMs at once, duplicate the script for each parameter. This technique works with native Webflow forms and third-party tools like Tally or HubSpot Forms.

5. Publish your site and test the result

‍

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss