contact form 7 tracking gtm

Contact Form 7 Tracking with Google Tag Manager without destination url thank you page

Today you will learn how Contact Form 7 tracking can be set up with GTM and how to pass this data on to your Google Analytics, or Google Ads. Also, you don’t need to have a destination thank you page for this tracking.

Create an Event Listener

Contact Form 7 DOM events are as follows:

  • 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 are going to create an event listener that listens for the wpcf7submit DOM event. This will be a custom HTML tag, and we can fire it on all pages or on the contact page only.

Copy below JavaScript code below:

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

Paste In Google Tag Manager:

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

cf7listener-tag

 

This tag 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 GTM container is in preview mode, refresh the form page, and submit another demo test submission.

You’ll see the formSubmit DOM event on the left of your GTM preview window. Click on formSubmit and click on the data layer tab, and you can see pushed data in the data layer.

datalayer

Our Final 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.

Create a new Trigger

In google tag manager, create a new trigger, give it an appropriate name viz 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.

formsubmit-event

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 one 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 viz dlv – formID, select data layer variable as the type, and name it formID.

datavariable

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 GTM, create a new Google Analytics event tag. Name it something 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.

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}}

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

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

formsubmit-event1

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.

 

Comment, Like, and Subscribe Today

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

Leave a Reply

Your email address will not be published. Required fields are marked *