by Sam Forbes 
Why you should be interested in UTM parameters
If you’ve ever clicked on an online ad, you’ve likely noticed that the URL of the page you end up at is much longer than you’d expect. Something like this:
This example URL shows a link to our Contact Us page, along with a set of accompanying UTM parameters. UTM Parameters are a set of standard URL parameters that provide us with information about which ad was clicked to bring a user to a web page.
As a marketer, understanding which form submissions were generated by a user following an ad is vital for understanding the effectiveness of your campaign.
How can we capture them from the URL
The short answer is code. We need to put some Javascript on the page that hosts the account engagement iframe.
Account engagement forms can have their field values pre-defined by setting those field values in the iframe URL. What do I mean by that? Let’s say you have a form at ‘https://testform.com/test’ with a field on it called lead_source. If you were to host that form in an iframe with the src ‘https://testform.com/test?lead_source=website’ then your form will magically have the lead source field pre-filled with ‘website’.
The aim of the script below is to use this feature to pre-fill hidden UTM fields using this technique. It’s going to find any UTM parameters in the current page URL, and update the iframe’s src to include these parameters.
NOTE: This code relies on your form having fields that match the UTM parameter names exactly.
ANOTHER NOTE: If you want to use this code on your own page, you’ll need to update the document.querySelector() to query the correct iframe element
document.addEventListener("DOMContentLoaded", () => {
const parameters = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];
if (!parameters.some(parameter => window.location.search.includes(parameter))) {
return;
}
//This selector will need to be updated to ensure that the correct iframe is selected.
const iframe = document.querySelector('iframe.aeform');
const decodedUrl = decodeURIComponent(window.location.search);
const urlParameters = new URLSearchParams(decodedUrl);
const urlSuffix = parameters
.filter(parameter => urlParameters.has(parameter))
.map(key => `${key}=${urlParameters.get(key)}`)
.join('&');
iframe.src += `?${urlSuffix}`;
iframe.parentNode.replaceChild(iframe.cloneNode(true), iframe);
});
Ok, lets break that down:
- Firstly we look at the current parameters in your page url. If it doesn’t find any of the UTM parameters, then it doesn’t attempt to do anything further
- Next it queries the page to find the iframe that hosts the account engagement form.
- Then we decode the parameter string so that it’s human-readable
- We then build the new suffix for the account engagement form using only the UTM parameters
- Lastly we apply the update to the page by replacing the existing iframe with a clone of itself, except with an update src attribute
Problems with the standard approach
You’ve put the script on your page and UTM parameters are coming through to Account Engagement. Job done right?
As always, it’s a little more tricky than that. Mainly because human beings have short attention spans and are prone to doing things you don’t expect.
So here’s the problem. You’ve got a great campaign running, a user clicks an ad and lands on your site. Awesome. UTM parameters are coming our way… Except, they want to look at your About Us page first to learn more about your company. Once they navigate there, those UTM parameters in the URL are gone forever. So, if they come back to complete your form after a small browse, it’ll look like an organic submission, detracting from your campaign’s stats.
For determining your campaign’s effectiveness with maximum accuracy, we need a way to keep hold of those precious parameters, while letting our user’s wander freely.
How we can persist UTM parameters
The answer is a browser cookie. Yes I know that word can ring alarm bells, so let’s work through this together.
We set the cookie using Google Tag Manager, as this neatly integrates with third party cookie banner providers. When a user has set their cookie preferences, if they allow analytics cookies, then Google Tag Manager will check the page URL for UTM parameters. If it find’s some, it’ll save the entire URL into a cookie that’ll live for 24 hours. This process fulfils our GDPR requirements.
The next step is a modification to the code. Instead of just checking the current page URL, we also check to see if we have a cookie available to read the URL from. If we do, then we can extract the UTM parameters from there. Both bases are then covered.
Therefore, our users can click a campaign ad at midday on Tuesday, arrive at our website, wander around the site for a full 23 hours and 59 minutes before submitting a form and we would still receive the UTM parameters of the campaign that brought them there.
Let’s chat
If you’d like to know more about this solution and how Nebula can help you maximise the effectiveness of your Account Engagement tracking, get in touch with one of our consultants.