English Posts

Form tracking in Google Analytics 4

form tracking google analytics 4 and gtm

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:

form tracking google analytics 4
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.

google analytics 4 event tag

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.

configuration tag google analytics 4

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:

events name google analytics 4

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:

event tag generate lead

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
event parameters google analytics 4

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
user properties google analytics 4 tag manager

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:

custom form 7 tracking gtm

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:

dom ready trigger gtm

Our tag and trigger will appear like this:

tag for contact form 7 google tag manager

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:

data layer contact form 7

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

trigger custom event tag manager

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

custom event trigger for contact form 7 wordpress

Tag and Trigger

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

tag and trigger gtm

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);
tag fired ga4 contact form 7

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

manage custom dimension google analytics 4

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

create custom dimension google analytics 4

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“:

create new custom dimension ga4

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

create new user property in ga4

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):

new user property in google analytics 4

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.

publish the container in gtm

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.

debug mode google analytics 4

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

event report google analytics 4

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:

custom parameters google analytics 4

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 […]

6 pensieri su “Form tracking in Google Analytics 4

  1. Hello, i have one question regarding custom definitions:
    From GTM i’m sending a custom event with custom parameters and actually i see them in GA4 if i go to Analysys and create a custom report adding the custom dimension.
    What i don’t understand is the following: in the process of creating the custom dimension in GA4, there is a drop down box that says “Custom Parameters”. I’ve seen on some courses that the custom parameter sent from GTM should appear in the list of items of this box and ONLY if the parameter has not been sent yet, i could write the name manually as a sort of placeholder for future implementation.
    This is not happening as if i try to create a new custom dimension using the same custom parameter that i had to write manually (and therefore it appears on Analysis custom reports) it doesn’t appear in the drop down menu.
    What am i doing wrong?

    Thank you.

    1. Hello Fabrizio,
      In GA4, if you want to use the event parameters sending from GTM, you have to register them as custom dimensions in the GA4 User Interface. To do that you have to click in Custom Definition > Create Custom Dimensions where you see several fields (Dimension name, Scope, Description and Event Parameter). Within the next 24 hours, the custom parameters will appear into the GA4 reports. If you start sending event parameters to GA4 and, only after 3 days you register them as custom dimensions you have lost the data for those 3 days, due to the not retroactivity of the registration.

        1. Yes, BigQuery stores the information without register the custom dimension. This happens because this is a raw data which has been saved into BQ.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.