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

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:

• Set up Unbounce's Google Tag Manager Integration
• Create a custom event trigger in GTM to track form submissions
• Manually set up your Google Tag Manager on a page
• Prevent duplicate form submissions in GTM

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:
   
   
   
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:
   
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 set up the custom event trigger instead.

1. In GTM, navigate to the Triggers tab on the left-hand side, and click New:
   
   
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:
     
     
     Again, your GTM container should only contain the Custom event trigger. Be sure to remove any default Form submission triggers in your GTM container; removing this default trigger will prevent the tag from firing twice. See Preventing Duplicate Form Submissions in GTM for more insight.  

3. Once you've added the GTM tracking script to your Classic 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:

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 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:
      
      
   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:
      
3. Save and Republish your page so that the changes take effect.

Follow these same steps for other page variants as well.

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

Preventing Duplicate Form Submissions in 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