Google Tag Manager: Tracking Form Submissions

Form Submission Tracking in GTM

As we know by now, Google Tag Manager is a very powerful tool that enables marketers and web developers to tag actions on a website in a single web-based interface. One of the most common actions that a marketer needs to tag is the submission of a form. Whether the form only collects email addresses for newsletter signups, or it is a multi-step form used for booking an appointment, Google Tag Manager can easily help you track submissions. Before you get started, here are some words to the wise:

• Many forms are coded differently, so there is no one-size-fits-all solution for tracking them in GTM.

• Be prepared for plenty of trial and error in Tag Assistant and your browser's developer tools.

• Resist the temptation to build your trigger on "all form submissions" and clicks to the submit button.

Trigger-Building Scenarios to consider

As mentioned above, many forms are coded differently, and we'd need to use different triggers in order to cover different scenarios. When determining the proper trigger to use in order to track your form, be sure to ask yourself the below questions, and follow the handy flow-chart we put together

1. Does the form consist of a proper <form> HTML element that generates a submit event?

   1. YES - use a Form Submission trigger

   2. NO - proceed to question 2.

2. Does a successful form submission take the user to a thank you page, or is there a thank you message displayed on the same page?

   1. Thank you page - proceed to question 3

   2. Thank you message - use an Element Visibility trigger

3. Is the thank you page shared by multiple forms on the site?

   1. YES - use a Page View trigger, but specify referrer page URL

   2. NO - use a Page View trigger. Referrer is not necessary in this case.

4. Is the form an AJAX form (ask your developer)?

   1. YES - test an Element Visibility trigger, but if it does not work, you can install the AJAX listener code from Bounteous

   2. NO - proceed to question 5

5. Does the form reside inside an <iframe> tag? **PLEASE GOD, NO!**

   1. YES - Work with the owner of the <iframe> to see if GTM or individual tracking tags can be placed or if a successful submission can be redirected to a non-iframe thank you page. If the latter is possible, return to question 3.

   2. NO - Work with developer to safely alter/remove any tags or scripts preventing a successful submission event from being sent to GTM.

View fullsize

This guide should help you figure out which is the appropriate trigger for tracking your form in most cases.

The below examples are for illustrative purposes only and are not necessarily websites we have worked on.

Scenario 1: Proper <form> element that generates submit event

This is the ideal situation. What would make this situation perfect is if the form element has a static, but unique ID attribute. If there is no ID, or the ID is randomly generated for each user, then it's best to use another variable or combination of variables. Class is an acceptable attribute to use if you are hoping to track multiple similar forms on your site, but do not need to track them independently from each other. Sometimes, certain CMS platforms or form builders create unique attributes for each form that can be captured as a custom variable in GTM.

View fullsize

This form has an id value of sales-form.

When building your Form Submit trigger, always filter and never use "all form submissions." Some tags (i.e. the Facebook pixel, other site code) send form submission events on every page load and would send false positives to whatever conversion tag uses said trigger.

View fullsize

In this example, we’d use a trigger where Form ID equals sales-form.

Trigger to use: Form Submit

Trigger fires when (depending on your specific scenario):

• ID equals …

• Class equals…

• Class equals… AND Page Path equals…

Scenario 2: Unique thank you page URL

This is another good situation. For each form that gets submitted, the user gets redirected to a thank you page unique to that form. This is a simple trigger to build, and great if you need to track multiple forms separately from each other.

View fullsize

This is a clean solution, but if you have many different forms, each redirecting to a different thank you page, it can get a bit unruly to manage.

Trigger to use: Page View

Trigger fires when (depending on your specific scenario):

• Page Path or Page URL equals…

• Page Path or Page URL equals… AND Referrer starts with…

Scenario 3: Shared thank you page URL

This is perhaps the simplest trigger to build, but beware - it may result in false positives if multiple different forms that need to be tracked separately redirect to the same thank you page. We had a client who has two different forms that represent two very different conversions. The first form always redirected users to a thank you page after a successful submission, and the second form would display a thank you message. Then one day, they began redirecting successful submissions of the second form to the same thank you page as the first form. Because they had originally built their trigger for all views of this thank you page, they were double-counting and recording lots of false positives for each conversion.

