Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

In this post I’ll show you one of the most reliable Google Tag Manager Form Tracking methods – form auto-event listener. This blog post is a part of much larger and comprehensive guide – 5 Google Tag Manager Form Tracking Methods.

You are probably already familiar with main GTM concept: every interaction you want to track needs a tag and a trigger. If you want to track all form submissions with Google Analytics, you’ll need to create a Google Analytics Tag and a Trigger (rule) when a tag must fire. Creating a tag is the easy part of this process. Let’s make one – you’ll need it in next chapter of this blog post):

  1. Go to Tags
  2. Press New button
  3. In Tag Configuration choose Universal Analytics:
    1. Paste your Google Analytics ID (e.g. UA-XXXXXX). It would be better if you pasted it as a constant variable.
    2. Track Type – Event
    3. Event Category – Form submission (feel free to choose another appropriate title)
    4. Event Action – Contact Form (feel free to choose another appropriate title)
    5. Event Label – {{Page URL}}. P.S. Feel free to choose other values for event category, action and label.
    6. Leave other fields as they are.
  4. Leave the Triggering part empty (for now) and click Save. We’ll get back to it in next chapter of this blog post.

GA form submission event

 

Let’s create a trigger

First, let’s try GTM’s built-in form listener. Open list of Variables in your GTM account. Under built-in variables click Configure and in the right sidebar enable all Form variables (all changes are automatically saved).

google tag manager form variables

Then open a list of all your triggers (by clicking Triggers in the left sidebar). Create new trigger:

  • Title “All form submissions”.
  • Trigger type – Form submission.
  • Leave Wait for tags unchecked.
  • Click Check validation checkbox. Once this is checked, GTM will not fire the Trigger if the default action of the form (submit and redirect) is prevented. If left unchecked, the Trigger will go off whenever a submit event is registered (even when form is submitted with errors (e.g. several required fields are left blank)).
  • Fire on. In this example I want to track all forms.

all forms trigger google tag manager

Now, let’s use GTM’s Preview and Debug mode to find out whether default form auto-event listener works for us. At the top-right corner of your Google Tag Manager account, expand Publish button’s options and click “Preview”.

Google Tag Manager Publish Container

Once the preview mode is enabled, navigate to the site with published and you will see a debug console at the bottom of your browser showing detailed information about your tags, including their firing status and what data is being processed. This console window will appear only on your computer as you preview the site, and is not visible to your other website visitors. It should look something like this:

preview and debug console

If you have already opened that page with the form but don’t see GTM’s debug console, refresh the page. If you still face problems, I suggest reading more about most common Google Tag Manager mistakes to find the solution.

Let’s get back to Google Tag Manager form tracking. Fill in the form (try not to leave any fields blank):

  1. Hit the submit button. Did a gtm.formSubmit event appear in the Preview and Debug console? If not, then GTM’s Form auto-event listener will not work with this form and you should choose other form tracking options described in this blog post.
    formSubmit event
  2. If gtm.formSubmit event did appear in Preview and debug console, then you should do another test – try leaving at least one required form field empty and submit the form again. This way you’ll imitate an error in your form:
    1. If gtm.formSubmit event fired once again, then you should check other Google Tag Manager form tracking options mentioned in this blog post.
    2. If gtm.formSubmit event did not fire – that’s awesome! It means that GTM will track only those form submissions which were successfully completed (and this is exactly what you need).

Great! We’ve identified that our form can be tracked with GTM’s built-in form listener. Let’s create a trigger specifically for that form. Remember gtm.formSubmit event that was previously mentioned? Click on it (in Preview and Debug mode), then click Variables.

Google Tag Manager form tracking

Then scroll down and start looking for any Form variable that is unique for that form. Usually it will be Form ID variable, in other occasions – Form Classes (but Form ID is the best option (if possible)). As you can see in the image below, I have submitted a form (of which Form ID variable is form_contact2).

form submission variables

This is a good identifier that is not used on any other elements in the website, so I’ll use it for my trigger:

  1. Go to Triggers and click New
  2. Click Trigger configuration section and choose trigger type – Form submission
  3. Click Check validation and set the rule Page URL matches RegEx (.*)This rule means that this form submission trigger will be available on all pages. If you want to make it accessible only on particular pages, you can add more specific rules, such as Page URL contains /contact-us/ (it depends on URL of your contact form).
  4. Then configure this trigger to fire only on some forms and enter the following rule: Form ID equals form_contact2.
    1. If you don’t see Form ID variable – Enable it in the list of Built-in variables of Google Tag Manager.
    2. Form ID may (and probably will) be different in your situation (compared to my example).

Form submission trigger

LET’S TEST

  1. Assign this new trigger to Google Analytics Tag that you created in the beginning of this blog post.
  2. Open (or refresh) a Preview and Debug mode, refresh a web page with a form you want to track.
  3. Then fill in the form and submit – if Google Analytics Tag fired, that’s good news! Also (if possible), try submitting different form on your website: in case of successful submission a GA tag should not fire.

 

in case form auto-event listener doesn’t work for you

I have created a very detailed Google Tag Manager form tracking guide which includes 5 different form tracking techniques. If form tracking with Google Tag Manager form auto-event listener didn’t work for you, make sure you check other options mentioned here.

If you have questions, feel free to contact me via social media accounts or write a comment in this blog post.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn