Contact Form 7 Tracking With Google Tag Manager

Hi measure geeks, today we’re going to show you how Contact Form 7 tracking can be set up with Google Tag Manager. You’ll learn how to pass this data on to your Facebook pixel, Google Analytics, or Google Ads.

We’ve got lots to cover.

Let’s dive in.

1. Tracking Forms With No Thank-You Pages

One of the things that trips a lot of people up when trying to track Contact Form 7 submissions is the default confirmation.

It doesn’t redirect you to a thank-you page, you just get a little pop-up message instead.

contact form 7 thank you message tracked with google tag manager

What is a data-driven marketer like yourself to do?

Thankfully, there is a convenient function the plugin does by itself.

2. Contact Form 7 Emits DOM Events

What are DOM events?

We’re not talking about high-society champagne parties.

DOM event tracking with Google Tag Manager

DOM (document object model) events are events that are emitted in the JavaScript runtime environment.

Some Contact Form 7 DOM events include:

  • wpcf7invalid: fires when form has fields with invalid input
  • wpcf7spam: fires when possible spam activity has been detected
  • wpcf7mailfailed: fires when form submission has completed successfully, but sending mail failed
  • wpcf7submit: fires when form submission has completed, regardless of other statuses
  • wpcf7mailsent: fires on form submissions where email has been successfully sent

We’re going to create an event listener that listens for the wpcf7submit DOM event. This is just going to be a custom HTML tag, and we’re going to fire it on all pages. (If you only want it to fire on pages with contact forms, that’s fine. We’re just selecting all pages for the sake of simplicity.)

Copy the JavaScript code below:

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

In Google Tag Manager:

  1. Paste the JavaScript code into a Custom HTML tag.
  2. Set the trigger to All Pages.
  3. Click Save.

contact form 7 event listener in google tag manager

This is just going to listen for the wpcf7submit DOM event. When it detects this event has happened, it is going to push a custom event called formSubmit into the data layer.

It’s also going to push the formID and all the form fields into the data layer as well.

Let’s test it out. Make sure your GTM container has been published, make sure it’s in preview mode, refresh the form page, and submit another test submission.

On the left of your GTM preview window, you’ll see the formSubmit DOM event. Click on that, click on the data layer tab, and you can see the data that has been pushed into the data layer.

data layer values form submit event google tag manager

Our end goal is to create a tag that passes these data layer values into Google Analytics any time theĀ  formSubmit event happens. That means our trigger will simply be the custom event of formSubmit.

In tag manager, create a new trigger, give it an appropriate name like custom – formSubmit, select the trigger type of custom event, and enter the event name formSubmit. You can leave the “all custom events” radio button selected. Click save.

Contact Form 7 formSubmit custom event trigger

For the sake of this lesson, we want to grab the formID and value from the drop down field right above the submit button. We are going to create two data layer variables to store these values.

Storing the formID value is very straightforward. We’re just going to create a new variable, name it something appropriate like dlv – formID, select data layer variable as the type, and name it formID.

formID datalayer variable

Notice we’re just grabbing the formID label right out of the data layer.

formID label

Now let’s create a variable to hold the value of menu-597 field.

menu 597 field

To store this value, we are going to create a data layer variable just like the first one. The only difference is that the value we are trying to grab is inside of an array. The fields object above is an array, meaning it’s a list of values instead of one singular value.

3. Using the Dot Notation to Pull Values From an Array

There are six values in the fields array. We want to grab the sixth one. It is important to know that when counting objects in an array, you start from zero. So our 6th object actually has an index of 5.

[0,1,2,3,4,5]

So the data we want to store is:

fields object -> position 5 -> value

We denote this hierarchy using the dot notation, so our custom data layer variable name will be:

fields.5.value

dlv form interest google tag manager

Click save, and you’re done creating variables.

4. Using Variables in Your Google Analytics Event

Now that the form values are stored in a variable, we can use these variables to insert values into a Google Analytics event.

In Google Tag Manager, create a new Google Analytics event tag. Name it something appropriate like Google Analytics – Event – Form Submit. The event category is not dynamic, so you can name it whatever you’d like. In this case, we chose formSubmit.

In the Action field, we want to pass along the formID, so this is where we enter one of the variables we just created. Click the “+” button next to the action field to select a variable.

Google Analytics form tracking event tag with variables

Select your dlv – formID variable. In this case, we put “FormID: ” in front of the variable, just so it has a nice clear label in analytics. The end result of what will be in the action field is:

FormID: {{dlv- formID}}

Let’s do the same thing with the Label field, except we’re going to add the dlv – form interest variable. The end result will be:

Interest: {{dlv – form interest}}

Just make sure you select your settings variable, and this part of the tag is done.

ga contact form 7 form submit event

All that is left is to add the custom – formSubmit trigger that we created earlier, click save, and our tag is done.

custom contact form 7 form submit trigger

5. Seeing Contact Form 7 Tracking Data in Google Analytics

All that’s left is to test it out. Make sure to publish your container, refresh your form page, submit a test form submission, and head over to the Real Time > Events in Google Analytics.

In a matter of seconds you’ll see a little blip, and you’ll see your event category and event action. If you click on either of those to drill down further, you can also see your event label.

GA real time contact form 7 tracking events

Success!

Comment, Like, and Subscribe Today

If you have any questions about contact form 7 tracking, please leave us a comment below.

While you’re at it, gives us a thumbs up on our video and subscribe to our channel to get new videos like this every week!

To take your data-driven marketing skills to the next level, sign up for our premium measure community Measure Masters today.

Leave a Comment

avatar