Track form submissions with Google Tag Manager

Tabata Vossen -

While talking with marketers, we noticed that one of the most popular topics among them is form tracking. In this blog post, we’ll show you how to use Google Tag Manager (GTM) to track your Qualifio form submissions in Google Analytics.

Prerequisite: Your GTM tag needs to be present in the Tags of your Qualifio campaign.

Tag + Trigger

Since you are interested in form tracking, you are probably already familiar with the main GTM concept: every interaction you want to track needs a tag and a trigger. If you want to track form submissions with Google Analytics, you’ll need to create a Tag and a Trigger (rule) when a tag must fire. Creating a tag is the easy part of this process. Let’s make one!

  1. Go to Tags
  2. Press New button
  3. In Tag Configuration choose Google Analytics – Universal Analytics:
    1. Choose Track Type – Event
    2. Event Category – Qualifio form submission (feel free to choose another appropriate title)
    3. Event Action – Qualifio contact form (feel free to choose another appropriate title)
    4. Leave the Event Label part empty (for now). We’ll get back to it later.
    5. Google Analytics settings – Select or create your Google Analytics Settings Variable.
  4. Leave the Triggering part empty (again, for now). We’ll get back to it later, too ;)
  5. Click Save.

Screenshot_2019-02-26_at_16.38.56.png

Event Label

In this section, we’re going to enable Tag Manager to capture campaign titles.

Let’s go back to your Google Tag Manager container and go to Variables. Create a new user-defined variable and choose Custom Javascript as its type. The key ingredient here is the code that will help GTM understand what we are looking for:

function (){
var title = document.getElementsByClassName("campaign_title")[0].textContent;
return title;
}

This code is ready to use. Copy and paste it in your variable. Take a look at the screenshot below to see what we’re talking about:

Screenshot_2019-02-26_at_16.46.33.png

Done! Save the variable, go back to the tag you previously created and select your new variable as Event Label:

Screenshot_2019-02-26_at_16.54.55.png

Create a custom event trigger

In this section, we’re going to create a form submit trigger.

The first thing we need to do here is to inspect the submit button of a form. We’ll need to find a way how to instruct Google Tag Manager which particular element we are interested in. Before you submit the form, right-click on the submit button and choose Inspect Element.

Screenshot_2019-02-26_at_16.40.42.png

You will then see the browser’s developer tools that contain various information about the element: its content, CSS class, etc. In the example below I see that the button has an id called “register” which could be used as a condition in the click trigger.

Screenshot_2019-02-26_at_16.42.51.png

Check variables are set up to allow click ID tracking

  • Go to Variables
  • Click Configure
  • Scroll down to Clicks
  • Check the Click ID variable
  • This step is autosaved

Screenshot_2019-02-26_at_17.06.47.png

Set up click ID trigger

  1. Create a new trigger by clicking Triggers in the left sidebar and then New
  2. Give the trigger a name – for instance, “Qualifio form submit”
  3. Select type Click - All Elements
  4. This trigger fires on Some Clicks
  5. Select Click ID in the field to the left, set the middle field to equals, and type register in the field to the right.
  6. Click Save.

Screenshot_2019-02-26_at_17.11.18.png

Finish setting up your tag

  • Go back to your tag by clicking  Tags on the left sidebar
  • Scroll down to the second box and click to choose the trigger
  • Set it to fire on the “Qualifio form submit” trigger that you made earlier
  • Click Save.

Let's test!

This is where the fun starts now that all the groundwork is done. Now we just need to check if the tag works properly.

One of the brilliant things about Google Tag Manager, is the ability to preview everything you’re doing – including the triggering of clicks.

Click Overview in the left menu to get back to the home screen. Then click Preview.

Go to your campaign, where Google Tag Manager is installed. You should see the Google Tag Manager preview in the bottom half of your window.

Test your configuration with GTM’s Preview mode. You should see the tag being fired when you submit the form.

If you want to check that the event is transferred to your Analytics dashboard, visit your Analytics account.

Click Real-time > Events

Go to your campaign in another window, submit the form, and then go back to Analytics. There should be an event triggered within Analytics. In the “Event Label” column you should see the title of the campaign where the form was submitted from.

Screenshot_2019-02-26_at_17.41.22__2_.png

Please note that this tracking rule will automatically be applied to all identified Qualifio campaigns that contain your GTM tag. Indeed, once a button with the id “register” will be detected, the event will be reported in Google Analytics each time the button gets clicked on.

Once everything looks as you expect, go ahead and publish your updated GTM container. This is very important.

Conclusions

  • The objective here was to create an event in Google Analytics whenever a participant submits a form and thus creates or updates their profile. This technique is applicable to many other types of conversion.
  • This technique causes a tag to fire every time a form in a Qualifio campaign is submitted. This example assumes the submit button contains a “register” ID attribute. We can thus use this ID to create a trigger that will listen for when this form is submitted.
Powered by Zendesk