Google Tag Manager: Tracking Form Submissions
Form Submission Tracking in GTM
As we know by now, Google Tag Manager is a very powerful tool that enables marketers and web developers to tag actions on a website in a single web-based interface. One of the most common actions that a marketer needs to tag is the submission of a form. Whether the form only collects email addresses for newsletter signups, or it is a multi-step form used for booking an appointment, Google Tag Manager can easily help you track submissions. Before you get started, here are some words to the wise:
Many forms are coded differently, so there is no one-size-fits-all solution for tracking them in GTM.
Be prepared for plenty of trial and error in Tag Assistant and your browser's developer tools.
Resist the temptation to build your trigger on "all form submissions" and clicks to the submit button.
Trigger-Building Scenarios to consider
As mentioned above, many forms are coded differently, and we'd need to use different triggers in order to cover different scenarios. When determining the proper trigger to use in order to track your form, be sure to ask yourself the below questions, and follow the handy flow-chart we put together
Does the form consist of a proper <form> HTML element that generates a submit event?
YES - use a Form Submission trigger
NO - proceed to question 2.
Does a successful form submission take the user to a thank you page, or is there a thank you message displayed on the same page?
Thank you page - proceed to question 3
Thank you message - use an Element Visibility trigger
Is the thank you page shared by multiple forms on the site?
YES - use a Page View trigger, but specify referrer page URL
NO - use a Page View trigger. Referrer is not necessary in this case.
Is the form an AJAX form (ask your developer)?
YES - test an Element Visibility trigger, but if it does not work, you can install the AJAX listener code from Bounteous
NO - proceed to question 5
Does the form reside inside an <iframe> tag? **PLEASE GOD, NO!**
YES - Work with the owner of the <iframe> to see if GTM or individual tracking tags can be placed or if a successful submission can be redirected to a non-iframe thank you page. If the latter is possible, return to question 3.
NO - Work with developer to safely alter/remove any tags or scripts preventing a successful submission event from being sent to GTM.
This guide should help you figure out which is the appropriate trigger for tracking your form in most cases.
The below examples are for illustrative purposes only and are not necessarily websites we have worked on.
Scenario 1: Proper <form> element that generates submit event
This is the ideal situation. What would make this situation perfect is if the form element has a static, but unique ID attribute. If there is no ID, or the ID is randomly generated for each user, then it's best to use another variable or combination of variables. Class is an acceptable attribute to use if you are hoping to track multiple similar forms on your site, but do not need to track them independently from each other. Sometimes, certain CMS platforms or form builders create unique attributes for each form that can be captured as a custom variable in GTM.
This form has an id value of sales-form.
When building your Form Submit trigger, always filter and never use "all form submissions." Some tags (i.e. the Facebook pixel, other site code) send form submission events on every page load and would send false positives to whatever conversion tag uses said trigger.
In this example, we’d use a trigger where Form ID equals sales-form.
Trigger to use: Form Submit
Trigger fires when (depending on your specific scenario):
ID equals …
Class equals…
Class equals… AND Page Path equals…
Scenario 2: Unique thank you page URL
This is another good situation. For each form that gets submitted, the user gets redirected to a thank you page unique to that form. This is a simple trigger to build, and great if you need to track multiple forms separately from each other.
This is a clean solution, but if you have many different forms, each redirecting to a different thank you page, it can get a bit unruly to manage.
Trigger to use: Page View
Trigger fires when (depending on your specific scenario):
Page Path or Page URL equals…
Page Path or Page URL equals… AND Referrer starts with…
Scenario 3: Shared thank you page URL
This is perhaps the simplest trigger to build, but beware - it may result in false positives if multiple different forms that need to be tracked separately redirect to the same thank you page. We had a client who has two different forms that represent two very different conversions. The first form always redirected users to a thank you page after a successful submission, and the second form would display a thank you message. Then one day, they began redirecting successful submissions of the second form to the same thank you page as the first form. Because they had originally built their trigger for all views of this thank you page, they were double-counting and recording lots of false positives for each conversion.
Trigger to use: Page View
Trigger fires when (depending on your specific scenario):
Page Path or Page URL equals…
Page Path or Page URL equals… AND Referrer starts with…
Scenario 4: Thank you message
Sometimes there are instances where a form submission does not send Google Tag Manager a gtm.formSubmit event, and it does not redirect to a thank you page, but a thank you message does appear. In this case, it would actually be ideal for you to work with your developer to have a custom event pushed to the data layer upon a successful form submission. If that is not possible, then we can sometimes build a trigger based upon when the thank you message shows up. We just have to find the element that the thank you message is contained within in order to build our trigger.
Some forms display a simple thank you message. We can use the element visibility trigger to detect a submission in this case.
The ID (starting with yui_3…) might change for each form submission in this particular CMS, so we will use the class (form-submisison-text) in this case.
We will use the CSS Selector method and call the form-submission-text class value by preceding it with a dot (.).
Trigger to use: Element Visibility
Trigger fires when (depending on your specific scenario):
ID equals…
CSS Selector equals… AND Page Path equals
Scenario 5: Ajax form
The form displays a thank you message, but the element visible trigger isn't working. It's possible that this is an AJAX form. GTM still does not natively support AJAX form tracking, but Bounteous has created a great solution that is free for everyone to use. The code itself is highly technical, but you just need to copy & paste and follow a few steps as outlined on Analytics Mania's blog:
Create a new blank HTML tag, and set it to fire on all pages
In Tag Assistant, submit a form
Look for the 'ajaxComplete' message on the left-hand side of Tag Assistant. If it's there, click on it. If not, then work with your developer to determine the best way to track this form.
Click Data Layer
Look for "response" inside the attributes node of the data layer
Create a Variable
Type = Data Layer variable
Data Layer Variable Name = attributes.response
Build your trigger
Trigger to use: Custom Event
Trigger fires when (depending on your specific scenario):
Event Name = ajaxComplete
Select "Some Custom Events"
attributes.response contains [success message above]
How do I QA my form trigger in GTM?
In Google Tag Manager, go to Tag Assistant by clicking the Preview button near the top-right of the interface. Then enter the URL of a page with the form that you would like to track in Tag Assistant, and then submit the form on the site. Did your tag show up in the “Tags Fired” section? If so, then your form trigger works. If not, then you may need to go back and review the above steps and try to refine your trigger. Always look at the variables tab in Tag Assistant for additional attributes to try to use in building your trigger. Also make sure that if your condition uses "equals," that your attribute appears exactly in GTM as it does in the site code.
If you need help with implementing form tracking or updating your entire Google Tag Manager container, don't hesitate to contact us via the chat or the form below. We do full GTM audits, implementations, and customizations.