Analytics

If you are looking for an easy way to set up event tracking to monitor conversions on your website, you might want to consider using Google Tag Manager.

In this post I’ll explain Google Tag Manager, let you know how to install it, and describe how to set up form event tracking on your site.

Google Tag Manager GTM V2

What is Google Tag Manager?

Google Tag Manager (GTM) is a free tool that makes it easier for webmasters and marketers to add and update website tags. There are many ways to use GTM, but most businesses use it for event tracking as a means of measuring the success of their digital marketing strategy. For a more in-depth explanation of GTM, check out our introductory blog post.

Why Use GTM for Event Tracking?

GTM gives you full control of your event tags. You can add them to your site without having to ask your developer to do any hard coding. This will free up their time to work on other critical projects.

GTM also allows you to amend and test your event tracking yourself, which obviously makes the process much simpler.

In addition, we are seeing an increasing number of websites where the forms are created using JavaScript. These sites do not use destination URLs, which means you can’t use simple goals in Analytics. In order to future-proof the management of your website, it is a good idea to consider getting to grips with GTM.

Installing GTM

Installing GTM is very similar to setting up Google Analytics:

  1. Log in to Google Tag Manager using your Google account – ideally the same one you use for Analytics. Then follow the steps on screen:
    Google Tag Manager create an account

    Create an account on Google Tag Manager

     

  2. Read and accept the terms and conditions. You will then be given the installation code. You will need to add this code to every page of your site, immediately after the opening <body> tag. If you cannot do this yourself, your developer should be able to help:

    Google Tag Manager code

    Paste the GTM code on to every page of your website

That’s it. You’ve set up a Tag Manager container on your site. This container will eventually hold all of the tags you create in the GTM dashboard.

I will now describe how to set up event tracking using GTM. For this, you will need to enable several built-in variables within pages, clicks, and forms. These are not enabled by default when you set up GTM. So before we begin, navigate to variables and check the following options:

built-in variables tag manager

Form Event Tracking

Form submission tracking allows you to monitor when visitors submit a form on your website. This could be a contact form on your contact us page, or an enquiry form in the footer of the page. Almost every website has a form, so this is a good way to get to grips with Tag Manager.

It’s relatively easy to set up event tracking using GTM, as you can use tags that are already built in to the GTM interface. A basic knowledge of HTML code is useful, but this guide will explain everything you need to know.

Don’t worry, it’s impossible to break your website using Tag Manager, and you can test everything before pushing your tags live.

Let’s do this!

Step 1 — Identify URL

Make note of the URL your form is on:

hallam internet google tag manager

If you have a form on more than one page, for example an enquiry form in the footer, you just need to know the domain. In this instance, we’re using hallaminternet.com.

Step 2 — Identify Form ID

Find the form ID for the submit button. If you’re using Google Chrome or Firefox, you can do this through right clicking on the form and selecting ‘inspect element’. You need to look for the ‘id’ attribute in the <form>. Here’s an example of what this might look like:

form id inspect element

Tip: Hitting ctrl + f within inspector allows you to search for things.

Note: If there is no unique ID for your form, you may need to ask your developer to add one. However, if your website is using a form plugin such as contact form 7 for WordPress, you can add an id yourself.

Step 3 — Create a Trigger

In GTM, create a new trigger and give it a title that will make it easy to identify later. Something like ‘enquiry form submit’ or ‘contact page form submit’ will do.

Under choose event, select form submission:

enquiry form submit trigger

Click continue and then check ‘Wait for Tags’ and ‘Check Validation’ to ensure your trigger fires for successful (valid) form submissions:

validate form submissions event tracking

Click continue and enter the URL path you noted earlier:

enable trigger page url contains page path

If your form is on several pages, you can set up your trigger to fire on pages that contain your domain:

enable trigger google tag manager

Click continue and then select ‘Some forms’:

fire on triggers gtm

To finalise your Trigger, add the Form ID you noted earlier (don’t use my form ID!):

fire on form id event tracking

You have now specified the conditions require for your Trigger to fire. Next, we’re going to create a tag.

Step 4 — Create a Tag

Create a new Universal Analytics tag. This tag will send the event information to Google Analytics. Again, make sure to give it a memorable name:

create tag event tracking google tag manager

Add your Google Analytics tracking ID in the next field:

configure tag gtm

Then fill in the track type as an event, and determine your tracking parameters for category and label:

tracking parameters google tag manager

If you are setting this up for a form that’s found on several pages, as I am in this example, click the box on the right of label and select {{Page Path}} from the drop down menu. This will ensure that you can see which page the form submit event was triggered from in your Analytics event reports:

event label page path

 

Under ‘Non-Interaction Hit’, you can either select true or false. Non-interaction hit is a parameter that allows you to decide whether or not the event being triggered affects metrics such as your bounce rate. For example, if you have a page where a video autoplays, you would want to select ‘true’. Otherwise, everyone who lands on that page would trigger an event, and the bounce rate would be zero.

For form submission tracking, I recommend selecting ‘false’ – particularly if the form you are tracking is on a landing page where the visitor sees all the information they need and fills in your enquiry form. After all, even if they don’t view another page on your website, they have interacted and completed the desired action, so it should be an interaction hit:

non-interaction hit parameter google tag manager

Next, click continue and select ‘more’ under ‘fire on’. Select ‘form’ and then navigate to the trigger you created earlier:

choose trigger for tag google tag manager

Click ‘create tag’, and your finished tag will look something like this:

form submit tag complete google tag manager

Step 5 — Test

Head to the preview and debug mode to test whether your new event tracking is working:

preview and debug mode google tag manager

In the same browser, open a new tab and navigate to your website, where Tag Manager will open debug mode for you. From here you can preview your container and it will tell you which tags have or have not been fired on your page:

debug and preview GTM

In the example above, none of these tags have fired on my page, including my enquiry form submissions. Now I can test the form directly on the page and see if the correct tag moves to ‘tags fired on this page’:

tags fired debug mode testing

Step 6 — Publish

Once you have tested that your tag works, head back to the GTM dashboard and publish your version. Remember, you can rename versions and revert back to versions if the next version doesn’t quite work out:

publish version google tag manager

Ta-da — your new event tracking tag and trigger is now live.

Form optimisation

You may want to improve the forms on your site to increase your conversions. You could use GTM to track each form field to find out what needs to be tested and improved. Alternatively, you could use a service such as Hotjar to give you useful funnel analysis for conversion rate optimisation.

Conclusion

If you want to improve efficiency and remove testing headaches when it comes to setting up event tracking, I would thoroughly recommend using Google Tag Manager.

I’ve found that when developers are busy working on bigger ongoing projects on a website, they appreciate this decision as it frees up their time. At an entry level, you can use the built-in tags within Tag Manager and the version control and debug mode features enable you to test everything yourself.

If you have used Google Tag Manager to implement form event tracking using this guide, we’d love to hear about it in the comments below. Alternatively, reach out to me on Twitter @Digital_Kym.

2 responses to “Form event tracking with Google Tag Manager”

  1. Mat Satler says:

    What about if i want only to fire the gtm.formSubmit on successful submits such as when visitors arrive to thank you page?

Leave a Reply