Using Element Visibility Trigger in Google Tag Manager for Form Tracking
This article will go beyond scroll tracking limitations and show you two common use cases using element visibility triggers in GTM.
Have you ever come to a stage where you realise scroll trigger in GTM is great, but they are just not enough and sometimes too generic for you to receive a specific signal before you fire off some measurement? If you are nodding your head right now, you've come to the right place because I feel the same too. And two of the use cases I face a lot are tracking the hard-to-track form submission and the automated error report, where I'll dive deep into the details now.
Hard-to-track Form Submission
Different websites have their ways to build out forms. Of course, you can use the form submission trigger for the built-in form, and everything seems so easy, right? What if a built-in form is not an option, and you have to embed a third party form to the site for various reasons? What if your submitting form comes with a thank you message instead of the thank you page URL?
By using the Element Visibility trigger type, it can solve your What If questions.
First thing first, head to your GTM > create a new trigger> select element trigger as your trigger type > select CSS selector for selection method ( CSS selector in most cases is the easier one to use, but you can also switch to ID). You can check out this resource for more references about CSS & ID, for example. is for CSS class and # is for ID etc.
To specify your CSS selector that matches your form elements, you can always right-click and inspect "thank you text" after someone successfully submit the form.
Once you find the specific CSS element you want to fire trigger, click copy and select Copy Selector from the copy dropdown. *This is a quick and dirty way of finding the Element Selector.
Now, you drill down to when to fire this trigger, and you've got three options:
- Once per page: The event will only occur when the script loads in the GTM’s container, but it may take multiple elements on a given page to activate the event if the elements are matched by the ID or CSS selector.
- Once per element: The trigger will only fire once when the particular element shows up.
- Every time an element appears on screen: The trigger will fire every time a matched element becomes visible.
So, in this case, selecting once per page will be perfectly fine for what we want to do.
In the advanced option, you have additional things like showing how much the selected element must be visible; set this up to 100%, so your element is fully visible in the viewer's browser.
There is the minimum on-screen duration where you can give the time input or/and select observe DOM changes. It enables the trigger to track matched elements that appear as the DOM changes.
And there, you have the option if you want this trigger to happen on a specific page or have it do it every single time. I will select a particular page with a page URL for this case since I have a particular form that I would like to track.
Remember to name it EV -Your Form Name and save it.
So, now you can create a tag for Universal Analytics ( UA) or Google Analytics 4 (GA4).
If you are using UA, don't forget to set up a goal in UA after submitting a tag.
Select your tag type as GA -UA and set Category as Contact Form, Action {{Page URL}}, Label Success, GA settings with the variables and last, select the Triggering as you have set up. And again, don't forget to name your tag as GA-Event-Contact Form-Success.
If you are using GA 4, this is what your set-up is going to look like. Your parameter value has to be the same as what you fire in the trigger. In addition, you don't require to set up a goal in GA 4 because the event becomes a default feature in GA 4, and it will automatically catch what has been built in GTM. You can check out this blog post for more.
For the GA settings, it should be as follow:
Select your tag type as GA4 -Event and set Event name as contact_success, add a parameter row > Parameter Name Contact > Value {{Page URL}} and last, select the Triggering. Name your tag as GA 4 -Event-Contact Form-Success.
Once you are done, hit save and submit the tag for preview.
Automated error reporting
You may have come across the experience of an error when trying to submit the form; for example, someone clicked on send button without a required field input completed, and it will show an error message ( *the field is required) popping out.
You can do almost everything you learned from above, except copying the relevant Selector ( the field is required) with the exact trigger steps. Name this as EV -Your Form-Error.
Then duplicate the tag you had named with GA-Event-Contact Form-Success.
Change the name to GA-Event-Contact Form-Error and update the triggering EV -Your Form-Error.
You may have also found the situation for your eCommerce site when you hit a payment button, i.e. Pay with Credit Card and the billing form revealing.
Undoubtedly, the exact steps you learnt above- inspect and copy the revealing form with its Selector. Copy your previous trigger because you would want everything except for the Selector, and change the trigger here as EV-Order Form-Reveal and paste the Selector. Hit save.
For your tag, you can duplicate the tag you created and duplicate the name to the GA-Order form reveal and except for this.
Remember, after these hard works, TBV- Test but verify.
Afterthought
Just having some thought after experiencing innumerable failure implementation, and I wanted to share with you what the limitations of the triggers are. Element visibility and form submission trigger type are relatively good tracking measurements for any of the forms, but there are two conditions you must fulfil before using these triggers:
- You got a static CSS selector along with the form. Suppose you use a website builder, i.e. Wix, that provides you with a dynamic CSS selector, which means the Selector will change every time the form is submitted. In that case, Element visibility is of no use with it.
- It must be a built-in form with the form submission trigger type. If you embed the form via iframe, the form submission trigger is no way to go, and you might want to try the Element visibility to get this running.
What if these requirements couldn't be fulfilled?
- Try setting up a redirect thank you page
- otherwise, try the button click for the form submission, but this might not be an accurate count since people could click on the submit button without inputting their details.
Hope this is helpful for you!
