😵 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

Create 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

Important Tip
‍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?

‍

Wrap Up

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!