.png)
How to track website form submissions with GA4 and GTM.
A web form is an integral part of your website. It lets you collect valuable information about your website visitors.
Businesses call it a Lead Generation form as it filters out prospects from casual visitors. Here’s how much companies value it :
74% of the companies use website forms for lead generation. Of these, almost 50% say that forms are their highest lead generation point.
96% of the B2B business owners say that Email is the most effective and important form of a field in their contact form.
But how do these businesses analyze the worth of a lead form?
How do they gather insights like :
- 77% of the buyers abandon checkout forms.
- Forms with drop-down form fields have high abandonment rates.
- 27% of people abandon the form due to its length.
- Limiting the number of form fields to three can reduce form abandonment rates.
By tracking the form data and analyzing it to arrive at groundbreaking insights.
Interesting! Right?
But tracking a form is an arduous task!
Don’t panic. It’s not as taxing as it seems.
We’ll take you through 3 ways to track forms, from the most difficult one to the least.
Fasten your seatbelts. And here we go…
Ways to Track Forms
- Using Google Analytics (GA)
- Using Google Tag Manager (GTM)
- Through Tagmate App
Let’s see how to track a form with GA.
1.) Track Forms with Google Analytics (GA)
💡 GA will not track field data but just report conversions.
Follow the steps below :
Step 1: Sign in to your GA account.
Step 2: Click on the left navigation panel and click on ‘Admin’ at the bottom.
Step 3: Under the 'View’ header, click on ‘Goals’.
Step 4: Click on the red coloured button named ‘New Goals’.
Step 5: Under ‘Goal description’, enter :
- Name of the goal
- Select type as ‘destination’
- Click on ‘Continue’
Step 6: Enter the URL of your thank you page and click on ‘Save’.
Done!
Now, you can see a goal created in GA, as one shown below:
For viewing the data, Click on the left panel.
Under the ‘Reports’ header, click on Real Time > Conversions > Goals > Goal URLs
To track a form using GA, you may need some basic knowledge of JavaScript (gtag.js). If you don’t have coding expertise, tracking forms through GA is difficult.
Also, as mentioned earlier, GA cannot track field data.
To track field data and analyze form fields, you need to install Google Tag Manager (GTM).
GTM acts as a middleman between the source code and GA. It enables you to add, delete and modify GA tags without disturbing the source code. So, you don't need to be a coding-master to work with GTM.
But working on GTM could feel taxing if you are not adept at it.
Read on to learn how to track forms using GTM.
2.) Track Forms with Google Tag Manager (GTM)
With GTM, you can track different types of forms :
- Default form using form submit event
- WordPress Contact form 7
- Thank You page on form submission
- Element visibility on form submission
- Form using data layer
Here, we will go through the steps to create ‘Default form using form submit event’.
Follow the steps below :
Step 1: Sign in to your GTM account.
(If you don’t have a GTM account, create one from HERE)
Step 2: Open ‘Default Workspace’.
Step 3: On the left panel, click on ‘Trigger’ and then ‘New’.
Step 4: On the top-left corner, enter the name of the form (here we have named it ‘Form-contact us’). Click on the white space which is at the center of the screen.
Step 5: On the right panel, click ‘Form submission’.
Step 6: On the top-right corner, click on ‘Save’.
Step 7: On the left navigation panel, click on ‘Variables’. Then click on ‘Configure’ at the top-right corner. Check all the forms as shown below.
Step 8: Click on the ‘Preview’ button at the top-right corner to start the preview mode.
Important Tip:
Before starting the Preview mode, insert the GTM container code in your website’s HTML file after the <Head> element. Watch how to do this.
Step 9: Enter your website URL and click on ‘Connect’.
Step 10: Click on ‘Continue’ in the same window.
Step 11: Go to your website (which will be in test mode) and submit the form with dummy data.
Note: A box named ‘Tag Assistant’ will appear when you are in test mode.
Step 12: Go to Tag Assistant. On the left navigation panel, click on ‘Form Submit’.
Look for ‘Form ID’. Copy the text in the ‘Value’ column.
Note: The text can be different. Here it is ‘test_form’.
Step 13: Go back to GTM and change the trigger.
- Go back to the GTM Account. Open the Default Workspace.
- Click on the form that you created in Step 4 (here we have named it ‘Form-contact us’).
- Select ‘Some Forms’ under the header ‘This trigger fires on’.
- Below you would see two dropdown lists. Select ‘Form ID’ from the first dropdown. Select ‘equals’ from the second dropdown. In the third column, paste the value which you copied in Step 13.
- Click on the ‘Save’ button at the top-right corner.
Step 14: Create a new tag
On the left navigation panel, click on ‘Tags’. Now, click on ‘New’ as shown below.
Step 15: Select a "UA tag".
Step 16: Configure UA tag
- Select ‘Event’ from the dropdown list which is under the header ‘Track Type’.
- Enter ‘Form Submit’ in Category. Enter ‘Contact us’ in Action.
- Select ‘Enable overriding settings in this tag’.
- Paste your UA Property ID in the ‘Tracking ID’ field.
How to get a UA ID?
Step 17: Choose trigger
Select the trigger you created in Step 17.
Step 18: Click on the ‘Save’ button on the top-right corner.
Step 19: Test the tag again.
Repeat Steps 9 to 13.
Step 20: In Tag Assistant, check if the tag has been fired.
Step 21: Check it in Google Analytics.
Under the ‘Reports’ header, click on Real Time → Events.
You will see the form created as shown in the image below.
If you are finding tracking forms through GTM cumbersome, we have an easier solution for you.
This method doesn’t require you to have a coding background. The only pre-requisite is a basic understanding of GA, GTM and a Tagmate account.
But what is Tagmate?
Tagmate is a web-based tag management tool that accurately automates tag implementation, be it UA or GA4.
Tagmate can track your forms in just a few clicks, thus saving you valuable time and development costs.
Let’s see how you can track your form using Tagmate.
Track Forms with Tagmate
Let’s track the same form using Tagmate which is mentioned in above method 2
Follow the steps below :
Step 1: Open Tagmate
Step 2: Select a GTM Account or add new if you don’t have one.
Step 3: Push to GTM
- On the left navigation panel, click on ‘Templates’.
- Click on the ‘Form Submission’ header visible at the center of the screen.
- You could see a template named ‘Form Tracking’.
- Click on the ‘Push to GTM’ button.
Step 4: Select ‘Default Form Submit’ template by clicking on ‘Select Method’.
Step 5: Enter form name
Enter your Form Name. Click on the ‘Next’ button at the bottom-right corner.
Step 6: Provide Triggering Condition
Enter the triggering conditions and then click on the ‘Push to GTM’ button on the top-right corner.
Step 7: Check the tag in GTM
Step 8: Start the preview mode
Repeat Steps 9 to 13 of method number 2.
Step 9: Check it in GA4
And Done!
Within just a few clicks, you’ve created a tag to track forms.
Interesting! Isn’t it?
Well, that’s not the only superpower Tagmate has!
With Tagmate, you will soon be able to monitor your tags 24/7.
Anddd not only this, but you can even track custom events like Log In, Sign Up, Promo Banners, and many more. Tagmate comes with 40+ pre-built industry templates like the one you saw for Form Tracking.
Tagmate supports both GA4 and UA. There is a module in Tagmate, just for UA to GA4 tag-migration as well. This has helped enterprises like Angel One to migrate their tagging setup accurately and efficiently while saving time and costs by an order of magnitude.
On top of that, Tagmate can also track Google Ads and FB Ads Marketing Pixels. Now you can concentrate on strategizing marketing campaigns and let Tagmate handle the laborious task of tracking pixels.
So, if you would like to save development time and ensure accurate tag management, do give Tagmate a try.
Hope this guide will help you track forms on your website.
