Google Tag Manager is wonderful. Along with a friendly UI replacement for all Google codes Google Tag Manager also works to replace third-party codes. You’re also easily able to track events in Google Tag Manager including the ability to track form submission as events with Google Tag Manager. Google’s resource for tracking form submits with Google Tag Manager can be found here. Mine hopefully elaborates on this process and provides supporting images.
Why Use Google Tag Manager to Track Form Submissions as Events?
- Simplicity
- No need to access/modify code
- User management control without giving access to site source
- Validation of form submits versus erroneous submissions
- Destination URL goals can be inflated by automated crawlers
*Note that if your form submit works via Javascript that the steps below will not work because the “listener” will not identify the submission.
How to Track Form Submissions as Events with Google Tag Manager (GTM)
For this walk through on how to track form submissions as events with Google Tag Manager I’m going to presume you have a Google Tag Manager account created with a container already housing a basic tag for your Analytics code and a rule for it to fire on all pages. This container script must be placed on your site already. For example:
Google Tag Manager Container:
Google Tag Manager Google Analytics Tag (script must be on site):
1. Within your Google Tag Manager container we need to add a new tag and name it. I recommend something generic like “form submit listener.” If you have one form, or don’t mind lumping them all together, you can use a run of site solution and name it something like “Form Submit Listener” as we can break out separate forms later.
Add New > “Form Submit Listener > Tag Type = Event Listener / Form Submit Listener
2. Check both “Wait For Tags” and “Check Validation.” These are recommendations, but I think they’ll help all installs.
3. Add a firing rule for form submissions with specifying the event launch and the page the form is found on – name the rule specifically as you’ll tie your individual event to it. If you have one form you can use the default “all pages” rule. I recommend a variant of the below to isolate this form. Set one rule to {{event}} equals gtm.formSubmit and the other to {{url}} contains /page:
At the conclusion, you’ll have a form submit listener tag with a rule for what pages this should fire on and to listen for the actual submission. *Note the name of the rule to capture to the actual submission* In the above screen shot the rule name is “Contact Me.”
4. Save this tag with rules.
5. Create a new tag to track the listener as an event. Name it something that ties back to your event listener. Tag type should be Universal Analytics or Classic Google Analytics – whatever code you’re using.
6. Add your tracking ID (UA-xxxxxxxx-xx) found in your Analytics account.
7. Change track type to “Event” and modify your labels. I recommend consistency when doing your category and action for better event/goal consolidation – label should be specific:
8. Add a firing rule to trigger the rule you set in step 4. Firing Rules “+ Add” and check the rule from step 4:
9. Save your tag. Create a version container and publish. You can also test prior, but following the above steps will make any form on your specified pages track with the event labels specified in step 8.
That’s how to track form submissions as events with Google Tag Manager (GTM). You can now tie these to goals or whatever your heart desires.
