Capturing UTM Parameters in Your Form Fields

Are you eager to unravel the origins of your website visitors and distinguish between paid and organic sources? A strategic approach involving UTM parameters and discreet form fields stored in cookies presents a practical solution. Capturing UTM Parameters in Your Form is really easy. Here’s how.

Incorporating UTM parameters for source information significantly amplifies the depth of tracking data, providing valuable insights into online presence and visitor interests. While analytics tools like Google Analytics typically offer source information, integrating this data into Customer Relationship Management (CRM) systems enriches the overall dataset. However, for inclusion in Google Analytics, it is advisable to refer to a separate guide on tracking UTM codes in GA4.

Despite the benefits of source information on the landing page, challenges arise when users navigate to subsequent pages. Addressing this involves associating source information with users through hidden form fields. However, concerns about user experience and cluttering views with tracking data may emerge.

The solution lies in the strategic use of cookies. Storing source information in a cookie allows marketers to seamlessly transfer the information to populate a form field when users are ready to submit, without disrupting the user experience. Here’s a step-by-step guide:

Creating a Form Field:
- Use a popular form plugin like Contact Form 7 on your website.
- Add a hidden form field to capture UTM parameters alongside the user’s contact information.
Getting UTM Data in Google Tag Manager:
- Create a custom Tag in Google Tag Manager using the Persist Campaign Data template.
- Configure the Tag to store campaign data in a browser cookie.
- Enter the UTM parameters you wish to store.
- Attach an All Pages trigger to the Tag.
Viewing Cookies:
- Access cookies in the browser’s Developer Tools under the Chrome menu.
- Check the Campaign URL cookie (__gtm_campaign_url) for the encoded URL.
Creating a Cookie Variable:
- Create a 1st Party Cookie variable in Google Tag Manager.
- Enable URI-decode cookie to decode the URL.
- Save the variable, making the decoded URL available in the debug console.
Filling the Form Field with Cookie Data:
- Use a JavaScript code in a custom HTML Tag to fill the form field with cookie data.
- Configure a trigger, such as Page View – DOM Ready, to ensure the form field exists.
Hiding the Form Field:
- Hide the form field in Contact Form 7 by adding “hidden” before the form field name in the template editor.
Submission and Access:
- Reload the page, triggering the Tag to fill the form field with the URL.
- Upon form submission, the data, including the source URL, is sent to the designated email.
Advanced Options:
- For a more advanced setup, consider implementing multiple hidden form fields to capture diverse information from various sources.

When applied effectively, this technique seamlessly captures UTM parameters using form fields from the landing page. For those seeking assistance, professional support from entities like Tectonic is recommended to facilitate the integration of marketing channel attribution data into the CRM.