How Do I Integrate Google Tag Manager With Unbounce?

Follow

Google Tag Manager (GTM) is a tool that allows you to quickly and easily adjust tracking and marketing automation scripts for your pages from one centralized place. For more info on Google Tag Manager check out Google's documentation here.


Unbounce's Google Tag Manager Native Integration

Unbounce has an easy way to integrate GTM code snippets to your page using the Script Manager. It would require 3 different steps:

  1. Get your Container ID from Google Tag Manager
  2. Enter your GTM Container ID in Script Manager
  3. Setting up a Custom Event in GTM to track form submissions

Step One: Get your Container ID from Google Tag Manager. 

You’ll need your container ID, which you can obtain from your GTM page, follow Google’s instructions to obtain this ID, and copy and save it for Step Two. 

Step Two: Enter your GTM Container ID in Script Manager 

  1. Log in to your Unbounce Conversion Intelligence™ Platform
  2. On the left-hand side menu, click Settings.
  3. From the drop-down menu, select Script Manager.
  4. At the top-right hand corner, click the blue button titled Add a Script
  5. Select Google Tag Manager from the dropdown menu and add your Container ID:gtm_screenshot.jpg
  6. Two panels will open Script Details and Script Usage. In the Script Usage field, select which subdomain(s) you'd like to apply the Google Tag Manager integration to:image1.png
  7. Select Save and Publish Script.

The native integration via Script Manager will automatically place the GTM code on your selected subdomain and its pages. 

  1. Be sure sure to Publish or Republish your landing page(s) connected to the Google Tag Manager script for the changes to take effect.  

Step Three: Setting up a Custom Event in GTM to track form submissions 

Now that you’ve integrated GTM with your custom domain and connected landing page, you can track form submissions by setting up an event trigger within GTM. 

Check your GTM Container for Multiple Triggers

First, be sure you've removed the Form Submission trigger in your GTM container; removing this default trigger will prevent the tag from firing twice. See the FAQ section of this article for more. 

Set up your Custom Event in GTM to track form submissions

Next, you will set up your Custom Event triggers in GTM. 

Your GTM container should only contain the Custom Event 'gtm.formSubmit' Event trigger.

  1. Follow Google's instructions on how to set up custom event triggers
  2. When you reach the Trigger Configuration step, enter the following information:
    1. For Trigger Type, select Custom Event.
    2. For Event Name, use gtm.formSubmit.
    3. Leave Use regex matching unchecked. 
    4. For This Trigger Fires On, select which option suits your needs.

Note:

Unbounce forms are submitted via an AJAX POST request, which makes it difficult to capture the form submission event when not using our native GTM integration. 


Manually Setting Up Your Google Tag Manager On A Page

  1. Following Google's documentation on setting up and installing the container on web pages, copy and paste the code snippets onto your landing page's Javascript tab (or Form Confirmation Dialog) as instructed in the Install Tag Manager box. 
  2. Republish your page so that the changes take effect.

Note: 

You may receive this warning from Google when installing your code snippet:

Screenshot_2020-04-03_at_14.50.13.png

This is an optional warning by Google, and can be ignored. 

Now you can control the tags included on your landing pages from Google Tag Manager!

If you want a little help with Google Tag Manager, check out Tag Manager Help below:

Google Tag Manager Help Centre 

Frequently Asked Questions

How can I add the global site tag (gtag.js) to my pages?

While there is no built-in integration for Google's global site tag, you can build your gtag.js script here: Add gtag.js to your site. 

Then, you can add the script to your landing pages using the Javascripts section in the Unbounce Classic Builder: Adding Custom JavaScript and CSS in the Classic Builder

Why are there duplicate form submissions?

Having both the default Form Submission and Custom Event ('gtm.formSubmit') Events in the same GTM container can cause duplicate events to fire.

In other words, if you have the default event triggers for form submissions in the container (whether or not these triggers are associated with any tags), that will cause multiple form submission events to fire on a single submission, which will then be picked up by the custom event listener.

To remedy this, you can delete the default Form Submission type trigger from the container, and then sync up any tags previously associated with the default trigger to the Custom 'gtm.formSubmit' Event trigger instead.


Do you agree or disagree with this statement: This article helped me find the information I needed quickly and easily.

Select an option and leave us some feedback in the comments:

Strongly DisagreeDisagreeSomewhat DisagreeUndecidedSomewhat AgreeAgreeStrongly Agree

Measuring Customer Effort Score with Nicereply