How to track leads with Google Tag Manager form submit tracking

Are you running ads on Facebook, Google AdWords or another service? Learn how to track the sources of your WordPress form leads with Google Tag Manager form submit tracking.

This is how I setup the event tracking on my own as well as my customers' websites. This guide assumes you've already setup the following:

1. A Google Tag Manager container within your website.
2. Analytics tracking within Tag Manager.
3. A fully functional form on a page.

If you are using Google Analytics without Google Tag Manager, learn how to set up Google Analytics with your forms.

Step 1: Setup triggering on all clicks

Before tracking form submissions, all clicks on your site need tracking. This means every click reacts within the variables that Google Tag Manager operates with. No worries – it's far more simple than it sounds.

1. In your Google Tag Manager dashboard, click on 'Triggers' in the left menu.
   
2. Click on the red 'New' button.
   
3. In the new panel, click 'Choose a trigger type to begin setup'. Then select 'All Elements' below 'Clicks' on the right sidebar. Name your trigger with something that clarifies what it is. I chose 'Clicks – All'.
4. Click the blue 'Save' button in the top right corner that appears when you’ve selected 'All Elements'.

Now that you've added a click trigger, you can setup Google events (and other sorts of tracking) on the clicks happening on your site.

Step 2: Add more variables

More variables are needed in the preview mode to track form submissions (that you will learn more about later).

Click 'Variables' and then 'Configure'. Add variables under 'Clicks' then click 'Overview'. Each added variable is autosaved.

Step 3: Use preview to track clicks

One of the brilliant things about Google Tag Manager, is the ability to preview everything you're doing – including the triggering of clicks.

Click 'Overview' in the left menu to get back to the home screen. Then click 'Preview'.

Go to your website, where Google Tag Manager is installed. You should see the Google Tag Manager preview in the bottom half of your window.

In the summary to the left, you can what happens when you click (that's the click trigger).

In the following screenshot I clicked the submit button to get the relevant variables, followed by an instant press on my escape button (that is very important, or the site will reload itself, and the variables will disappear). If you can't get it to stop refreshing, go to your form settings and set it to redirect after submit (you can always change it back when you have the variables you need) – or you can just trust me, and use the settings I use in this guide. ?

As you can see, there are numerous variables for the form submission. The 'Click classes' variable with the value 'frm_button_submit' is the variable we are interested in.

Step 4: Make a trigger from the variable

Now add the variable to a trigger within Tag Manager.

1. Click 'Triggers' in the left side menu, then 'New' → 'Choose a trigger type to begin setup'.
2. Select 'Click – All Elements' and this time also select 'Some Clicks'.
3. Select 'Click Classes' in the field to the left, type 'frm_button_submit' in the field to the right, and set the middle field to 'contains'.
   
4. Click save.

Step 5: Add a tag (aka event tracking in Google Analytics)

This is where the fun starts now that all the ground work is done. Now we just need to setup a 'tag' and check if it works.

1. Click 'Tags' in the left side menu, then click the red 'New button'
   
2. Click 'Choose a tag…' then 'Universal Analytics'.
3. In 'Track Type' select 'Event'.
4. Fill out Category and Action. Usually I only use Category and Action and fill them out as such:Category: form

   Action: {{Page Path}} (click the plus to the right to select it)

   {{Page Path}} shows which page the form was submitted from. The is very useful if you have the same Formidable form on multiple pages.

5. In 'Google Analytics Settings', select the Analytics tag that you made before reading this guide.Remember to name your tag properly.
   
6. Now add the trigger created in Step 5. Whenever anyone is activates the trigger (in this case clicking the submit button), the event we just made is sent to Google Analytics and gives the 'hit' to track.Click 'Choose a trigger to make this tag fire…' and select 'form submit' (or whatever you named your trigger).
   
7. Click save.

You’ve now successfully made a tag that fires an event to your Analytics whenever your form is submitted.

Step 6: Check if the tag works properly

Start by refreshing your preview so your new tag appears.

Visit your site. In the Preview screen you should see your new event:

As you can see, it's not 'fired' – this is because we haven't pressed the submit button yet.

If your tag is setup correctly, you should see the tag change from 'not fired' to 'fired' when you click on the form submit button.

If you want to check that the event is transferred to your Analytics dashboard, visit your Analytics account.

Click Real-time > Events

Go to your website in another window, submit a form, and then go back to analytics. There should be an event triggered within analytics. In the 'Event Action' column you should see the URL where the form was submitted from.

To effectuate these changes click the blue submit button in the upper right corner of Google Tag Manager – this is very important.

Google Tag Manager form submit tracking

Now that you know how to add a click trigger and custom trigger and how to combine them with tags, the possibilities are endless. Track what you want and make scripts load when you choose.

Hope you enjoyed my guide ?. If you aren't using Formidable Forms yet, learn more about this awesome WordPress form builder plugin.