How to Track a WordPress Form Lead with Google Tag Manager

This is a guest post by Jon Zimmerman. If you’d like to contribute to our blog, feel free to get in touch with us.

For many businesses, your website serves as your storefront, sales rep, and cashier – all-in-one. Tracking sales from your website can be a complex task, but many e-commerce platforms like WooCommerce can make this a bit easier with built-in integrations.

For B2B websites that don’t leverage their website for e-commerce, it is still very important to know how customers are interacting with your site and where your leads are ultimately coming from. With the help of Google Tag Manager and Google Analytics, you can integrate contact form tracking to know which customers are completing the lead form.

Install Tag Manager and Analytics

These free Google products are simple to install and can work together seamlessly, but first let’s understand what they do.

Google Analytics (GA) is a free analytics platform that tracks your web traffic and allows you to splice, dice, and analyze it using any number of built-in and custom reporting tools.

Google Tag Manager (GTM) is a free tag management tool that allows users to deploy scripts on a website by adding only a one-time single snippet of JavaScript to the code. Once you add the GTM script to your site, you can fire almost any other tags through it without adding any additional bulky code to the site.

To add both GA and GTM to your site, first, add the GTM script to every page of the site. Then you can deploy the GA script within the Google Tag Manager container. If this sounds Greek to you, here is some additional information from Google on how this works.

Event Tracking with Google Tag Manager

There are many features of GTM, but for now, we are going to focus on auto event tracking. This will allow us to define an event that we want to track, and then send data to Google Analytics when that event is completed by a user.

To do this we are taking a three-step approach:

1. Define what we want to track, in this case, we want to track when a user completes a contact
   form.
2. Configure the Event tracking in Google Tag Manager
3. Configure the Goal to be tracked in Google Analytics

Step 1: Define what we want to track

For contact forms there are three main ways to trigger an event when a user submits a contact form:

• Count the Event when they click the submit button
• Count the Event when the form is submitted
• Count an event when the user hits a “thank you page”

We will focus on thank you page event tracking for now, as this is the most straightforward method, but all three methods of tracking can be set up in GTM. To configure this thank you page tracking, you will need to know the URL of your thank you page, i.e. “www.domain.com/thank-you” or something similar.

Step 2: Configure the Event Tracking in Google Tag Manager

Now for the tricky part. Tag Manager uses tags, triggers, and variables to define how you want to deploy tags on your site. For now, we will work with tags and triggers.

A tag is where you define the information that you want to be sent to Google Analytics.

A trigger is where you define the user interaction that will “trigger” the tag information to be sent.

First, let’s create the tag:

Tag Type: Universal Analytics

Since our ultimate goal is to send event data to Google Analytics, the first thing we are going to do is choose “Universal Analytics” as our tag type.

Track Type: Event

Event Tracking Parameters – use the category, action, and label fields to name the event data that is sent to Google Analytics. Here we have defined ‘category’ as “Form Submission” and ‘action’ as “Form Submit Thank You Page,” but you can name these anything you want as long as it is unique and recognizable to you.

Tracking ID: place your Google Analytics property ID here. This is how GTM knows which analytics property to send the data to.

Now, you will create the trigger that will define what user interaction will fire the tag.

Trigger Type: Page View. When a user views the “thank you” page, we want our tag to fire.

This trigger fires on: Some Page Views. Since our GTM script is on every page of our site, we have to narrow down the specific page that we want to trigger our tag. In this case, we only want the tag to fire when a user views the thank you page.

Conditions: Page URL: equals: http://www.domain.com/thank-you

Now publish the trigger and tag you just created by clicking the “Submit” button in the top right corner
of the GTM interface.

Step 3: Create a Goal in Google Analytics

With your published tag, GTM will now send event data to GA every time a user completes a contact form and hits the “thank you” page. The final step is to create a goal in Google Analytics that will count and record each time the Form Submission event data is sent to GA.

To begin, navigate to the admin section in GA and select Goals under the correct analytics view you want to use. Now we will use the event data that GTM is sending to GA to create a goal.

Goal Setup: Custom

Goal Name: Form Submission

Goal Type: Event

Goal Details: set the Category, Action, and Label fields to match exactly how you defined your tag in GTM.

Event Value: select “yes” if you want one goal completion to record one goal. Otherwise, you can define a custom value for each goal completion.

Tracking with Contact Form 7

Many WordPress users utilize the Contact Form 7 plugin and there is a specific GTM trick to track these form submissions. Instead of tracking when a user hits the “thank you” page, we can leverage an integration that tracks the actual form submission action.

In the contact form’s edit screen, select Additional Settings, and add the below script to the field:

on_sent_ok: “dataLayer.push({‘event’: ‘gtm4wp.contactForm7Submitted’});”

This will push an event into the dataLayer once a form is successfully submitted. You will then need to configure a custom event in GTM to listen for this dataLayer variable and send event completion data to Google Analytics.

Create a Custom Event trigger in GTM

In GTM, create a custom event trigger. This will allow GTM to listen for this specific event in the dataLayer, and when it occurs, we can use this trigger to fire our tag to send data to GA.

Trigger type: Custom Event

Event Name: gtm4wp.contactForm7Submitted

Trigger Fires on: “All Custom Events”

Create Your Form Completion Tag in GTM

Next, we will create a new tag utilizing the trigger we just created.

Tag Type: Universal Analytics

Track Type: Event

Category, Action, Label: define these as you see fit

Tracking ID: place your Google Analytics property ID here.

Select the Custom Event trigger you created, as the firing trigger for this tag.

Test Conversion

You can utilize Tag Manager preview mode to run a test conversion to be sure that the tag and trigger you created is working properly.

1. In the GTM interface, choose “Preview” in the top right corner.
2. In the same browser, open a new tab and load your website URL. You should now see a GTM
   preview window at the bottom of the screen showing which tags are firing and which are not.
3. Submit a contact form and you should see “gtm4wp.contactForm7Submitted” populate on the left side of the preview window. You should simultaneously see your GTM tag appear under “Tags Fired On This Event” in the main preview window.

Congratulations, you are now tracking form completions in Google Analytics! You are on your way to better understanding your web traffic.

I highly recommend spending some time poking around Google Analytics and Google Tag Manager to uncover all of the capabilities of these robust platforms. There is a ton of additional free training on these platforms if you just look for it.

About the Author

Jon Zimmerman is the Director of Marketing for WorkWise, the provider of OnContact CRM Software and has over 25 years of experience in customer relationship management.