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:

‍

document.querySelector('#test_form').addEventListener('submit', function(e){}

‍

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:

‍

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 window.dataLayer.push({
 "event" : "cf7submission",
 "formId" : event.detail.contactFormId,
 "response" : event.detail.inputs
 })
}); 
</script>

‍

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’.

Custom Forms

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.

Most of such forms are made using HTML, CSS, and JavaScript. A typical form code snippet looks like below:

‍

<form action="submit-form.php" id="test_form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" ><br>
  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea><br>
  <input type="submit" value="Submit">
</form>

‍

You or your developer need to add a data layer in this code base, for example:

‍

document.querySelector('#test_form').addEventListener('submit', function(e){
	window.dataLayer = window.dataLayer || [];
	window.dataLayer.push({
		'event':'form_submit_test',
		'form_id': '123'
	}) 
})

‍

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

Create 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.

Conclusion

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!

‍