Contact Form 7 GA4 Tracking
It is always easy to track the conversion with Google Analytics 4, when after submitting form, user get redirect to a thank-you page or success page.
As we all know that contact form 7 trigger the thank-you message on the same page, so it’s not that easy to track the event or conversion. This article will help you to setup Google analytic 4 Event tracking for Contact form 7.
Please note that : Google Analytics 4 has many smart features, so we are not required to map the same Event in Goal section as we were doing this in Universal Analytics. With GA4 ,we just need to trigger the data layer, and it will be automatically sent the hits to Google Analytics 4. So all Goal, Filter and View section has been depleted in new interface of GA4
Contact Form 7 Event Tracking in Google Analytics 4 (GA4) with Google Tag Manager (GTM) Method
Contact Form 7 is one of the most popular forms used on WordPress websites, so setup conversion tracking in GA4 is become more important. In Article, We will explain how we can set up the conversion tracking for Contact from 7 in GA4.
Basically there are 3 ways to setup the conversion tracking on Contract form 7 (CF7) in Google Analytics 4. We are going to explain you all 3 ways setup by steps
- Contact Form 7 Conversion Tracking With Auto-Event Listener (Form Submission) with Google Tag Manager
- Contact Form 7 Conversion Tracking by AJAX Method With Google Tag Manager
- Contact Form 7 Conversion Tracking with dataLayer Events with Google Tag Manager
Let’s start with 1st method
Method 1
Contact Form 7 Conversion Tracking With Auto-Event Listener (Form Submission) with Google Tag Manager
Step 1: Create account in Google Tag Manger, or Sing in to your existing GTM account.
Step 2: Add GTM Tracking Code in All pages of your website as per instruction. Please note you will need to copy your own code from GTM for respective website.
Step 3 : We have to create a Trigger for Auto-Event Listener (Form Submission). Click on Trigger and Click on New Trigger option to create a new Trigger
Select Form Submission option in Trigger configuration and Select All forms option. If you want to track any specific page form, then select some form option. Save the Trigger with name Form Submission auto listener. You save with any name.
Step 4: Click on Tags and click on New option to create a new tag. Select Google Analytics: GA4 Event from Tag configuration section and add your measurement ID in like “G-QN20YRDTWT” (you can get this ID from your Google Analytics 4). Please see the snapshot
Add an Event name “GA4 Form Lead” and select Trigger “Form Submission auto listener“. Save your Tag with any name you want.
Step 4 : Submit to publish your Tags
Step 5 : Test your tracking code using Debug and Preview mode of GTM
Method 2
Contact Form 7 Conversion Tracking by AJAX Method With Google Tag Manager
There are some which uses Ajax like Contact form 7. so let' see how we can track CF7 with Ajax Method Step 1: Click on Tags and click on New option to create a new tag. Scroll down to Select Custom HTML from Tag configuration section and copy and past the below given code as it is
<script id="gtm-jq-ajax-listen" type="text/javascript">
(function() {
'use strict';
var $;
var n = 0;
init();
function init(n) {
// Ensure jQuery is available before anything
if (typeof jQuery !== 'undefined') {
// Define our $ shortcut locally
$ = jQuery;
bindToAjax();
// Check for up to 10 seconds
} else if (n < 20) {
n++;
setTimeout(init, 500);
}
}
function bindToAjax() {
$(document).bind('ajaxComplete', function(evt, jqXhr, opts) {
// Create a fake a element for magically simple URL parsing
var fullUrl = document.createElement('a');
fullUrl.href = opts.url;
// IE9+ strips the leading slash from a.pathname because who wants to get home on time Friday anyways
var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname;
// Manually remove the leading question mark, if there is one
var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search;
// Turn our params and headers into objects for easier reference
var queryParameters = objMap(queryString, '&', '=', true);
var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':');
// Blindly push to the dataLayer because this fires within GTM
dataLayer.push({
'event': 'ajaxComplete',
'attributes': {
// Return empty strings to prevent accidental inheritance of old data
'type': opts.type || '',
'url': fullUrl.href || '',
'queryParameters': queryParameters,
'pathname': pathname || '',
'hostname': fullUrl.hostname || '',
'protocol': fullUrl.protocol || '',
'fragment': fullUrl.hash || '',
'statusCode': jqXhr.status || '',
'statusText': jqXhr.statusText || '',
'headers': headers,
'timestamp': evt.timeStamp || '',
'contentType': opts.contentType || '',
// Defer to jQuery's handling of the response
'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '')
}
});
});
}
function objMap(data, delim, spl, decode) {
var obj = {};
// If one of our parameters is missing, return an empty object
if (!data || !delim || !spl) {
return {};
}
var arr = data.split(delim);
var i;
if (arr) {
for (i = 0; i < arr.length; i++) {
// If the decode flag is present, URL decode the set
var item = decode ? decodeURIComponent(arr[i]) : arr[i];
var pair = item.split(spl);
var key = trim_(pair[0]);
var value = trim_(pair[1]);
if (key && value) {
obj[key] = value;
}
}
}
return obj;
}
// Basic .trim() polyfill
function trim_(str) {
if (str) {
return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
}
}
})();
</script>
Step 2: Trigger this Tag on All Pages. Save the tag with a Name Ajax. or Save your Tag with any name you want.
Step 3: Click on Variable options from Left navigation and create a user define Variable. In Variable Type, select Data Layer Variable. Add “attributes.response.message” without quotes in Data Layer Variable Name. All other setting will remain unchanged and save the variable with a name “Ajax data layer“.
Step 4 : We have to create a Trigger for Ajax Method. Click on Trigger and Click on New Trigger option to create a new Trigger
Select Custom Event option in Trigger configuration and add “ajaxComplete” in Event Name section. Select some form option. Add the below condition as shown in snapshot. Save the Trigger with ajaxComplete Name.
Step 5: Click on Tags and click on New option to create a new tag. Select Google Analytics: GA4 Event from Tag configuration section and add your measurement ID in like “G-QN20YRDTWT” (you can get this ID from your Google Analytics 4). Please see the snapshot
Add an Event name “GA4 Form Lead – Ajax” and select Trigger “ajaxComplete“. Save your Tag with any name you want.
Step 6 : Submit to publish your Tags
Step 7 : Test your tracking code using Debug and Preview mode of GTM
Method 3
Contact Form 7 Conversion Tracking with dataLayer Events with Google Tag Manager
Step 1: Create a new Tag by selecting “Custom HTML” and named it “Data Layer” and add below code exactly and save the custom HTML
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
dataLayer.push({
'event' : 'wpcf7successfulsubmit',
'CF7formID' : event.detail.contactFormId
});
}, false );
</script>
and trigger to fire this Tags on All pages
Step 2:
We have to create a Trigger. Click on Trigger and Click on New Trigger option to create a new Trigger
Select Custom Event option in Trigger configuration and add “wpcf7successfulsubmit” in Event Name section. Select some form option. Save the trigger with “Custom Event”Name.
Step 5: Create custom Variable and add below code only and save it with name of Custom variable and save the variable
Click on Variable options from Left navigation and create a user define Variable. In Variable Type, select Data Layer Variable. Add “CF7formID” without quotes in Data Layer Variable Name. All other setting will remain unchanged and save the variable with any name.
Step 6: Create A new tag and select Google Analytics: GA4 Event and under that select Google Analytics GA4 Configuration(We have already setup this on first part of GA4 installation. You can watch the same on below link https://www.youtube.com/watch?v=Q-np00ab2WU)
Add an Event name “Lead Form” and select Trigger “Custom Event“. Save your Tag with any name you want.
Step 7: publish all the tags which is important to get all the tags live
Please note that, GA4 can take around 24 hours to display your new event or conversion and if you are testing with GTM sometime it can take 15 -30 minutes to get the tag updated from GTM so if you are not able to see your tags via tag assistance then try after 20 – 30 mins. This is my personal experience.
All done! You can test your form with the help to GTM preview mode and Google Tag Assistance.
Watch our Video where i have explained step by step, how to set up GA4 Event tracking and also how you can test them to make sure all events and conversion are tracking properly.
Even if you have any query of facing issue in setting up GA4 Event or conversion for Contact Form 7. Please feel free to send us mail on info@mediasearchsolution.com
