How to Get Started With Google Tag Manager: Form Tracking in the New User Interface (Part Three) - Fresh Egg Blog

How to Get Started With Google Tag Manager: Form Tracking in the New User Interface (Part Three)

Technical web analyst

Fresh Egg now offers Google Tag Manager training courses. Find out more here

This is part three of our Google Tag Manager (GTM) guide. If you’ve followed the series so far, you’ve already learned how to set up a pageview tag and how to track different types of click events such as PDF downloads.

Form tracking can be challenging - if you don’t have a technical background the debugging part can seem daunting. This post attempts to provide you with the means to carry out simple debugging of common issues encountered when setting up form events, and also provide an alternative dataLayer approach when the GTM form events aren’t compatible.

We will walk through the following:

Tracking successful form submissions

Step 1 – Check required built-in variables are enabled

We’re going to be using the following built-in variables to set up form tracking in this example:

  • Form ID
  • Page URL

Step 2 – Set up trigger using the Form ID and Page URL variables

 form success trigger

  • Configure the trigger to ‘Check Validation’
  • Enable the trigger to check form submissions only on the age(s) where your form is located
  • Add a filter, which uses the ‘Form ID’ variable
  • Note: If the form is the only one on that page, you can just select the ‘All Forms’ box on Step 4; be certain it’s the only one though!

How do I identify my Form ID?

You can use the HTML structure to identify whether your form has an attribute you can use to identify it. The following video shows you how to locate this:

 

  • Right click and select ‘Inspect Element’ on your form
  • Locate the code that begins <form
  • The value in the id=”” attribute will be what is captured by the ‘Form ID’ variable

Help! My form element doesn’t have an ID on it!

In some cases a form won’t have an ID; you may be able to use a class that is specific to that form or ask your development team to add an ID to the form HTML element.  One of the limitations mentioned in the event tracking guide is you do rely on the current HTML structure being usable through GTM.

Step 3 – Create Universal Analytics event tag

 form success tag

  • Select a track type of ‘Event’
  • Fill in your ‘Category’ and ‘Action’ values
  • Select the form trigger you set up earlier

Tip: The types of triggers are colour-coded in the latest interface; form triggers are purple.

Step 4 – Testing the tag

If you’ve followed part one and part two, you’ll be familiar with the preview mode and testing. I’m going to take a slightly different approach for testing form events; I’ll be using a free plugin to help identify the newly setup tracking.

It can be difficult to test form tracking with the traditional preview mode of GTM due to there not being a way to preserve a log of previous page events; often form submissions cause a page refresh. I use the free WASP Inspector Plugin that can be added to Chrome to see the flow of tracking as you move through a website.  

Note: Don’t forget to enter preview mode in through Google Tag Manager so you can see your new tracking.

To check your form event is firing take the following steps:

  • Open the WASP tab in the developer console, with the shortcut Ctrl+Shift+I
  • Submit your form
  • Return to the page tab the form was submitted on, and identify the collect call (or UTM if you’re using Classic GA, P.S.: You should upgrade your analytics!)wasp event call
  • Identify the calls to google-analytics.com
  • For Universal Analytics these will be called ‘collect’ and there will be a lightning symbol next to events, click the collect call for the details of your event
  • Check the hit type and your event details; I’ve blocked out some information from displaying in my screenshot for data-sensitive reasons

You should check the following are positive when setting up a new event:

  • Is the ’Tracking Id/Web property ID’ correct? (in the ‘General Section’)
  • Is the event only being fired once?
  • Are the pageview and any other events on that page still working?
  • Is the event firing only if the form is validated?

If you couldn’t locate your event call then check the common issues listed below to try to fix your event.

Common Issues with form tracking

1)      Is the ‘‘gtm.formSubmit’’ event in the dataLayer?

 form submit event dataLayer

 

On the page where you submitted the form, if you don’t see the ‘‘gtm.formSubmit’’ event being fired into the dataLayer then GTM is having problems identifying a form submission. Read more about the cause of this in this section.

When you see the ‘‘gtm.formSubmit’’ event but not your GA event, this is usually because your tag didn’t meet its trigger conditions.

When you select the dataLayer item, you’ll see the values of the element that triggered the event:

 datalayer values

 If you’ve used the ‘Form ID’ variable, you’ll want to check that ‘gtm.elementId’ is the same as what your ‘Form ID’ trigger condition is set to.

Double check every aspect of your trigger conditions:

  • Is the page correct?
  • Are the ‘Fire On ‘conditions correct?
  • If you de-select ’Check Validation’ does the form event fire?

GTM and form submission problems

This can be a tricky problem to understand if you don’t have any coding experience - I’ve tried to break it down into small parts that are easy to digest.

In this explanation we will talk about the DOM; which is simply the structure of HTML elements on your page.

How does GTM’s form submit listener work?

GTM’s form submit listener is built to detect forms firing a submit event, it then pushes the ‘gtm.formSubmit’ event to the dataLayer.

If this doesn’t work when your form is submitted, it is generally because other code on the page is also ‘listening’ for the form event and is firing code that prevents GTM’s listener from working.

Why does this occur?

When an event occurs on a page, like a form submission, it moves up the elements of the DOM, allowing any listeners attached to each element to fire.

GTM listeners sit at the top of the DOM tree, they are the last to be reached and code that is listening on elements further down the tree can interrupt the flow of events by using bad practices in the code that stops event propagation.                                                             

Using a dataLayer event for form submissions

If you don’t have a technical background it can be difficult to provide the detail to justify to developers you need code changes that fix event propagation. Changing how form code is working may not even be a feasible option if there is limited development time available for your tracking requirements.

If you’re unfamiliar with JavaScript, this can also be a solution for retrieving specific form values without setting up custom variables in GTM using JavaScript code.

Step 1 – Instructions for developers

Ensure the instructions are specific - provide a link to the page the form is on. Here are some example instructions:

*******************

** On XXXX Page

** When X Form is successfully submitted

** Where {OPTION_VALUE} is the value in the select drop down “Name of drop down”

** Fire the following javascript code

***********************

<script>

dataLayer.push({'event':'formA', 'formOption':'{OPTION_VALUE}'});

</script>

Note: Ensure you have declared the dataLayer before the GTM container and make sure to only ever use the push method to add key-value pairs to the dataLayer.

You can replace formA and {OPTION_VALUE} with more meaningful names.

Step 2 – Set up dataLayer variables

You need to ensure any dataLayer values you want to use in the GTM interface are set up as a Data layer variable, I’ve used the ‘formOption’ as an example below:

 datalayer variable

You can then reference the variable in your tag and trigger settings.

Step 3 – Set up trigger

 datalayer trigger

  • Select ‘Custom Event’
  • Use the ‘Event name’ firing into the dataLayer

Step  4 - Set up tag

 datalayer event tag

  • Use a tag type of event
  • Use the {{formOption}} variable as the event Label to send this data to GA
  • Select the trigger set up in step 4

Conclusion

Form tracking can be more challenging to setup, and trickier to debug. We hope the walkthrough and common problems in this post has helped you set up your own form tracking. Let us know in the comments if you are having trouble with your setup.

Part Four

Don’t forget to come back for part four, where we will cover ecommerce and enhanced ecommerce setup. If you’d like to be notified when part four is released, follow us on twitter.

Do you need help setting up customised form tracking solutions in Google Tag Manager? Contact our insight team or call us on 0843 634 1069 to find out more, or check out our Google Tag Manager training course

 


Share this post


comments powered by Disqus