Track Form Submissions With Element Visibility In Google Analytics 4: Step-By-Step Guide
😵 I know we need to track every form on our website but this one is making me go bonkers! What do I do?
All of us know that we must track every web form on our website but some forms just aren’t built for tracking.
They don’t redirect the user to a thank you page.
They can’t be tracked by the Google Tag Manager’s built-in form submission trigger.
Ajax Listener doesn’t help either.
Such forms require you to utilize the element visibility feature as they display a success message once the form is filled and submitted.
Today, I will help you track form submissions with element visibility in Google Analytics 4 in this actionable step-by-step guide.
We will discuss two different methods in this blog:
- Traditional Google Tag Manager way
- Tagmate way! ( No Code set up and fast way) 😲
Let’s get started:
What is Element Visibility type form submission?
Well, the above section makes it clear what an element visibility type form isn’t but let's have a look at what it is.
Do the below steps on your form:
- Submit the form.
- Check if the URL of the website is changed & if you get a success message on the same page. - If yes then it is element visibility. check the below action before and after submission of the form.
Does your web form behave like this?
If yes, you need to implement the element visibility method for form tracking. Track form submission on success message on the same page (element visibility ) using Google tag manager.
Form Submission using Google Tag Manager | Track Form submission of element visibility type using Google Tag Manager
Part 1: Create Container and set workspace in GTM
Step 1: Sign in to your Google Tag manager
If you do not have Google Tag Manager account then you can sign up with a new account using this link: Create a Google Tag Manager account.
Step 2: Create a container and select your workspace
If you do not know about workspace and container then please read: Add a new container to an existing account
Pro Tip: Create a new container and user 'Default Workspace'
and if you have already having container and workspace then skip this step.
Part 2: Configure Element Visibility Trigger
Step 3: Go to the website and submit the form
Step 4: Inspect the element by right-clicking on the element as described in step 3
Step 5: Right-click on the highlighted text and select ‘copy’ > ‘Copy Selector’
Step 6: Note down this Copy selector somewhere
Like I opened notepad and paste directly.
Step 7: Go to Google Tag Manager and create a new trigger
Click on Triggers from left navigation > Click on ‘New’
Step 8: Select ‘Element Visibility’ from the trigger type
Step 9: Configure element visibility trigger
- Chose selection method as CSS selector
- Paste that selector (copy from notepad as mentioned in step 6)
- Select ' Once per element trigger.
- Select 10% visibility in ‘minimum percentage visible’
- Checkmark on Observe DOM changes.
Meaning of the ‘when to fire trigger’ 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.
Pro Tip: We typically advise firing the Element Visibility trigger only once per element and setting the Minimum Percent Visible to 10% if you plan to utilize this trigger type.
Part 3: Tag Configuration
Step 1: Go to “Tags”
Go to Tags from the left navigation > Click on “ New”
Step 2: Create Configuration Tag
Give a name of tag > Choose Tag type > Select ‘Google Analytics: GA4 Configuration’ Tag
Step 3: Enter Measurement ID
Enter Google Analytics 4 Measurement ID
Step 4: Allocate Trigger to Tag
Click on ‘Choose a trigger to make this tag fire…’ and select ‘All Pages’ Trigger
Step 5: Save the Tag
Click on the ‘save’ button.
Step 6: Go to “Tags”
Click on Tags > Click on “New”
Step 7: Create the GA4 Event Tag
Enter Tag name > Click on “Choose a tag type to begin setup…”> Click on “ Google Analytics: GA4 Event”
Step 8: Configure the GA4 Event tag
8.1 Select configuration tag
8.2 Enter event name (Recommended to have '_' between two words)
Step 9: Allocate / Choose trigger in GA4 event tag
Click on “Click on ‘Choose a trigger to make this tag fire”
And choose the element visibility trigger which we have shown in part 2
Step 10: Save the “Tag”
Part 4: Preview tag
Step 1: Go to the Tag dashboard and Click "Preview".
Step 2: Enter your website and click on ‘connect’
Step 3: Submit the form on your website (tag assistant mode)
Step 4: Check whether the form submission tag is fired or not
Part 5: Check in Google Analytics 4
Step 1: Open your Google analytics and GA4 property > go to Admin
Step 2: Select Account > your GA4 Property
Step 3:Under Property go to > Debug view
Step 4: Check the form submit event and check the form name
Track Form Submission of element type using Tagmate in GA4
What is Tagmate?
Tagmate is a web tagging software. Tagmate enables the user to save development time and improves first-party data quality by automating the setup of analytics and marketing tags.
Learn More: Visit the Tagmate Website
Why you should track your form submission using Tagmate?
- It is a No Code/Low Code tagging solution using Google Tag Manager.
- It has pre-built tag templates according to your industry.
- Data accuracy and reduced human efforts.
- No need to understand the expert level of google tag manager!
- DIY tool and very easy workflow.
- Increase productivity and save tons of time and cost.
Let’s see step-by-step form submissions tracking using Tagmate!
Watch the video: How to track Form submission (Element Visibility) using Tagmate!
Step 1: Sign in with Your account
Step 2: Chose Google Analytics 4 project
Choose 'Set up GA4 Events w/wo your developer
Step 3: Select the GTM account OR Add new
Click on the “GTM Account” Option listed in the left navigation
Select GTM Account OR you can Add New by Click on “Add New”
Step 4: Start/Launch a project
- Dashboard> Click on 'Launch Project OR…
- Go to Project Option (left navigation) > Click the “Add new” button
Step 5: Create a Project
Learn more: Create a GA4 Project in Tagmate
Provide project name > Select Platform > Set GTM workspace 4> Enter Measurement ID > click
Step 6: Open your Tagmate app
Select the project > click “ Select”
Step 7: Click on “add new” on the dashboard
Step 8: Go to “Form Submission” > Click “Push to GTM”
Step 9: Select “Thank you page” > Click on “select ” Or “Push”
Step 10: Provide Form name
Step 11: Element Configuration
- Enter element selector
- Get the element selector using the method mentioned in the above method (GTM): Part 2 (Steps 3 to 6)
- Set trigger fires on
- Input the success message (few of the text)
Step 12: Set trigger condition & Click on ‘Push to GTM’
Step 13: Check the Tag in your GTM
Step 14 Star Preview mode
Before starting preview mode, makes sure that the GTM container code must be inserted in your website’s HTML file after <Head> element. Don’t know how to do this? Click here to learn more about it.
Step 15: Enter your website and click on ‘connect’
Step 16: Submit the form on your website (tag assistant mode)
Step 17: Check whether the form submission tag is fired or not
Step 18: Open your Google analytics and GA4 property > go to Admin
Step 19: Select Account > your GA4 Property
- Under Property go to > Debug view
Step 20: Check the form submit event and check the form name
The 2nd way seems to be easy and shorter right?
Element visibility-type trigger web forms are tough to track but you can always use Tagmate to simplify the process and focus on the more productive side of the work.
Comparing both methods, the Google Tag Manager-based conventional approach takes at least half an hour and as visible, it is complicated. With Tagmate, you can track form element visibility in Google Tag Manager in just five minutes with no skills at all but still, look (and deliver results) like a pro!
Watch the video: How to track Form submission (Element Visibility) using Tagmate!