I’ve recently been doing the Google Tag Manager Masterclass on analyticsmania.com. One of my favourite lessons was form tracking using the element visibility trigger. It was important for me because I actually had a client who wanted to track a form but I couldn’t do it using the default method.
There are many methods of tracking forms and if you are lucky, you might just be able to use GTM’s default variables. If the form doesn’t use Ajax, it doesn’t show a thank you page or success message, your last resort might be element visibility.
I will to use the form on this page:
to show how to track a form using element visibility.
First you will need to download the Chrome extension “Tag Manager Injector”. This will allow you to inject GTM container tags into web pages in Chrome. To do this, you will need your GTM container ID.
Once you have set up Tag Manager Injector, you will need to view the form in preview and debug mode.
When we enter an email and press submit the page does not reload or redirect to another page. In preview and debug mode we can see there’s no Ajax complete event or gtm.form submit, see below.
Now we have to look under the hood to find an alternative method of tracking.
Right-click over the thank-you message and select “inspect”. We need to find an id or class that we can use in a trigger.
As you can see below, we have a class “thanks” that we could use:
<p class=”thanks” style=”display: block;”>Thank you for subscribing.</p>
The first thing you need to do is to go into GTM and check that all the default form variables are selected.
Click on “Variables” in the left navigation and then select configure.
Next we need to create a trigger but selecting “Triggers” in the left navigation and then click “Trigger Configuration” to edit the trigger.
In “Choose Trigger Type”, select “Element Visibility”, as shown below.
Now back in the main part of the trigger you will need to change “Selection method” from id to class.
In the “Element selector” enter “.thanks”. The full stop before the class name is critical and unfortunately it’s easy to forget to add it in. You should also know that the element selector is case sensitive.
Finally, you need to select “Observe Dom Changes”. This will track the matching element that appears as the DOM changes.
We need this because the element visibility trigger’s default is to fire when someone scrolls. However, as we saw the thank-you message appears without the page scrolling.
Your trigger should now look like this:
With the trigger now complete we need to refresh the container and form page and then fill out the form again to see if the gtm.elementVisibility event gets fired.
If you are successful, you should see the following:
So far we have added the variables and the trigger. Next we need to create a Google Analytics event tag that fires an event when someone fills in the form.
Select “Tags” in the left navigation and then click “Tag Configuration” to edit the trigger.
Select Universal Analytics as the tag type.
Back in the main tag page “Track type” should be an “Event”. Give your event the relevant category, action and label names. You can learn about this in more depth here if you don’t know much about events in Google Analytics.
In the Google Analytics settings you add your UA number or preferably a user defined variable which you have previously setup containing the UA number.
Whilst still in the tag scroll down to the final section of the page saying “Trigger”. We need to add the trigger we created earlier on.
Save the tag and then refresh the GTM container.
Fill out the form again. If you are successful you will see an event fire as shown below.
Just to double check we can go into Google Analytics and view the event in the “Real Time” report, as shown below.