Google Tag Manager Tutorial Part 3: Tracking Form Submissions in GTM Version 2

Google Tag Manager v2

|

03. September 2015

 | 

Part 3: Form Submissions

In the third part of our updated Google Tag Manager Tutorial for GTM Version 2, we show how to track form submission. Tracking forms with Google Tag Manager is a particularly useful technique when your website does not show easy-to-track confirmation pages after users fill out a form.

This tutorial will show you how to track form submissions using the example of a contact form. What you will find here is an example configuration.  Since every website is a little different, you will have to adapt this example.  The steps below describe the general process and indicate which parts need to be changed for your specific website. 

1.     Inspect the Form

If you inspect the form on your website with your browser's developer tools, you can look at the html elements that make up the form. In Chrome, for example, right click on the form and select "Inspect element" to see the html.

Form element HTML

You need to find some attributes that are unique to the form. Here you can see that the form has an id, "contact-form".  This is a good identifier that is not used on any other elements in the website. If your form does not have a unique id, you could also use the form classes, the form action url, or the form text to identify this particular form. Using id or classes is simplest, so we recommend using these if possible.

2.     Enable a Built-in Form Variable

Now that you have an identifier for your form, you can enable the appropriate variable in Google Tag Manager.  In the Google Tag Manager interface under Variables, check the box next to the type of form variable that you found in the previous step.  For example, if your form has a unique id, then you will enable "Form ID", if it has unique classes then you will enable "Form Classes", etc.

GTM Variables for Forms

3.     Create a Form Submission Trigger

This trigger defines what is a contact form submission.  It listens for form submissions on particular pages of your website, and checks whether they are the contact form that you specify.

  1. Under Triggers, click "New".
  2. Replace "Untitled Trigger" with a descriptive name like "Contact Form Submission".
  3. Choose Event "Form".
  4. Configure Trigger:
  • Do not tick checkbox "Wait for Tags". We do not recommend using the "Wait for Tags" option by default with forms, since it can break form submission. It is safe to use if you thoroughly test it.
  • Tick checkbox "Check Validation". This checks that the form is actually submitted.
  1. Enable When:
  • Select options: Page Path contains "contact". This enables the trigger on pages that have "contact" in the path, for example, http://www.amazeemetrics.com/en/contact. You should change this to enable the trigger on the page or pages of your website that contain the contact form. You can also enable the trigger on all pages, if required.
  1. Fire On:
  • Select options: Form ID contains "contact-form". This uses the variable you enabled in Step 2 and the unique id you identified in Step 1 to specify exactly which form you want to track as a "Contact Form Submission". Change "Form ID" to whichever variable you enabled in Step 2, and change "contact-form" to the identifier you found in Step 1.
  1. Click "Create Trigger" to save.

GTM trigger for contact form

4.     Create Form Submission Event Tag

The last step in tracking form submissions is simply creating a tag that will record the event in Google Analytics with the labels that you want.  The event occurs when the conditions of the Contact Form Submission trigger that you set up in the previous step are met.  Now all you need to do is put all the pieces together in this tag:

  1. Under "Tags", click "New".
  2. Replace "Untitled Tag" with a descriptive name like "Contact Form Submission Event".
  3. Choose Product: Select "Google Analytics".
  4. Choose a Tag Type: Select "Universal Analytics" or "Classic Google Analytics", depending on which tracking codes you currently use on your website.
  5. Configure Tag:
  • Tracking ID: Enter the Tracking ID of the Google Analytics property for your website.
  • Track Type: Select "Event".
  • Category: Enter "Form".
  • Action: Enter "Contact Form Submission". You can rename the event category and action to match whatever event naming convention you use.
  • Label: Enter "{{Page Path}}". This is optional. We find it helpful to be able to quickly see what page a form was submitted on.
  • Non-Interaction Hit: Select False.  This means that this event will change your bounce rate, because it will be counted as an interaction on your site. You should decide if you prefer to count form submissions as interactions or not, and adjust this accordingly.
  1. Fire On:
  • Select "Form".
  • From the "Choose from existing Form Triggers" menu that pops up, select the "Contact Form Submission" trigger you created in step 3.
  1. Click "Create Tag" to save the tag.

GTM tag for contact form

You're almost done!  As always, you should debug the setup to make sure it is functioning, save a version, and publish it.

