How to track form submissions on a WordPress website with Google Tag Manager and Google Analytics

Unless you were born literally yesterday, chances are that you’ve probably heard about the magic platform called WordPress. According to data from buildwith.com, WordPress accounts for around 53% of all the active websites in the entire web, which means a number of around 19.5 million websites.

The reasons why WordPress is by far the leading CMS platform out there are many and I won’t talk about them all over again. But one of the main aspects, while people like and use WordPress, is the fact that it has a huge community of contributors who constantly develop new themes and plugins so that if you want to build a website with WordPress you can do that without any coding knowledge.

But what happens after your website is live and you need to understand what happens there? If you have a website for your business or even a personal blog, most likely you’ll want to track some actions visitors performed on your website. If the action you want to measure is about how many people successfully submit a contact form on your website, you are in the right place. Here is how you can easily track successful form submissions on a WordPress website using Google Tag Manager and Google Analytics.

Creating the contact form

To be able to track how many people contact you from your website, you’ll first need a contact form. As you may guess, there are tons of WordPress plugins you can use to create nice forms on your website, and many of them will do the job for you. However, in this article, we’ll focus on Contact Form 7, one of the most used contact form plugins (5+ million active installations) with some nice pre-built settings that will do your life a lot easier. These settings are represented by a list of DOM events which will help us record events for specific situations that take place on our website (to learn more about what DOM events mean, check out this wikipedia page). So, the DOM events provided by the CF7 plugin are:

  • wpcf7invalid — The form submission was completed successfully, but the email hasn’t been sent because there were some fields with invalid input
  • wpcf7spam — The form submission was completed successfully, but the email hasn’t been sent because of some signs of spam activity
  • wpcf7mailsent — The form submission was completed successfully and the email has been sent
  • wpcf7mailfailed — The form submission was completed successfully, but the email sending failed
  • wpcf7submit — The form submission was completed successfully, regardless of other incidents

These events are great because we can use them to track events and goals only when the form was successfully completed AND the email was sent. This way, we will see in Google Analytics the same number of goals as the number of emails in our inbox.

So, after you’ve created your new form, you’ll need to head over to your Google Tag Manager account and start setting up the event tracking.

Google Tag Manager event tracking with Contact Form 7

Out of all the DOM events provided by CF7, the most important one is wpcf7mailsent, because, as described above, this will only record successful submissions of the form.
To pass this information to Google Analytics, we’ll first need to set up a Data Layer event in Google Tag Manager. To do this, follow the steps below:
In the left-side menu, select Tags and click on NEW

For the Tag Type field, select Custom HTML and paste the following code in the HTML box.

<script>

document.addEventListener( ‘wpcf7mailsent’, function( event ) {

       dataLayer.push({

         ‘event’ : ‘cf7success’,

         ‘CF7formID’ : event.detail.contactFormId

       });

    }, false );

</script>

 

This will fire an event called “cf7success” into the Data Layer whenever the wpcf7mailsent DOM event is triggered. This event will also pass to the Data Layer the ID of the form (we’ll cover this down below).

Give this event a name (I used “cf7Success”).

Next, we’ll have to create a trigger that will fire this event. Click on the trigger section right below the HTML box (as highlighted above).

To create a new trigger, click on the + button in the top right corner.

For the type of the trigger, select Custom Event from the right-side menu.

For the event name, we’ll use the Data Layer event we have just created, so be sure to use the exact same name in the event name field from the Trigger Configuration. This trigger will fire on all custom events, so be sure to check that as well.

Give this trigger a name (I used cf7trigger) and click save twice (both for the trigger and for the tag).

Next, we’ll need to create another custom tag. So, head over to the left menu, select Tags and click on New. For Tag Type select Universal Analytics, and fill out the fields as follows:

Track type: Event
Category: contact – you can fill out this field with anything you want. I used contact
Action: successful-submit – again, you can use anything you want here as well. I used successful-submit
Label: {{cf7-id}} – only if you need to track different forms separately
Value: you can leave this empty
Non-Interaction Hit: False

Check the Enable overriding settings in this tag and fill out your Google Analytics tracking ID.

Give this tag a name (I used CF7 Submission) and next click on the trigger box below. Select the c7trigger and hit save.

Now, if you need to track different forms separately and you filled out the label field for the last tag created with {{cf7-id}}, we’ll need to create a custom data variable in GTM.

To do this, head over to the Variables section in the left-side menu, and under User-Defined Variables hit New.

Click on the Variable Configuration box and select Data Layer Variable from the right-side list.

Use cf7-id as the name of the new variable and CF7formID (case sensitive) in the Data Layer Variable Name field and hit save.

If you’ve made it this far, congratulations are in place. You’ve done a great job. As your work with Google Tag Manager is now complete, you’re safe to publish your changes by clicking on Submit in the top-right corner, and then hit Publish.

Now, head over to your Google Analytics account, where we’ll create a goal for these events.

In Google Analytics, go to Admin -> View -> Goals and click on the +New Goal button.

In Goal Setup choose Custom and hit Continue.

Give your goal a name and select “event” for the type of the goal. Hit continue.

Now, you’ll need to use the same variables you filled out in the CF7 Submission tag in GTM. As we used contact for category and successful-submit for action, we’ll use them again here.

However, if you want to use the label as well and track different forms separately, you’ll have to fill out here the exact label of the form you want to track.

Let’s suppose you have your website in two different languages: English and French. You’ll want one goal for the form submission on the English version, and another for the French version. If you already have the forms created, just go to your WordPress admin dashboard -> Contact -> Contact Forms.

As you can see in the image above, we already have two different forms, one used on the English version of the website and the other on the French one. What we need from here are the IDs of the forms, because we will use those to create a goal for each form in Google Analytics.

So, we’ll need to set up two different goals in Google Analytics, one for each form. The goals will look like this:

 

As you can see, all you have to do is to fill out the FORM ID for each of the two goals. Next, hit save, lean back and relax. You’ve just set up goal conversions for your contact form.

If you experienced any issues making this happen, let us know in the comments below.

Leave a Reply

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