Tracking form submissions is a crucial part of understanding how users interact with your website. It helps you measure engagement, optimize your forms and improve overall user experience. Google Tag Manager (GTM) makes this process much easier with its Element Visibility Trigger, a powerful tool that detects when specific elements become visible in the user’s viewport.
This feature is especially useful for tracking form submissions that show a confirmation message directly on the same page, rather than redirecting to a new URL or triggering a pop-up. In these situations, traditional tracking methods often fall short because there’s no new page URL or event to capture. Instead, the confirmation message is dynamically loaded within the same DOM structure, and GTM’s Element Visibility Trigger allows you to track this type of interaction seamlessly. It’s an effective and straightforward solution to ensure you’re capturing these valuable user actions on your site.
So how to setup form tracking through element visibility trigger in Google Tag Manager? Read on to understand the steps involved:
Identify the confirmation element
The very first step is to determine which CSS element we can use to track the form. This element must appear only when the confirmation message is displayed after a successful form submission.
Browse to the form you want to track and submit it. Once the confirmation message comes up, open your browser’s Developer Tools to inspect the message. It will have a unique identifier, such as a CSS selector or ID, which we can use to track when it becomes visibile. Note that identifier for now. In this case, we can see it a CSS selector named ‘et-pb-contact-message’. That’s good enough for us to have the trigger set up!
Create the element visibility trigger in GTM
The next step is creating a new trigger, and associating it with the trigger type ‘Element Visibility’:
Our unique identifier when the confirmation message comes up on the screen is a CSS Selector, so let’s select that and enter the identifier name in the Element Selector box. In this case, I’ve entered it as ‘.et-pb-contact-message’ – note the ‘.’ prefix that is being used for selector class. If you instead wish to input an ID, prefix it with a ‘#’.
Choose to fire this trigger ‘every time an element appears on screen’ as we want it to get triggered when the confirmation message gets displayed. I’ve often read people suggest 100% minimum visibility before the trigger gets fired (so as to ensure it has fully loaded), however I feel like that’s pretty moot. Our confirmation message is only going to load on successful submission – so waiting for it to get ‘fully loaded’ doesn’t really make a difference.
Lastly, I’ve chosen to observe DOM changes so that the message/ element does not get missed. And considering our selector is a unique one, we are not in danger of affecting the site performance by having the DOM observed for this particular change.
Now, let’s move on to how to have a tag associated with this trigger that sends submission data over to Google Analytics every time a form is successfully submitted.
Create a GA4 event tag to capture the event
Create a new tag and choose Google Analytics -> Event tag as the tag type. Link it to the measurement ID of your GA4 account and name the event as per your liking (I chose to name it as ‘cform_submit’ to keep it simple). This event name would get reflected in GA4 event report, so make sure it’s a unique one. Attach the Element Visibility trigger we built earlier to this tag, and that’s it.
Test and publish
Time to test our tracking setup! Open up the Preview mode and enter your website. If you try to submit the form we have set up this tracking for, below is what you should see on successful form submission (after the confirmation message gets displayed):
You can also cross-verify this by checking the same over in GA4 DebugView. Below is what I see for this submission:
As you can see, the event ‘cform_submit’ is flowing into GA4 now (the page location shows our GTM debug URL so as to prove that it is the same event that we submitted in the Preview mode).
We’re all set!
Benefits of form tracking through element visibility trigger
1. No dependency on redirects
The element visibility trigger is perfect for modern forms that don’t redirect users after submission. Whether you’re dealing with a simple subscription form or a complex checkout process, you can track submissions seamlessly without the need for outdated methods.
2. Accurate tracking every time
Say goodbye to false positives! As it works by detecting the appearance of unique idenitifiers such as a thank-you message or confirmation box, it ensures only successful form submissions are recorded.
3. Flexibility across platforms
One of the best features of the element visibility trigger is its versatility. It can be applied to a wide range of forms, confirmation elements and even different website structures. This trigger can be adapted effortlessly to track exactly what you need, no matter the complexity of your setup.
Quick Questions:
Can element visibility trigger work for multi-page forms?
Yes, the element visibility method can actually be used for multi-step forms as long as there is a confirmation message getting displayed at successful form submission. This message has a unique class/ ID associated whose visibility can be tracked through this trigger. As this message won’t come up during the form steps, there is no room for error that false submissions might get recorded.
I can’t find any unique identifier ID/ class for the confirmation message. What should I do now?
It is extremely rare for there to be no uniquely associated identifier if a confirmation message is showing up on the same page without redirect. I would suggest to go back into Developer Tools and recheck if you can find anything. If you’re still seeing a blank, it might make more sense to try other form tracking methods – I’ll try to cover these in a tutorial soon. In the meantime, if you are using Contact Form 7, here’s how to implement Contact Form 7 tracking through GTM.
Can the unique identifier be anything other than a CSS class or ID?
No, the identifier has to be one of the two if you wish to use the inbuilt element visibility trigger. The point is, ‘element’ here means a CSS element, so there’s no replacing it with a variable or action.
—
Hope this helped! Leave a comment below if you run into any road block or are still unsure how to go about implementing any step of form tracking through element visibility trigger.
0 Comments