The three parts of this tutorial for Google Tag Manager Version 2 have demonstrated how to track outbound links, file downloads, and form submissions. Are there other types of events you would like to track?  Are you ready for more complicated tags, or are you already overwhelmed? Let us know in the comments! If you need extra help, please feel free to send me an email.

Comments

Hi

I need to check that completing a form is successful.

So I started implementing the tag to check the form and its trigger that I set in this way (I read 3 guides and all three said to do so) -> bit.Ly/2sSppQk

But with this set, nothing starts, because, going to see on the site, I see this error bit.Ly/2sI5MMq which does not appear if I turn off "Check Validation".

So, what do I wrong? Is there a mistake in the site code? Do I have to give up the tag on my site?

Thank you!!!

Hi Nikki.

I'm so glad the tutorials were able to help you. The problem you are having is a little tough to diagnose at a distance. Though I can offer some starting points for debugging.

If you are using a third party tool (an email campaign manager or CRM tool for example) to collect your mailing list subscribers then the form submit button may include an action URL to that provider. If this is the case you simply need to make sure that you modify the 'fire on' section of your outbound click trigger to exclude this url as well as your own.

If this is not the case then the first steps I would take are to double check the fire on section for the outbound link trigger to make sure it is properly excluding the action URL for the form (which should be your site). I would also recheck the implementation of the form and click variables in the 'fire on' sections of the triggers to make sure they are in the right places.

I hope this helps. Please let me know if you are still stuck.

Good luck.

Jonathan

These tutorials have been a HUGE help - thank you! One snag, though. I did to above steps to start tracking my mailing list submission form on my homepage, but it's also triggering 'Outbound Link Tracking' now and I don't want it to. I tried adding the form as an exception on the outbound link tracking tag, but it's still firing when I click submit.

Hi mmp15,

If I understand your question correctly, you are bringing in an appilcation. Without knowing the interworkings of your application and its code or how it renders itself (eg iframe kind of senario etc) it is difficult to help or to advise. Please feel free to send me an email for individual consulting.

Hello.

I need to add an Adwords conversion pixel for Intercom.io live support chat. I need to fire pixel every time a customer send a message through live chat.
What I already did:
1. Added Intercom.io tag (Custom HTML. Fire on All pages).
2. Found form id in page code.
3. Created a new tag with trigger (form submission)
4. Unchecked "Check validation"
5. Make it Fire on "some forms". Added Form ID equals intercom-composer.

Basically, I need to make one tag (adwords pixel) work inside of other tag (intercom.io live chat).

But Unfortunately, it does not want to work. Probably, because this form id "intercom-composer" is loaded only when I click on message icon.

Would be happy if anyone can help me with that.

Thank you.

Hi Dan,

Unfortunately, yes, I have plenty of experience with triggers not working as expected. If you are tracking forms, this is especially true.  Here is some good info from Simo Ahava about common problems with forms: http://www.simoahava.com/analytics/track-form-engagement-with-google-tag... .

Troubleshooting and debugging event tracking is a much bigger subject than I can answer in a comment. If you can provide me with a specific example, maybe I can point you in the right direction.

best,

Laura

For some reason, none of my event tags are firing. There are also no blocking triggers. Have you experienced any issues with form event tracking in GTM? If so, how did you fix them?

Hi Don,

Yes, the approach in the older blog post about AJAX forms is still a good way to track these forms. The Custom HTML tag can be used in GTM v2, but you have to convert the Firing Rule to a GTM v2 Trigger using the same logic as described in that post.

best,

Laura

I was wondering if there was any update for V2 and Ajax. You'd originally published http://www.amazeemetrics.com/en/blog/google-tag-manager-tracking-ajax-forms and I'm not sure if it still applies as the best way to track an ajax submitted form.

Thanks for posting all this great info that helps the rest of us understand how to get it done.

Hi Luca,

The problem is with the form, not your tracking.  I quickly used Simo Ahava's GTM Sonar  to test your form, and the result showed that the form is not compatible with GTM form submission tracking.  I recommend you read Ahava's post about common problems with conflicting scripts: http://www.simoahava.com/analytics/dont-gtm-listeners-work/

In addition, the error 'FORM NOT VALID' appears in the console. This may be related. 

Good luck debugging!

best,

Laura

Add comment