View fullsize

Trigger to use: Page View

Trigger fires when (depending on your specific scenario):

• Page Path or Page URL equals…

• Page Path or Page URL equals… AND Referrer starts with…

Scenario 4: Thank you message

Sometimes there are instances where a form submission does not send Google Tag Manager a gtm.formSubmit event, and it does not redirect to a thank you page, but a thank you message does appear. In this case, it would actually be ideal for you to work with your developer to have a custom event pushed to the data layer upon a successful form submission. If that is not possible, then we can sometimes build a trigger based upon when the thank you message shows up. We just have to find the element that the thank you message is contained within in order to build our trigger.

View fullsize

Some forms display a simple thank you message. We can use the element visibility trigger to detect a submission in this case.

View fullsize

The ID (starting with yui_3…) might change for each form submission in this particular CMS, so we will use the class (form-submisison-text) in this case.

We will use the CSS Selector method and call the form-submission-text class value by preceding it with a dot (.).

Trigger to use: Element Visibility

Trigger fires when (depending on your specific scenario):

• ID equals…

• CSS Selector equals… AND Page Path equals

Scenario 5: Ajax form

The form displays a thank you message, but the element visible trigger isn't working. It's possible that this is an AJAX form. GTM still does not natively support AJAX form tracking, but Bounteous has created a great solution that is free for everyone to use. The code itself is highly technical, but you just need to copy & paste and follow a few steps as outlined on Analytics Mania's blog:

1. Create a new blank HTML tag, and set it to fire on all pages

2. In Tag Assistant, submit a form

3. Look for the 'ajaxComplete' message on the left-hand side of Tag Assistant. If it's there, click on it. If not, then work with your developer to determine the best way to track this form.

4. Click Data Layer

5. Look for "response" inside the attributes node of the data layer

6. Create a Variable

   1. Type = Data Layer variable

   2. Data Layer Variable Name = attributes.response

7. Build your trigger

View fullsize

Trigger to use: Custom Event

Trigger fires when (depending on your specific scenario):

• Event Name = ajaxComplete

  • Select "Some Custom Events"

  • attributes.response contains [success message above]

How do I QA my form trigger in GTM?

In Google Tag Manager, go to Tag Assistant by clicking the Preview button near the top-right of the interface. Then enter the URL of a page with the form that you would like to track in Tag Assistant, and then submit the form on the site. Did your tag show up in the “Tags Fired” section? If so, then your form trigger works. If not, then you may need to go back and review the above steps and try to refine your trigger. Always look at the variables tab in Tag Assistant for additional attributes to try to use in building your trigger. Also make sure that if your condition uses "equals," that your attribute appears exactly in GTM as it does in the site code.

If you need help with implementing form tracking or updating your entire Google Tag Manager container, don't hesitate to contact us via the chat or the form below. We do full GTM audits, implementations, and customizations.

Google Tag Manager: Tracking Button Clicks with GTM

Why track button clicks in Google Tag Manager?

Google Tag Manager is a very powerful tool, that enables marketers and web developers to tag actions on a website in a single web-based interface. Sometimes an action that a marketer needs to tag is as simple as clicks to a button. Depending on the site's business, a button click could be the main conversion action (i.e. an affiliate link) or it could be an engagement micro-conversion (i.e. open a video). In either case, a marketer would want to track a button, and thankfully Google Tag Manager makes it easy to do so.

How to track button clicks in Google Tag Manager

In order to track button clicks in Google Tag Manager, we need to create a trigger that fires whenever that button is clicked. How do we do that?

First we identify the button(s) you're looking to track. Then we right-click on the button and select inspect element. We’ll then see the html code associated with the button we clicked on.

View fullsize

This example does not have an id or class attribute, so we need to use other variables to properly track it.

