I saw an issue posted on Umbraco Forms Issue Tracker the other day looking for the functionality of capturing UTM Campaign Parameters with Umbraco Forms submissions. This is something I’ve been intending to blog about for a while so now seems like a good time.

Why would you want to submit UTM Parameters with your forms?

UTM Parameters are a Google Analytics convention for tagging links that you share with querystring parameters that enable you to better understand what content/marketing efforts are driving traffic to your site. You can configure them using Google’s handy Campaign URL Builder Tool.

For example, if I were to put this article out through LinkedIn and I wanted to tag it with custom UTM parameters that I would be able to reference back to my efforts I might end up with a URL to share like this:

Generally, these parameters are then captured by Google Analytics for reporting in the dashboard.But you may also find value in knowing for a specific contact that comes in through your site and submits a form to you, what content or marketing effort actually drove them there in the first place. That’s the gap that this is intended to fill with Umbraco Forms.

It’s pretty straightforward. Here’s what I did to achieve it:

UTM.js

Use this Gist I’ve adapted from Puru Choudhary over at Medius – they build a pretty neat app called TerminusApp that helps you better manage the UTM Parameter campaigns that you build. Add this script to your master template to fit whatever bundling setup that you work with.

What this script does it set some cookies with the following info (more info on the original UTM Form repo here):

  • 5 UTM parameters - Any UTM parameters in the URL that a visitor used to come to your website will be added to the form
  • Initial Referrer - The webpage where the visitor came from for the first time
  • Last Referrer - The webpage where the visitor came from most recently
  • Initial Landing page - URL of the page on your website where the visitor landed the very first time
  • Number of visits - The number of times the visitor came to your website before filling your form

The changes I made to this script involve the removal of automatically adding them to any form on the site. We don’t need that for Umbraco Forms. We can use the “magic strings” available to us when creating fields in the form builder to read the values from the cookies that have been set. We need to do it this way because we can’t just add new hidden input fields to any Umbraco form dynamically on the front end. They need to have been configured in the form builder or they won’t submit along with the other data.

Umbraco Forms UTM Params Setup

The naming conventions for the field names & aliases are up to you but the values are important as they need to match the cookie values set by the UTM script. Configure these as hidden fields in Umbraco Forms. I’ve added another couple of variables below that aren’t sent with UTM Params but may be useful for you to capture as well.

Name Alias Value
UTM Source uc_UtmSource [%_uc_utm_source]
UTM Medium uc_UtmMedium [%_uc_utm_medium]
UTM Campaign uc_UtmCampaign [%_uc_utm_campaign]
UTM Term uc_UtmTerm [%_uc_utm_term]
UTM Content uc_UtmContent [%_uc_utm_content]
Initial Landing Page uc_InitialLandingPage [%_uc_initial_landing_page]
Referrer uc_Referrer [%_uc_referrer]
Last Referrer uc_LastReferrer [%_uc_last_referrer]
Number of Visits uc_Visits [%_uc_visits]
Page Name uc_PageName [#pageName]
Page Url uc_PageUrl [@Url]

 

Now, you may be wondering, that’s well and good but if I have many forms to set up do I have to configure these for each and every form that's created? The answer is yes... and no. Let me explain – I couldn’t find a way to automatically create the fields or capture dynamically-added input fields that would be added on the front end and sent along with the submitted data to Umbraco Forms to be picked up by a workflow and stored. The most elegant suggestion I’ve come across to solve it is this:

Use a Baseline Form

Create a form that’s only used as a starting point for creating other forms. It can be used for configuring fields such as UTM fields and any data privacy, consent gathering and transparency information that you will want to include on any form that is created. Then simply copy that form to a new form and adapt it to your needs. That’s it!

Wrapping Up

Hopefully this has been useful to you. Capturing UTM data alongside form submissions can be really useful in better understanding the ROI you are getting on leads that come in. You can tie the actual value realised to the source that sent the lead to you, helping you better focus your efforts.

topics mentioned in this article

Author

Alan Mac Kenna

Alan Mac Kenna

Web Development & Data Protection Specialist

More Info

About Alan Mac Kenna


I write about various topics including Content Management Systems, Data Protection, Software Development and Recruitment & HR Tech.


Back

Latest Posts