Contact Form 7 Tracking With Google Tag Manager

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.

6
Leave a Comment

avatar
3 Comment threads
3 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
Julian JuenemannAbdul SamadAndiJean Recent comment authors
newest oldest most voted
Jean
Guest
Jean

Hi, thank you for this great article. I followed exactly what you have explained, but my tag on the test environnement is fired as soon as the page has been loaded, not when a form is submitted. Where could be the error ?

Julian Juenemann
Admin

thanks for your comment. Does the event appear on the left side? A screenshot would help.

Andi
Guest
Andi

Worked smoothly, even for GTM noob like me. Thank you for this comprehensive article, made my day (by now it’s night LOL). Been struggling for days to get this one working til I tried out your tutorial.
Big kudos and all the best!

Julian Juenemann
Admin

Great to hear all the steps worked for you Andi!

Abdul Samad
Guest
Abdul Samad

i follow all the steps and its working fine but how i do track conversion in GA and set goals of this form submission kindly make video on it. it would be helpfull. let me know the solution for it thanks

Julian Juenemann
Admin

Good to hear it worked Abdul. This post will help you with the next steps: https://measureschool.com/how-to-define-an-event-goal-in-google-analytics/