Track Datalayer Enabled Forms in Google Analytics 4 - Step by Step Guide
Behind every Patek Phillip dial, there can be more than a thousand components that may take up to two years to create and assemble. No doubt collectors wait for years to lay their hands on these exquisite timepieces.
It is the complexity of the mechanism behind the dial that decides the price tag and when it comes to websites, the value lies behind what we see on the screens.
Do you know that there is a powerful layer on your website that gives an immense amount of power in the collection of data?
Yes, it is called Data Layer
But what exactly data layer is? You should know the data layer from the context of its importance in business strategy.
What is the Data layer?
If you are a nontech user then read this:
- If you want to track additional information which is important for your business then you must need to utilize the data layer on the website.
- It is a virtual layer between your website and tag management system e.g. Google Tag Manager.
- It is a layer where all the data generated by a website on actions performed by visitors/users on certain events gets stored.
How to track data layer form with Google Tag Manager
Plugin/Prebuilt/No code Forms
There are many platforms that provide prebuilt / plugins of forms that can be easily installed on a website, for example,
- WordPress CMS: Contact form 7, WP form, Gravity form, Ninja form, Jetpack contact form Etc
- Hubspot: Hubspot forms
- Adobe / Marketo: Marketo forms
- Salesforce: Pardot forms
- Drupal: Drupal web forms
- Acuity scheduling forms
- Mailchimps forms
- Uberflip forms
And there are many other platforms/Content management systems that provided inbuilt / pre-built forms.
If you are using such forms then event listener needs to be implemented on your website using google tag manager.
Below is a sample code snippet with an event listener:
Above event listener is calling on form submit, the <form> element has id = test_form.
Adding listener and enabling data layer on website for this form requires technical knowledge of Java script and somewhat of coding knowledge.
Go through in detail and Check the example of WordPress Contact Form 7 here -Track WordPress Contact form 7 with Google Tag Manager.
A sample data layer with event listener for WordPress Contact form 7:
In most of the forms which are described in the above list, you have to follow instructions and steps as described in the ‘Track WordPress contact form 7 with google Tag Manager’.
When you or your programmer does coding and make a form on the website and you are not using any plugin or no code form setup or any other embedded code then it is called form.
You or your developer need to add a data layer in this code base, for example:
The above snippet code is adding event listener on the event ‘submit’ which is a standard DOM event. There are other ways to implement the same thing! it always depends upon your or the programmer’s logic implementation.
How to track custom form with data layer in Google analytics 4
After injecting/adding the above event listener in the code you need to perform below:
Step 1: Create Custom Event trigger
- Select Custom Event trigger from the trigger type.
- Enter the event name same as mentioned in the data layer value of ‘event’
- Select all custom event
- Click on save.
Step 2: Create Data layer variable
- Go to a user-defined variable.
- Select the ‘data layer variable’ type
- Enter data layer variable name (for this example, enter form_id)
- Click on save
Step 3: Create Configuration tag
Give a name of tag > Choose Tag type > Select ‘Google Analytics: GA4 Configuration’ Tag
Enter Google Analytics 4 Measurement ID
Click on ‘Choose a trigger to make this tag fire…’ and select ‘All Pages’ Trigger
Step 4: Create GA4 Event Tag
- Select the GA4 Event tag from the type of the tag
- Select the configuration tag from the drop-down list
- Enter the event name as you like which should be meaningful
- Add event parameter ( in this example select form Id data variable )
- Set custom event trigger.
Step 5: Preview and debug
Go to the Tag dashboard and Click “Preview”
Enter your website and click on ‘connect’
Step 6: Perform action (submit a form) on the website
Step 7: Check whether the tag fired or not in the tag assistant
Step 8: Check in Google Analytics 4
- Go To admin
- Select the event and check the event parameters
Track Form submission of Data layer enabled form 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 Website of Tagmate
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!
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 a new by Click on “Add New”
Step 4: Start/Launch a project
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 “Form implemented with data layer ” > Click on “select” Or “Push”
Step 10: Configure the event name
Step 11: Provide trigger condition and click on push to GTM
Preview container to check tag
As you did in the ‘How to track custom form with data layer in Google analytics 4’ above from step 5 to step 8, just start preview mode and check into Google Analytics 4
it is very clear that tracking data layer enabled form with help of Tagmate is very easy and you might not need to do further coding or complex configuration in google tag manager.
Setting up tracking for data layer-enabled forms with the help of the regular Google Tag Manager-based manual method can take up to three hours if you get an expert to do it. On the other hand, Tagmate helps you do it within 30 minutes even if you don’t have a command over analytics.
Want to do more with less? Try Tagmate!