In the code, find an attribute that is either unique to the single button that you're tracking or uniform across the many buttons that you're looking to track. If you're tracking a single button, it's best to use the id of the button if there is one, since id is an attribute that is unique to a single element on a page. If not, other characteristics may be used such as the text on the button in combination with the path or full URL of the page where the button resides. You can use Tag Assistant in order to verify that the elements you want to use are in fact correct. If you're tracking multiple similar buttons, it's best to use the class of these buttons if it is the same across these buttons, but not inclusive of other buttons that you don't want to track at this time. We are tracking a single button in this case, so we’ll use Click Text and Click URL in order to create our trigger.

View fullsize

In GTM, create a new trigger

View fullsize

Select the type Click - All Elements. Then select the "Some Clicks" radio button under This trigger fires on, and then select the firing condition. This particular trigger will fire on all clicks when the Click Text equals CONTACT US, and the Click URL contains #contact-form. Then name your trigger and save it.

View fullsize

Apply this trigger to a tag. You can add a blank HTML tag to your container and apply this trigger if you want to QA before sending false-positive data to GA or other platforms.

View fullsize

How do I QA my button click trigger?

In Google Tag Manager, go to Tag Assistant by clicking the Preview button near the top-right of the interface.

Then enter the URL of a page with your button in Tag Assistant, and then click on the button that you created the trigger for on your site. Did your tag show up in the “Tags Fired” section? If so, then your button click trigger works. If not, then you may need to go back to step 2 above and try another attribute. Also make sure that if your condition uses "equals," that your attribute appears exactly in GTM as it does in the site code.

Our blank tag has successfully fired.

If you need help with implementing click tracking or updating your entire Google Tag Manager container, don't hesitate to contact us via the chat or form below. We do full GTM audits, implementations, and customizations.

Google Tag Manager - Getting Started

**This article has been updated in January, 2021 to reflect the change that replaced Preview Mode with Tag Assistant. For familiarity’s sake, this post shows how to install the Google Analytics 3 (Universal Analytics) tag. Once GA4 becomes more ubiquitous, we will update this article again to install GA4 via GTM.

Everyone has already told you that Google Tag Manager will make your life easier, but how do you get it on your site? Luckily it's very easy to install Google Tag Manager (GTM). We'll discuss how to set up your Google Tag Manager account, install GTM on your site, and adding & publishing the Google Analytics Universal Analytics tag.

Setting Up Your Google Tag Manager Account

Go to Google Tag Manager and make sure that you're signed into the Google Account that you want to use (or create a new one here).
Click the Create Account button to create a new account

Fill in the appropriate information for Account Name and Container Name; select the Target platform (Web if this is for your website) and click the Create button

Read and accept the Google Tag Manager Terms of Service Agreement. At this time It is also advisable to check "I also accept the Data Processing Terms as required by GDPR."

Installing Google Tag Manager to your Site

After creating the account and container, you will immediately be greeted with a prompt to copy & paste some code onto your site. Follow the instructions and paste the code from the top window as high in the <head> as possible on every page of the website. Next, paste the code from the second window immediately after the opening <body> tag.

A couple of words to the wise…

1. DO NOT SEND THIS CODE IN THE BODY OF AN EMAIL!

2. DO NOT SEND THIS CODE AS A MS WORD ATTACHMENT!

 If you must email this code to someone else, paste it into Notepad and save as a Text (.txt) file before attaching to email. Sending in the body of an email or in a Word document may result in formatting that breaks the code.

Google Tag Manager and your Content Management System

Since we are well-past the Web 1.0 era of static websites, chances are that your site is built on a Content Management System (CMS). The process for installing GTM to your CMS may vary, but in most cases the process is straightforward. In many cases, your CMS may have an easy integration with Google Tag Manager, and you only need to copy the container ID (looks like GTM-XXXXXXX) into your CMS to get started. See below for some helpful links on installing GTM on popular CMS platforms:

• Wordpress
• SquareSpace
• Shopify
• Magento
• Drupal
• Joomla

Installing the Google Analytics tag to your GTM container

