How to Track UTMs in Forms

Does your team know what links are bringing in the most traffic to your website? Are you aware of where people are coming from to access your forms or landing pages?

If not, don’t worry. There’s an easy way to track that and give your marketing team the data they need to see what’s driving goal completions and what needs to be retooled.

It’s no secret that UTM tags provide some of the best analytics as to where your website visitors come from and their intent for visiting your website. However, developers often forget they can be used alongside forms! Most CRMs lump all form submissions in together, leaving teams frustrated that they can’t properly attribute form submissions.

But if this is your first rodeo and you want a better understanding of UTM tags, check out our Marketer’s Guide to Building, Managing, and Future-Proofing UTMs. To recap, "UTM" or "urchin tracking module" helped lay the groundwork for Google Analytics. UTM tags are the bits of text you can add to the end of a link that tell analytics tools more about each link. You’ll find out where the traffic came from, how it got to you, and why it came to your site using UTM parameters. Before getting further in this particular blog, be sure to read our primer to get all caught up.

If you’re ready to continue, here’s your guide to tracking UTM tags in forms:

Understanding Parsing of UTM Tags

Before we begin, its important to conceptually understand what the overall framework of this tracking process. The UTM tags are passed along in a given link URL:

The values of these tags will then be stored as cookies. Anytime a user submits a given form, the cookie values will then be passed into hidden fields.

There's considerable importance to storing these UTM tags as cookies. Notably, you would want to continue to track conversions even if a user navigates to the website, leaves, only to return later at some point and convert. If you rely only on server-side processing to capture UTM data, you will lose this data the moment a user leaves their initial page and the UTM parameters disappear from the URL structure. Accordingly, you want to capture the initital UTM values and store them so that you can reference them as the user navigates your site.

UTM Tracking Javascript

The key code that makes all of this possible is the JavaScript that (1) parses a given URL, (2) looks specifically for UTM tags, (3) stores the UTM values as site cookies, and (4) passes those cookie values into hidden input fields in a form:

With the above JavaScript included on every page, any UTM url attribute will now be stored as a site cookie:

Hidden Form Fields

The form component of UTM tracking requires that you have a hidden field for each UTM tag you want to track/process:

With the hidden fields in place, the JavaScript will now be able to include the appropriate values for each UTM tag:

Initially Capturing UTM Values

One caveat is that this will help your efforts in including UTM tracking data in form submissions if the user navigates around your site or even leaves and returns. However, you still need to account for UTM tracking if a user visits a page (say a landing page) and converts immediately. You can account for this by using some simple PHP snippets:

The above will then work for those users who convert immediately on the page. However, if a user navigates away and converts later then the JavaScript will pick up the stored values. This way, your covered across a wide spectrum of user behavior.

Admittedly, there are a number of moving parts to this whole process. Once you have implemented all of the above, make sure you thoroughly test everything to ensure that the values are being captured and processed in your form. Once you have confirmed that, feel to free to modify your form's post processing procedures (such as integration with a CRM) so that all of your data is successfully processed to any desired channel.