Table of Contents
In this section, I will explain how to use Form Submission trigger for tracking in Google Tag Manager. Let’s look at an example. The subscription function of my blog is a form, here:
To be able to use Form Submission to track the form, the code of the page needs to meet two conditions:
- The code of the form structure is in <form> </ form>, and there is a unique class or id on it
- The type of the confirm button is submit, that is, there must be code such as type = submit.
Form tracking cannot be performed if any of the conditions are not met. Let’s see if the code structure of some subscriptions is satisfied？
See, the code structure is satisfied. When you do form tracking, you first check the code structure to see if these two conditions are met. If not, please let your colleagues in development adjust.
1、Built-In Variables with form tracking turned on
Google Tag Manager has built-in built-in variables for form tracking. It needs to be enabled before it can be used. Later trigger positioning will be used, so go first:
Click Workspace> Variables> Configure, and then check all the Form type variables:
There are six built-in variables:
Form Classes: Accesses the
gtm.elementClasses key in the dataLayer, which is set by Form triggers. This will be the string value of the classes attribute on the form.
Form Element: Accesses the
gtm.element key in the dataLayer, which is set by Form triggers. This will be a reference to the form’s DOM element.
Form ID: Accesses the
gtm.elementId key in the dataLayer, which is set by Form triggers. This will be the string value of the id attribute on the form.
Form Target: Accesses the
gtm.elementTarget key in the dataLayer, which is set by Form triggers.
Form Text: Accesses the
gtm.elementText key in the dataLayer, which is set by Form triggers.
Form URL: Accesses the
gtm.elementUrl key in the dataLayer, which is set by Form triggers.
2、Set up form tracking triggers
Click Triggers> New> Choose a trigger type to begin set-up … and select Form Submission:
Then you can see the setting interface of Form Submission:
Name it Form Submitted-Subscription.
Here are some setting options:
- Wait for Tags ：Delay form submit until all the tags that depend upon this event have fired or the specified timeout has elapsed, whichever comes first. If unselected, tags will be given a best-effort opportunity to fire, but slow tags may not fire before the form submit causes the next page to load.When checked, the following page will appear:
The default Max wait time is 2000 milliseconds, and there are options to set conditions. The effect of this setting is that it can be selected when this form event depends on other events. If it is a separate form tracking, it is not necessary to check.
- Check Validation：Only fire tags if the form will successfully submit. If unselected, fire tags whenever a user tries to submit the form.When checked, the following page will appear:The purpose of this option is to ensure that it is triggered only after successful submission, but in fact, after you check it, it will not trigger whether you succeed or not. This is a bug. Do not check it.
- This trigger fires on：There are two types of triggered positioning, one is All Forms and the other is Some Forms. Generally, the second type is selected, and the built-in variable opened in the first step is used to locate.
Here we choose Some Forms:
Click on Click Text and there will be a drop-down menu:
Familiar with these. The built-in variables that we opened in the first step are here. This time we need to use them. We choose Click Classes here, In general, Click Classes and Click ID are selected here. Remember that as mentioned earlier, one of the conditions to achieve form tracking is that the code at the form level must have a unique Classes or ID, which is used for positioning here. The middle condition is equals:
The value is Classes on the form level:
The final trigger complete configuration looks like this:
Click Workspace> Tag>New>Choose a tag type to begin set-up…>Google Analytics: Universal Analytics:
Named Event-Subscription，Then do the following settings:
Because it is used for event tracking, the choice of Track Type is Event; Category, Actions, and Label can be customized. Non-Interaction Hit is set to True. Non-interaction type is not included in the bounce rate calculation, otherwise it will affect the bounce rate.
Click Preview in the upper right corner, then open http://www.bbccss.com to enter the simulation test:
The Google Tag Manager test tool is here.
We don’t enter the email first, and click the subscription button directly: the purpose of this step is to test whether it will trigger if it is unsuccessful.
No trigger. Then we enter the email to test:
The form has been successfully submitted, see Form Submit displayed under Summary, which means that the form trigger is triggered, and then look at the Tag Fired On This Event on the right, Event-Subscription appears, indicating that the event was successfully triggered.
Form tracking succeeded.
If you still have Adobe Analytics, you can read 24 Form Tracking Implementation to compare how the two tools do form tracking.