Now that Google Tag Manager is installed on the site, let's install your first tag. I'll assume that you already have created your Google Analytics account, or you are using an account that already exists. If you still need to create your account, go to Google Analytics create your account before proceeding.

In your Google Analytics Account, click Admin at the bottom of the left-hand-side panel.

Then click Tracking Info >> Tracking Code and copy the Tracking ID that you see on the screen. It will look something like UA-123456789-1.

Go back to your Google Tag Manager window. We now need to create the Google Analytics Settings variable using this tracking ID. To do so, click Variables on the left-hand-side panel, and then the New button in the User-Defined Variables box.

Next, give the variable a unique name like GA Settings, and then click inside the Variable Configuration box to select the variable type. After you do so, a panel with a list of different variable types will show up on the right side of the screen. About 3/4 of the way down this list will be Google Analytics Settings.

Click on it. Then input your Tracking ID that you just copied from Google Analytics. Then click Save.

Next, we must create the Google Analytics Tag. On the left-hand-side panel, click Tags, and then click the New button.

Give this tag a unique name like GA Universal Page View, and then click the Tag Configuration box to select the tag type. Next select the Google Analytics: Universal Analytics tag which should be the first option in the right panel.

Leave the Track Type as Page View. In the second drop-down menu, select the variable that you just created.

Next, we'll need to apply a trigger to tell this tag when to fire. Since this is our universal page view tag that should appear on all pages, we will select the default All Pages trigger that is already created in your GTM account.

Now our tag should look like the below. Click Save.

Tag Assistant (Formerly Preview Mode) - Your Bestest Friend in the Whole World

Almost there! It's always a good idea whenever adding a tag to verify that the tag is firing before publishing it to the live website. A 2020 update has changed (for the better) how we QA our tags. We perform this QA by using what is known as Tag Assistant. Tag Assistant records the entire session across pages instead of showing you what happens individually on the current page. To enable Tag Assistant, simply click the Preview button near the top right of the page in GTM.

Next, a new browser tab will open, and you will be prompted to enter a URL. Enter the URL where you would like to QA your tag(s), and click the Start button. You should also leave the box checked that says "Include debug signal in the URL" unless adding this parameter would break your website.

In a third tab, you'll be taken to the page that you entered. You will notice that gtm_debug=x has been appended to your URL if you left the box checked in Tag Assistant.

Also you'll notice that there is a message that pops up in the bottom-right of your browser window that says "Debugger connected."

Now you are ready to verify that tags are firing. Back in the Tag Assistant tab, you should see a panel taking up the majority of your window. In that panel, you should see a summary of the tags that have been fired on this page, and the tags that have not been fired on this page. Since we configured the GA Universal Page View tag to fire on all pages, this tag should appear under the Tags Fired On This Page section.

To further verify that it is firing on all pages (and that GTM is installed on all pages), go back to the tab with your site and navigate through a handful of pages. After going to a few pages, go back to Tag Assistant and confirm that the tag appears in the "Tags Fired" section for each page. Seeing activity for each page is as easy as clicking on the page title as it appears on the left-hand side of Tag Assistant.

NOTE - after you're done QAing your tags, don't forget to exit Tag Assistant by clicking the X at the top-left of the window and then clicking "STOP DEBUGGING."

In order to save yourself a step for next time, check the box that says "Keep the domain [yourdomain.com] enabled for debugging."

After you've verified that GTM is installed, and your Universal Analytics tag is firing properly, it is time to take a deep breath and publish to the live container on the website. To do this, click the Submit button near the top right of the page.

Then enter a name and description summarizing the changes you made, and click Publish.

That's it! Now that you've installed Google Tag Manager and deployed the Google Analytics Universal Page View tag, you're able to see data populating in your Google Analytics account when users begin visiting your site.

 You now also have the ability to add more tags, triggers, and variables. Google Tag Manager is a very powerful platform, and once you understand how it works, you can use it for so much more than just adding the GA Page View tag to your site. Our team has been installing and customizing GTM for years and can help you take your site tracking to the next level.