A short introduction
Tracking form submissions is a crucial aspect of website analytics, providing insight into how users convert on your site. This is particularly important for service-based websites, where conversions often happen through forms such as appointment bookings, consultation requests, or callback requests. However, setting up Contact Form 7 tracking can present challenges due to the way different CMS platforms and website builders handle form submissions.
Contact Form 7 (WPCF7) is a popular plugin for WordPress CMS, widely used for creating various types of forms. WordPress itself is one of the most popular platforms for website creation, offering numerous plugins to customize content and site elements. In this article, we will explain how to set up form submission tracking for Contact Form 7 using Google Tag Manager (GTM) to ensure accurate and effective tracking.
It’s important to note that Contact Form 7 uses AJAX for form submissions, meaning the form is sent without reloading the page. As a result, traditional methods of tracking, such as tracking a Thank-You page view, won’t work here.
Instead, one of the most effective methods is to listen for form submission events using a custom script and sending this data to Google Analytics via Google Tag Manager. I will guide you through each step of this process in detail below.
Post contents:
- Contact Form 7 events listening
- Set up GTM variables
- GTM trigger and tag set up
- Settings in Google Analytics
Contact Form 7 events listening
The first step is to install the event listener code on the site pages:
|
1 2 3 4 5 6 7 8 9 |
<script> document.addEventListener('wpcf7mailsent', function(event){ dataLayer.push({ 'event' : 'wpcf7_form_submit', 'form_id' : event.detail.contactFormId, 'response': event.detail.inputs }); }, false); </script> |
Each time the Contact Form 7 is successfully submitted, this code will send the wpcf7_form_submit event to the dataLayer, as well as the form_id and response parameters, which contain the submitted form data.
Firstly, go to Google Tag Manager and create a Custom HTML tag. Select “All Pages” as the trigger, but you can also create a trigger only for those pages that have Contact Forms that need to be tracked. In the field for the tag code, you need to insert the code shown above. As a result, the tag should look like this:
Save the tag and open the site via GTM in Preview mode. Go to the page with the form then, fill in all the fields and send it.
“Thank-you message” should appear indicating that it was successfully submitted:
After the “Thank you message” appears, you need to go to the Tag Assistant tab and check whether the wpcf7_form_submit event has worked. Indeed, the event has arrived in the dataLayer:
As you can see, the form submission is tracked and additional parameters such as the form ID and submitter data are passed along with the event.
Now we can go to GTM to set up sending an event to Google Analytics. But before that, we need to decide what form data we need to send in addition to an event. Next, we will set up event sending with the form ID and user email.
Set up GTM variables
So, first, let’s create variables that will contain the form ID values and the user’s email. We need to create variables of the “DataLayer Variable” type.
To send the form ID, we need to copy the parameter name from the event code (form_id) and paste it into “Data Layer Variable Name” field. This is how you need to set up variable:
To transfer the user’s email, we need to get the response array of the event code. response array contains 4 objects, in this case we need the second one. At this point, it is important to understand that in JavaScript, the indexes of array elements start from zero. So, the first element has index 0, the second has index 1, the third has index 2, and so on. Therefore, we need the second element of the response array, whose index is 1:
In the second element, we are interested in the parameter that contains the user’s email. To simplify the parameter setup, we will create 2 variables for the user’s email: to extract the response array and to extract the email from the response array.
Let’s create the first variable in GTM to get the response array value:
The second variable is the “Custom JavaScript” type and it will extract the email value from the “dlv – response variable”. The following code must be inserted into the variable code field:
|
1 2 3 4 |
function(){ var user_email = {{dlv - response}}[1].value; return user_email; } |
As you can see, in the code we access the second element of the response array (with index “1”). The variable settings should be as follows:
GTM trigger and tag set up
The next step in setting up tracking is to create a trigger. Create a “Custom Event” trigger, and as an event name we have to paste the event name from the event listener sode – wpcf7_form_submit:
Now when all the variables and trigger have been created, we proceed to setting up a tag that will send an event with the custom parameters. Create a “Google Analytics: GA4 Event” tag. Add the previously created trigger, event name for Google Analytics and Measurement ID:
As you remember, we also wanted to send the form ID and the user’s email. To do this, we need to add Event Parameters. You can choose the name of the Event Parameters at your discretion, but so that you understand what this parameter means. Let’s call them, for example, “contact_form_id” and “contact_form_user_email”. The Value of these Event Parameters will be the previously created variables. They can be easily added by clicking on the constructor icon:
Save the tag and open the site again via GTM in Preview mode. Make a test form submission and check on the Tag Assistant tab:
As you can see from the screenshot, Google Analytics 4 tag fired when the form was sent. In order to check the values of the parameters sent with the event, you just need to click on the tag that was fired:
The screenshot shows that the form ID is “6”, and the email entered by the user is “user_email@gmail.com”.
Settings in Google Analytics
To be able to further work with event parameters in Google Analytics reports, we need to create Custom Dimensions for two new parameters – contact_form_id and contact_form_user_email.
Go to Google Analytics and create two Custom Dimensions with the following configuration:
- Dimension name: contact_form_user_email. Scope: Event. Event parameter: contact_form_user_email.
- Dimension name: contact_form_id. Scope: Event. Event parameter: contact_form_id.
As you may have noticed, in the Dimension name and Event parameter fields we need to enter the parameter name that we specified in the GA4 Event tag in GTM.
The event we configured – contact_form, can be marked as a Key Event if it necessary:
A short afterword
The considered method of setting up tracking of Contact Form 7 submission provides the opportunity not only to accurately count the number of forms submissions, but also to collect additional parameters, such as user’s email, user name, message subject, and others. This opens up new opportunities for further analysis and work with user data, especially if you work with Google Analytics data in other analytics tools or are engaged in GA4 data unload.
