How Do I Integrate Google Tag Manager With Unbounce for Classic Builder Pages?

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: Tag Manager Overview.

This article will explain how to:

The steps in this documentation work best when configuring GTM for pages built with the Classic Builder. 

For Smart Builder pages, please see this article: Tracking Events & Form Submissions with Google Tag Manager in Smart Builder


Setting up Unbounce's Google Tag Manager Integration

You can install GTM across all landing pages with our built-in GTM integration (via Script Manager). 

To set this up, follow these three steps:

  1. Retrieving your Container ID from GTM,
  2. Setting up the Built-in GTM Integration in Unbounce, and
  3. Creating a Custom Event Trigger in GTM to Track Form Submissions 

Retrieving your Container ID from GTM

You'll need your GTM container ID to set up this integration. The container ID is often formatted as GTM-A1B2C3

See Google's documentation for installing the container to locate that ID. Copy the container ID to use in the following step. 

Setting up the Built-in GTM Integration in Unbounce

  1. Log in to the 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 drop-down menu and paste in your Container ID:
    Annotated steps on adding a GTM integration in Unbounce via Script Manager.

  6. A new window will appear with two panels: Script Details and Script Usage.
  7. In the Script Usage panel, click which subdomain(s) you'd like to apply the Google Tag Manager integration to:
    Two panels - a list of domains on the right-hand side to select from.
  8. Click Save and Publish Script to save the changes. 

The integration via Script Manager will automatically place the GTM code on your selected domain and corresponding landing page(s).

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

Creating a Custom Event Trigger in GTM to Track Form Submissions

Now that you've integrated GTM with your custom domain and corresponding landing page(s), you can track form submissions by creating a Custom event trigger in GTM. 

Though GTM contains a built-in Form submission trigger, Unbounce will not capture form submissions with this default trigger; the form submission trigger in GTM does not work with Unbounce pages, and you will need to up the custom event trigger instead.

  1. In GTM, navigate to the Triggers tab on the left-hand side, and click New:
    Create a new trigger in GTM.
  2. On the Trigger Configuration page, enter the following information:
    • For Trigger Type, select Custom Event.
    • For Event Name, type in 'gtm.formSubmit'.
      • Leave Use regex matching unchecked. 
    • For This Trigger Fires On, select which option suits your needs:
      Custom trigger setup in GTM.

Your GTM container should only contain the Custom event trigger.

Again, be sure to remove any default Form submission triggers in your GTM container; removing this default trigger will prevent the tag from firing twice.  

  1. Once you've added the GTM tracking script to your Smart Builder pages, and created the trigger, create or link the trigger to a tag in GTM.

Do you require the Form submission trigger for other integrations outside of Unbounce? See Preventing Duplicate Form Submissions to GTM for some suggestions and workarounds. 

Manually Setting Up Your Google Tag Manager on A Page

If you'd like to set up GTM manually on your pages in the Classic Builder, you can install them using the Javascripts widget

You'll need the web installation code from GTM, which includes two code snippets - so you will need to install two scripts.

Here is an example of the web installation code:
Two code snippets with GTM scripts enclosed.

To install GTM on your landing pages manually, follow these steps:

  1. Navigate to your landing page in the Classic Builder.
  2. Click the Javascripts jsbutton.png button at the bottom of the Classic Builder. A new dialog box will appear.
    1. Copy the first code snippet from GTM and paste it into the dialog box.
    2. Set the placement to Head:
      GTM script set up in <head>
    3. Click the green button titled Add Script to this Variant to add a second script.
    4. Copy the second code snippet from GTM and paste it into the dialog box.
    5. Set the placement to After Body Tag:
      GTM script set up after <body> tag.
  3. Save and Republish your page so that the changes take effect.

Follow these same steps for other page variants as well.

Note:

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

Google warning message.

This is an optional warning by Google that you can ignore. 

If you require more support from Google Tag Manager, check out Tag Manager Help: Google Tag Manager Help Centre

Preventing Duplicate Form Submissions to GTM

Do you notice duplicate form submissions in GTM? 

Setting up both the default Form submission trigger and the Custom 'gtm.formSubmit' event trigger 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, there are a few options:

  • You can delete the default Form submission trigger type from the container. Then, sync up any tags previously associated with the default trigger to the Custom event trigger instead.

Or, if the Form submission trigger is necessary for another app or third-party tool outside of Unbounce, and you must keep it, you could either:

  • Set up a separate GTM container for the Unbounce pages so that the container with Unbounce triggers only has the Custom 'gtm.formSubmit' event trigger and not the default Form submission trigger type, or,
  • Integrate GTM manually in Unbounce onto your pages as explained above: Manually Setting Up Your Google Tag Manager on A Page.

Frequently Asked Questions

Does Unbounce's Google Tag Manager installation via Script Manager work for Smart Builder pages?

The native GTM integration only works for pages built with Classic Builder.

If you want to use GTM for Smart Builder pages, you can use the built-in GTM App in Smart Builder, or install GTM manually on all pages.

See this article to learn more: Tracking Events & Form Submissions with Google Tag Manager in Smart Builder

How can I add the global site tag (gtag.js) script to my landing 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 jsbutton.pngwidget in the Unbounce Classic Builder: Adding Custom JavaScript and CSS in the Classic Builder

How can I verify that GTM is working on my landing pages?

There are a few ways to verify that GTM is firing correctly on your pages.

If you're using Chrome, you can download the Google Tag Assistant Legacy extension. 

With the extension, you can verify if the GTM script is present on the page and if an event is firing.

Another way to test this is with the GTM preview container. You can test out the GTM container (and all tags/events/etc. inside it) with it on a page before actually publishing the container.


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