Maximizing UTM Parameters in Webflow: Strategies for Comprehensive Conversion Tracking

Understanding your website's traffic sources is crucial for optimizing your online presence. One effective method for tracking visitor sources involves using UTM parameters. Tools such as Google Tag Manager and Hubspot allows you to capture the UTM parameters from your URLs, enabling you to comprehend your users' journey.

‍

‍

1. Understanding UTM Parameters

UTM parameters, those URL parameters appended at the end of website addresses, play a pivotal role in digital marketing analytics. Here's an example of a URL with UTM parameters:

‍yoursite.com?utm_medium=social&utm_source=facebook&utm_campaign=product-promo

‍

There are five key UTM parameters:

• utm_source: Indicates the source that directs users to your website, such as Facebook, LinkedIn, or Instagram.
• utm_campaign: Represents the name of your marketing campaign, grouping links belonging to the same campaign.
• utm_medium: Identifies the method used to acquire traffic, like 'social' or 'social-media' for links shared on social platforms such as LinkedIn or Facebook.
• utm_content: Differentiates the content of your ads, allowing you to track the effectiveness of various calls to action.
• utm_term: Specifies the term or keyword used in the campaign or ad, aiding in keyword analysis.

Notably, the three mandatory UTM parameters are utm_source, utm_campaign, and utm_medium.

‍

‍

2. The Challenge: UTM Parameters Across Pages

A common issue with UTM parameters is that they are limited to a single page. When a visitor lands on your homepage via a LinkedIn advertising campaign, the homepage URL contains UTM parameters. However, as soon as the visitor navigates to another page (e.g., product page), these UTM parameters vanish.

For instance:

‍

First page visited: yoursite.com?utm_medium=social&utm_source=facebook&utm_campaign=product-promo

‍

Second page visited: yoursite.com/product

‍

While this behavior is standard for analytical tools like Google Analytics, sometimes you need to trace the origin of conversions throughout your site. Tools like HubSpot only track UTM parameters on the specific page where the conversion occurs.

‍

‍

3. Solutions: Tracking Conversions Beyond Direct Landing Pages

In this article, we explore techniques for tracking conversions from campaigns that don't lead directly to a conversion page. We'll cover two methods:

1. Utilizing Cookies: Storing UTM parameters throughout a user's session using cookies, ensuring the data persists as visitors navigate your site.
2. URL Decoration: Decorating URLs from page to page to preserve UTM parameters and transmit them to the booking tools integrated into your site.

‍

3.1. Utilizing Cookies for Persistent UTM Data

Preserving crucial data like UTM parameters is essential for understanding your audience's behavior and optimizing your campaigns. One effective way to achieve this, especially when dealing with multiple pages on your website, is by utilizing cookies.

‍

As visitors move from one page to another, these cookies retain the initial UTM parameters, ensuring that the valuable tracking information isn't lost during their exploration. This seamless transfer enables you to gain comprehensive insights into the visitor's journey, allowing you to understand which marketing sources are driving engagement and conversions.

‍

Tools like HubSpot offer convenient trackers that capture UTMs from your URL, store them in cookies, and automatically populate hidden form fields with the captured data.

‍

Implementation in Webflow

For Webflow users, integrating this cookie-based UTM tracking system is straightforward. By incorporating a few lines of JavaScript code into your site's settings, you can initiate the cookie creation process. This code acts as the bridge, capturing UTMs from the URL and storing them in cookies. As users interact with your website, these cookies persist, allowing you to maintain a detailed record of their interactions. We are working on a super fast tutorial to implement this cookie transfer method directly into your Webflow native form hidden fields through some javascript code that you could paste in your Webflow site settings.

‍

3.2. URL Decoration

In certain scenarios, third-party tools lack the capability to include hidden fields for capturing UTM parameters. For example, HubSpot's Booking Meeting tool doesn't support hidden fields, making it challenging to pass UTMs to the booking conversion without URL decoration. If you're not transferring UTMs from page to page, you might find yourself at a dead end, unable to track the source information for conversions.

‍

That's where this method shines. By decorating each page URL with the initial session's UTM parameters, you can effectively preserve and transfer this valuable data to the tools you're using. This approach ensures seamless tracking and empowers you to maintain the integrity of your UTM parameters throughout the user's journey on your website.

‍

Implementation in Webflow

‍

STEP#1: Copy the code below.

<script>
‍
function getURLParameters() {
 var params = {};
 var url = window.location.search.substring(1);
 var paramPairs = url.split('&');
 for (var i = 0; i < paramPairs.length; i++) {
   var pair = paramPairs[i].split('=');
   var paramName = decodeURIComponent(pair[0]);
   var paramValue = decodeURIComponent(pair[1]);
   params[paramName] = paramValue;
 }
 return params;
}

window.addEventListener('DOMContentLoaded', function() {
 var params = getURLParameters();
 var url = window.location.search.substring(1);
 if (url) {
   var links = document.getElementsByTagName('a');
   for (var i = 0; i < links.length; i++) {
     var href = links[i].getAttribute('href');
     if (href && !href.includes('?') && !href.includes('#')) {
       var urlWithParams = href + '?' + Object.keys(params).map(function(key) {
         return key + '=' + encodeURIComponent(params[key]);
       }).join('&');
       links[i].setAttribute('href', urlWithParams);
     }
   }
 }
});

</script>

‍

STEP#2: Go to your Webflow site's general settings.

‍

STEP#3: Click on the "Custom code" tab.

‍

‍

STEP#4: Paste the code snippet into the footer code of your site.

‍

STEP#5: Save the changes and publish your site.

‍

‍

Conclusion: Mastering UTM Parameters for Enhanced Conversions

Understanding your website's traffic sources is the cornerstone of successful digital marketing. By delving into techniques like utilizing cookies and URL decoration, you can bridge the gap in tracking, ensuring a seamless flow of valuable data as visitors explore your website. The power to retain UTM parameters empowers you to comprehend the intricacies of your users' journey, allowing for targeted marketing strategies and optimized conversions. As you implement these methods, remember that your ability to preserve and transfer UTM parameters is not just about tracking clicks; it's about understanding your audience, refining your approach, and ultimately, boosting your conversion rates.