Use GTM Form Submission Trigger for Form Tracking

Table of Contents

In this section, I will explain how to use Form Submission trigger for tracking in Google Tag Manager.

Meet Form Submission

Form submission trigger is to fire a tag when a form has been sent, can be used to track successful form submissions.

Form Tracking Requirements

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.

Case: Form tracking

Let’s look at an example. The subscription function of my blog is a form, here:

The first step is to check the source code of the page to determine whether it meets the Form Tracking Requirements.

Configure Variables

Google Tag Manager has built-in built-in variables for form tracking. It needs to be enabled before it can be used. If you have already enabled it, please ignore this step.

In GTM，click 「Variable」——「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.

Configure Triggers

In GTM，click「Triggers」——「New」——「Choose a trigger type to begin set-up」——「Form Submission」，name it “Form Submitted-Subscription”, then you can see the setting interface of Form Submission:

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 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:

Save!!!

Configure Tags

Click 「Tags」——「New」——「Choose a tag type to begin set-up」——「Google Analytics: Universal Analytics:」，named “ Event-Subscription”，then do the following settings:

Save！

Preview

Click Preview in the upper right corner, then open http://www.bbccss.com to enter the simulation test, If the test is successful, it can be published.

If you don't understand, You can leave a comment below.