Track your Wordpress ContactForm7 submissions and improve user experience with our Google Tag Manager and Google Analytics custom event script. If you're a user of Wordpress, you've probably come across ContactForm7 or CF7 for short. It's a very popular and free contact form extension which allows you to build custom forms for your wordpress site with ease. Under the hood, there are a few excellent hidden features which allow you to expose usage information. With a little bit of scripting magic, this extra layer of information can be used within Google Analytics to better understand how your contact form is being used.
Time Required: 15mins
Difficulty: 3/5
Tools Required: Knowledge of JavaScript and the Data Layer, Google Tag Manager, Google Analytics, Wordpress, ContactForm7
Notes: This isn't an easy copy and paste kind of guide - you will need to tailor the event names and variables to fit your contact form field names
Step 1
Find out how your forms' input fields are named by adding the following code as a new GTM tag
<script>
document.addEventListener('wpcf7mailsent', function(event) {
console.log(event.detail.inputs); // output data to console
});
</script>Example:
Note: Not required, but we've have locked this script down to only fire on the contact page. Since this is only a temporary step, you can use the built-in All Pages trigger.
Step 2
Once the above code is deployed, go to your site and successfully submit the form. Open your browser debug console and you should be presented with a readout similar to this:
0: {name: "name", value: "Joe Bloggs"}
1: {name: "email", value: "[email protected]"}
2: {name: "issue", value: "Hosting Issue"}
3: {name: "message", value: "My hosting is down!"}The idea here is to figure out the names of the fields you wish to pass through to Google Tag Manager & Google Analytics. For this example, I want to grab the issue field so I can figure out which support issues seem to be the most common. We'll use this in the next steps.
Step 3
We're going to extend the initial script to contain a function which will lookup a requested name and return its' value. Or, if the field name is incorrect, return as undefined.
var data = event.detail.inputs; // Get Data
function getValue(target) {
var output = data.filter(function(obj) {
return obj.name == target ? true : false;
});
return output === undefined ? null : output[0].value;
}We can call this function like this: getValue("issue") which will return the value: Hosting Issue
Step 4
Next, we need to add the Data Layer push which includes the values we wish to use in Google Tag Manager.
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'contactForm',
'contactForm': {
'status': 'success',
'issue': getValue("issue") //Get the Issue Field Value
}
});Example Final Script
Once you've pinpointed the fields you need based on their names and you've added them to the Data Layer code, you're nearly ready to go! Here's the full script minus the original console.log(event.detail.inputs) - we don't need this in the production version of the script as it was for reference only.
<script>
document.addEventListener('wpcf7mailsent', function(event) {
// Retrieve input values
var data = event.detail.inputs;
// Fetch value belonging to specified field name
function getValue(target) {
var output = data.filter(function(obj) {
return obj.name == target ? true : false;
});
return output === undefined ? null : output[0].value;
}
// GTM Event
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'contactForm',
'contactForm': {
'status': 'success',
'input-name': getValue("object-input-name") // Example Input
}
});
}, false);
</script>Collect the Results in Google Tag Manager
So we've got the results firing into the Data Layer - let's get them loaded into Google Tag Manager.
To get the data from the Data Layer, we need to create custom variables. For the above example, we need to assign the value of the issue field as a Data Layer Variable called contactForm.issue
Create a New Trigger
We need to make a trigger which will watch for form submissions.
Create a Google Analytics Event Tag
As this is a basic contact form with a singular Data Layer Variable, we can create a Google Analytics Event with the Issue field detailed in the Label section.
With everything in place, test your configuration. You should see the following in Google Analytics as an event:
- Category: Contact Form
- Action: Submitted
- Label: Issue: Hosting Issue
Tip 1:
If you're handling a lots of important fields which you'd like to track - it would be more efficient to set up custom dimensions within your Google Analytics Property and pass through each field using a top-level Form Submission event instead. However, there are limits on custom dimensions - so think strategically before doing this as you could end up using your allotment of custom dimensions very quickly.
Tip 2:
Don't add personally identifiable information (PII) into Google Analytics. This is strictly forbidden and may result in your account being closed down. This process is designed to enhance user experience by understanding how your users are interacting with your forms.
Do you need help implementing your form submission data into Google Analytics? Let's chat.
This post was created in 2018 and some of the content may no longer be relevant
If you’re interested in learning more about digital marketing, analytics and data, take a look at our Digital Marketing Services.
Stay up to date
Receive all the latest news, events, and insights on B2B tech, marketing, and communications with Clarity’s free monthly newsletter.
Loading...
Share this
MORE
INSIGHT
Fearless tactics to achieve your strategic success
As a consultancy, our full-funnel marketing and communications solutions are designed to fearlessly deliver business results across multiple industries and service areas.
