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:
- Retrieving your Container ID from GTM,
- Setting up the Built-in GTM Integration in Unbounce, and
- 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
- Log in to the Unbounce Conversion Intelligence™ Platform.
- On the left-hand side menu, click Settings.
- From the drop-down menu, select Script Manager.
- At the top-right-hand corner, click the blue button titled Add a Script.
- Select Google Tag Manager from the drop-down menu and paste in your Container ID:
- A new window will appear with two panels: Script Details and Script Usage.
- In the Script Usage panel, click which subdomain(s) you'd like to apply the Google Tag Manager integration to:
- 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.
- In GTM, navigate to the Triggers tab on the left-hand side, and click New:
- 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.
- 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
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:
- Navigate to your landing page in the Classic Builder.
- Copy the first code snippet from GTM and paste it into the dialog box.
- Set the placement to Head:
- Click the green button titled Add Script to this Variant to add a second script.
- Copy the second code snippet from GTM and paste it into the dialog box.
- Set the placement to After Body Tag:
- Save and Republish your page so that the changes take effect.
Follow these same steps for other page variants as well.
You may receive this warning from Google when installing your code snippet:
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 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
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.
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.