Search
Close this search box.
Search

How to Track a WordPress Form Lead with Google Tag Manager

Listen to this article

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:

Image 1_tag manager example

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.

Image 2_tag manager example

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.

Image 3_analytics example

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’});”

Image 4_Contact Form 7

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”

Image 5_Contact Form 7 GTM

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.

WisdmLabs

WisdmLabs

2 Responses

  1. Hi Jon,

    Thanks for the simple article. It is well written. Is there another way of “Tracking with Contact Form 7” without page redirect since “on_sent_ok:” is now deprecated? I have a few forms on my webpage that I would like to track.

    Thanks in advance
    Carlos

  2. Hi Jon,

    Same Question as Carlos above – any alternative solutions since on_sent_ok is deprecated?

Leave a Reply

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

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads

    Unlock 100% Value of GA4

    Speak to our GA4 experts for FREE and make analytics work harder for your success — Derive valuable insights with an easy, customized Google Analytics setup.