Capturing UTM parameters (such as utm_source
, utm_medium
, utm_campaign
, etc.) is crucial for tracking the performance of marketing campaigns. One of the most effective ways to capture these UTM parameters on your site and pass them into forms, such as JotForm, is by using Google Tag Manager (GTM).
In this tutorial, we’ll guide you step-by-step on how to capture UTM parameters from the URL, store them in cookies, and then pass them into a JotForm using GTM.
Prerequisites:
- Google Tag Manager installed on your website
- A JotForm form with hidden fields for capturing UTM parameters
- Basic understanding of GTM and its interface
Step 1: Capture UTM Parameters and Store Them in Cookies
The first step is to capture the UTM parameters from the URL and store them in cookies. We’ll use a Custom HTML Tag in GTM to achieve this.
- Open Google Tag Manager (GTM) and navigate to your container.
- Create a New Tag:
- Go to the “Tags” section and click “New.”
- Choose the “Custom HTML” tag type.
- Add JavaScript Code to Capture UTM Parameters: In the “Custom HTML” section, paste the following JavaScript code:
- Set the Trigger for This Tag: Choose the “Page View” trigger for All Pages to ensure that the script runs as soon as the page loads.
- Save and Publish the Tag to capture UTM parameters in cookies whenever a user lands on your site.
<script>
(function() {
// Function to get the value of a specific URL parameter
function getURLParam(name) {
var urlParams = new URLSearchParams(window.location.search);
return urlParams.get(name);
}
// Function to set a cookie with a specific name and value
function setCookie(name, value, days) {
var d = new Date();
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
}
// Capture UTM parameters and set them as cookies
var utmSource = getURLParam('utm_source');
var utmMedium = getURLParam('utm_medium');
var utmCampaign = getURLParam('utm_campaign');
var utmTerm = getURLParam('utm_term');
var utmContent = getURLParam('utm_content');
if (utmSource) setCookie('utm_source', utmSource, 7);
if (utmMedium) setCookie('utm_medium', utmMedium, 7);
if (utmCampaign) setCookie('utm_campaign', utmCampaign, 7);
if (utmTerm) setCookie('utm_term', utmTerm, 7);
if (utmContent) setCookie('utm_content', utmContent, 7);
})();
</script>
Step 2: Pass UTM Parameters to JotForm
Now that the UTM parameters are stored in cookies, we need to pass them into hidden fields in your JotForm form. Open Jotform, and create a short text and name it appropriately. I created 5 fields: utm_source, utm_medium, utm_campaign, utm_term, utm_content. Go into the advanced section on that field and locate “Unique Name.” Personally, I renamed all the field’s unique names to fit the parameter, but you can do what you want. Do note, if you name them something else, you will need to change some code later.
Okay, now you’re ready to create the new GTM tag to set values for your hidden fields.
1. Go back to Google Tag Manager and create another Custom HTML tag.
2. In the tag, use JavaScript to capture the cookies and set the hidden fields in the form (The code I used is below).
Note: If you decided to use different unique names, you will need to swap out some terms in the section under the comment, “Append UTM parameters to the URL if they exist.” I put the terms you need to swap out in bold.
If you did decide you wanted more UTMs, all you have to do is add another variable under “Get UTM parameters from cookies” and create another if statement with the respective data.
<script>
(function() {
// Function to get a cookie value by name
function getCookie(name) {
var decodedCookies = decodeURIComponent(document.cookie);
var cookieArray = decodedCookies.split(';');
for (var i = 0; i < cookieArray.length; i++) {
var cookie = cookieArray[i].trim();
if (cookie.indexOf(name + "=") == 0) {
return cookie.substring(name.length + 1);
}
}
return "";
}
// Get UTM parameters from cookies
var utmSource = getCookie('utm_source');
var utmMedium = getCookie('utm_medium');
var utmCampaign = getCookie('utm_campaign');
var utmTerm = getCookie('utm_term');
var utmContent = getCookie('utm_content');
// Append UTM parameters to the URL if they exist
if (utmSource) currentUrl.searchParams.set('source', utmSource);
if (utmMedium) currentUrl.searchParams.set('medium', utmMedium);
if (utmCampaign) currentUrl.searchParams.set('campaign', utmCampaign);
if (utmTerm) currentUrl.searchParams.set('term', utmTerm);
if (utmContent) currentUrl.searchParams.set('content', utmContent);
// Update the page URL without reloading
window.history.replaceState(null, "", currentUrl.toString());
})();
</script>
3. Set the Trigger for This Tag: Set this tag to fire on the page where your JotForm is embedded. Use a “Page View” trigger for the specific page or any other suitable trigger, such as a form submission. I only have it firing where I have forms where I want to collect this data
4. Save and Publish the Tag.
Step 3: Test Your Setup
Once you’ve added and published the tags in GTM, it’s time to test everything to make sure it works as expected.
- Preview the GTM Container:
- In GTM, click on “Preview” to enter the Debug Mode. Then navigate to the page with your form and check the GTM debug console.
- Check the Cookies:
- Open your browser’s Developer Tools (right-click and inspect, then go to the “Application” tab) and make sure the cookies for
utm_source
,utm_medium
, andutm_campaign
are set.
- Open your browser’s Developer Tools (right-click and inspect, then go to the “Application” tab) and make sure the cookies for
- Submit the Form:
- Test the form by submitting it after coming to your website with UTM parameters in the URL. Verify that the values from the UTM parameters are passed correctly into the hidden fields in the form.
Troubleshooting Tips
- No Cookies Set: If the cookies aren’t being set, double-check the script that captures the UTM parameters. Ensure that the
getUrlParameter()
function is correctly reading the URL and that the cookies are being set with the correct path. - Form Fields Not Populated: If the form fields aren’t being populated, inspect the field names in JotForm and ensure they match the names used in the JavaScript (e.g.,
utm_source
,utm_medium
,utm_campaign
). - Tag Not Firing: If the GTM tag isn’t firing, make sure the trigger is correctly configured and that the tag is being published after any changes.
Conclusion
Capturing and passing UTM parameters into a JotForm is a great way to enhance your marketing analytics and track the performance of your campaigns. By using Google Tag Manager to store UTM parameters in cookies and then passing them into JotForm, you ensure that all relevant data is captured when users submit their forms.
With these steps, you’ll have a robust setup that automates UTM tracking and helps you gain deeper insights into how visitors interact with your forms based on marketing campaigns. Oh and PS if you want to watch the video on how I did this, it’s right here.
Collin Flynn comes born and raised in Racine, Wisconsin off the coast of Lake Michigan. He graduated from Coe College in 2019 with a degree in physics. He is the founder of College Movers, a company that enables young entrepreneurial-minded people to open their own business utilizing the gig-economy and its technological backing. Collin has 4+ years of experience in the moving industry and writes about moving, fitness, and business. When he's not managing his business you can find him running, biking, or swimming — after all he does have triathlons to train for.