Use GTM Form Submission Trigger for Form Tracking | BCS Use GTM Form Submission Trigger for Form Tracking | BCSBCS

Use GTM Form Submission Trigger for Form Tracking

Google Tag Manager BCS 5 years ago (2019-12-07) 3512 Views 0 Comments

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?

Use GTM Form Submission Trigger for 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.

Case: Form tracking

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

Use GTM Form Submission Trigger for Form Tracking

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:

Use GTM Form Submission Trigger for 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.

 

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:

Use GTM Form Submission Trigger for Form Tracking

 

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:
    Use GTM Form Submission Trigger for 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:Use GTM Form Submission Trigger for 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 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:

Use GTM Form Submission Trigger for Form Tracking

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

Use GTM Form Submission Trigger for 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:

Use GTM Form Submission Trigger for Form Tracking

The value is Classes on the form level:

Use GTM Form Submission Trigger for Form Tracking

The final trigger complete configuration looks like this:

Use GTM Form Submission Trigger for Form Tracking

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:

Use GTM Form Submission Trigger for Form Tracking

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.
Like (1)
Post my comment
Cancel comment
Expression Bold Strikethrough Center Italic

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

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