Form tracking in Google Analytics 4

UPDATE: 1st May 2022. The update contains a new script to add a listener every time the form has been submitted.

In this post, I’m going to show you how to track a Form (Contact Form 7 for WordPress) with Google Analytics 4 and Google Tag Manager.

If you want to track the Lead of a user who fills out the Form on your website, firstly you must have created a new Property for GA4 and secondly created a tag in Google Tag Manager to pass the information to Analytics.

This is the path we’ll follow:

Table of content:
- Create a new tag
    - Choose an Event tag
    - Configuration tag
    - Choose the Event name
    - Define Event Parameters (optional)
    - Define User Properties (optional)
- Create the Custom HTML Tag for the Contact Form 7
- Create the Trigger
- Tag and trigger
- Test in Preview
- Create Custom Dimension in Google Analytics 4
- Create User Property in Google Analytics 4
- Publish the Container
- Data Visualization in GA4

---

Create a new tag

Choose an Event tag

First of all, we have to create a new tag in GTM.

Go to Tag > New > Google Analytics 4: Event.

Configuration Tag

In the Configuration tag box (A) we select the Google Analytics tag (you can read this post if you want to know how create the GA tag easily) in order to pass the information on our GA4 Property.

Choose the Event name

Now we need to give the Event a name. I suggest you not to type a random name, but you should follow the Google Official Guide.

Since we are tracking a fill out of a Form, so the user is generating a Lead, we’ll use the Event name ‘generate_lead’ as suggested by the Google team:

The reason why I suggest you use this name instead of a random one, is related to the continuos implementation of Google Analytics 4 and its reports. In the future, Google may develop reports to collect these event names and it will be easier for you to measure it, just because it will fit directly into the report.

At this point, our tag will look like this:

Define Event parameters (optional)

We can now add some event parameters.

With these we can collect additional information.

Let’s add several values as you can see below (B):

• Parameter name: lead_type
• Value: newsletter_subscription

Why enter event parameters? It is useful if we have different types of Form on our website. In this case could only have one event name (called “generate_lead”) and then several parameters that identify the type of Form, for example:

• Newsletter subscription form: we can enter a parameter value such as “newsletter_subscription”;
• Information request form: we can type the parameter value “information_subscription”;
• Estimate request form: we could insert the value “estimate_subscription”;

The choise of tag names and structure depends on your measurement plan.

Define User properties (optional)

The Event tag for GA4 gives us the possibility to add the user property.

If wi fill in this field, all the users who have filled out the Form, according to the rules we’ve inserted in the tag, will be recognized as subscribers of this type of lead.

Let’s type the following values (C):

• Property name: newsletter_subscriber
• Value: true

Create the Custom HTML Tag for the Contact Form 7

Since I’m tracking WordPress Contact Form 7, I’m going to insert a code snippet so that it can listen a successful Form submission.

The script is the following:

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

Copy the code and paste it into GTM, in a new tag: let’s go to Tag > New > Custom HTML:

Now let’s create the trigger: let’s create the DOM Ready trigger that will be activated when the page elements are available. This way, when the form is filled out, our listener will be ready to collect this information:

Our tag and trigger will appear like this:

It’s time to test the implementation. We have to open the Preview and fill the Form. If all works fine, we can find the event ‘cf7submission‘ in our data layer once the Form has been filled:

Create the trigger

Now we create the trigger for the GA4 tag.

Since we now have the ‘cf7submission‘ as event into the data layer we can use the Custom Event trigger.

Select the Custom Event trigger

Now insert the exact name of the event into the field and save:

Tag and Trigger

Here’s what the final result will look lik, i.e. our tag with its trigger:

Save it.

Test in Preview

Now we have to check if our tag and trigger fire correctly before publishing the container.

As described in the previous steps:

• Enable the Preview Mode;
• Connect our website to begin previewing our container;
• Fill in the Form and submit it;
• Check the Preview: if everything is correct, we’ll see the Tag that is activated (A), as soon as the Form has been pushed into the Data Layer(B);

Create Custom Dimension in Google Analytics 4

Now we’ve to create a new custom dimension in GA4, so that we can see the value of the parameter we previously put in our tag (what we called “lead_type“).

Let’s go into Events > All Events > Manage Custom Definitions

A new window will open, click on Create custom dimensions:

Then we’ll type the name of the parameter that we wrote in Google Tag Manager, that’s ‘lead_type‘ (A) and, if you want, you can change the name that will appear in your Reports giving a clearer name (B), which I called “Lead Type“:

Save it.

Create User Property in Google Analytics 4

Now we’ve to register the User Property in GA4.

Let’s go into Configure > User Properties > New user property

We need to type the same name we used in our tag in GTM: ‘newsletter_subscriber’ (remember that, once the name of the user property has been entered, it can be no longer be changed; you can change the description at any time):

And save.

You can find a list of predefined user dimensions in the Google official Guide.

Publish the Container

If all testing went well, you can publish the container in Google Tag Manager to make the changes live on the website.

Data Visualization in GA4

Once these steps have been completed, Google Analytics 4 will start collecting the information.

For each user who fills the Form, according to the rules set in the tag, you’ll be able to see the event that is collected (A), the parameter (B) and the user property set (C), as well as a series of other parameters that are associated with the event.

After 24 hours, all the values will be available in the Events > All Events Report:

If we click on the event previously created, i.e. ‘generate_lead‘, it’s possible to see custom parameters (A) that we typed in our tag in GTM:

Happy Analyzing!

---

You may also be interested by the following articles:

• Google Analytics 4: source/medium report
  One of the most popular reports within the Universal Analytics version is definitely the Source/Medium Report. In this Report, you can quickly observe the source and medium of users landing on the website. In UA we can find it under Acquisition > All Traffic > Source/Medium The new version of GA4 offers many features but […]
• Landing Pages Report in GA4
  One of the most interesting reports in Google Analytics – Universal Analytics is the Landing Pages Report. In this report you can observe the first landing page of a user on the analyzed website. It’s a very useful report to quickly understand what our user’s entry points are. However, the question may arise: how do […]
• Google Analytics 4: Comparison
  In this post, I’ll show you how to compare data in Google Analytics 4. Just as with the UA (Universal Analytics) version, where you can use segments to better analyze your users’ behavior on the site, GA4 offers a similar feature. However, there are some nuances, compared to the UA version. Compare data in GA4 […]
• Search Console and Google Analytics 4
  In this post I will show you two things that I find very useful: Connect the Google Search Console directly to your Google Analytics Property 4 Save a widget for faster access to Search Console data in the GA4 User Interface Let’s start! How to Link Search Console to GA4 Property The steps to link […]
• How to Change Language in Google Data Studio
  Google Data Studio is a great data visualization tool that is completely free, allowing you to connect different data sources to create dashboards. Some of the available data sources are: Google Analytics Google Sheets Google BigQuery File in .csv etc. The sources are different and, as you have seen, they are not only from the […]
• How to Implement Content Group in Google Analytics 4
  Content Groups allow you to create sections of the website, grouping contents in a convenient way for your analysis. Let’s give some examples: I can create a specific group that shows me the most viewed Brands on my website or I can create Product categories to analyze, at a higher level, the interactions of users […]
• Server-side Tagging: what is it?
  Update: October 5th. Google Tag Manager Server Side is officially out of Beta, as confirmed by Google, and has entered a new phase. Announced in August 2020, Google Tag Manager Server-side is still a tool / theme unknown to most. There are many doubts and questions on the subject and in this post I want […]