1. Home
  2. Docs
  3. Google Tag Manager Guide
  4. Google Tag Manager Practical Guide
  5. Form Tracking

Form Tracking

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:

Form Tracking

 

Technical Premise

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?

Form Tracking

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.

Setup Process

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:

Form Tracking

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:

Form Tracking

Then you can see the setting interface of Form Submission:

Form Tracking

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

Form Tracking

Click on Click Text and there will be a drop-down menu:

Form Tracking

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:

Form Tracking

The value is Classes on the form level:

Form Tracking

The final trigger complete configuration looks like this:

Form Tracking

Save!!!

 

3、Set Tag

Click Workspace> Tag>New>Choose a tag type to begin set-up…>Google Analytics: Universal Analytics:

Form Tracking

Named Event-Subscription,Then do the following settings:

Form Tracking

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.

Save!

4、Preview

Click Preview in the upper right corner, then open http://www.bbccss.com to enter the simulation test:

Form Tracking

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.

Form Tracking

No trigger. Then we enter the email to test:

Form Tracking

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.


If you don't understand, You can leave a comment below or email me (haran.huang@ichdata.com).
Tags , ,
Was this article helpful to you? Yes No

How can we help?

Post my comment
Cancel comment
Expression Texture Bold Strikethrough Center Italic Sign in

Hi, you need to fill in your nickname and email!

  • Nickname (required)
  • Email (required)
  • Website