Google Tag Manager Destination

Google Tag Manager (GTM) is a tag management system that allows you to quickly update tags and code snippets on your website. Once you add the Tag Manager snippet to your website, you can configure tags using a web-based user interface without having to alter and deploy additional code. This reduces errors and frees you from having to involve a developer whenever you need to make changes. The Google Tag Manager Destination is open-source. You can browse the code on GitHub.

Getting Started

1. From the Segment web app, click Catalog.
2. Search for “Google Tag Manager” in the Catalog, select it, and choose which of your sources to connect the destination to.
3. In your Segment UI’s destination settings, enter your Container ID (note: it should start with “GTM-“). You can find this in the Admin section of your GTM dashboard.
4. GTM loads on any pages where your Segment snippet is initialized and analytics.page is called in client-side JavaScript. Once you’ve turned on GTM through Segment, you can use Segment track events to populate the GTM dataLayer, and remove the GTML snippet from your page.

Page

If you’re not familiar with the Segment Specs, take a look to understand what the Page method does. An example call would look like:

analytics.page('Home', {
  title: 'Welcome | My Website',
  url: 'https://mywebsite.com/'
});

You must call the Page method for Google Tag Manager to load. Segment includes a call to analytics.page in your default Segment snippet, so if you want GTM to work the same as if you’ve installed the GTM snippet directly, you will want to keep the Page method in your snippet.

Tracking All Pages

When you turn on the setting to Track All Pages in your Optional Settings, Segment tracks events whenever you call the page method and sends a “Loaded a Page” event to Google Tag Manager. See the track section below for more info on how Segment sends events to GTM.

Named Page Events

If you include a name parameter in your page calls and turn on the setting to Track Named Pages in your Optional Settings, Segment passes on an event to GTM for that page. For example, analytics.page('Sign up') would translate to a “Viewed Sign up Page” event. See the track section below for more info about how Segment sends events to GTM.

Categorized Page Events

If you include a category parameter in your page calls and turn on the setting to Track Categorized Pages in your Optional Settings, Segment passes an event to GTM for that page. For example, analytics.page('Docs', 'Index') would translate to a “Viewed Docs Index Page” event. See the track section below for more info about how Segment sends events to GTM.

Track

If you’re not familiar with the Segment Specs, take a look to understand what the Track method does. An example call would look like:

analytics.track('Article Completed', {
  title: 'How to Create a Tracking Plan',
  course: 'Intro to Analytics',
});

When you make a track call with GTM enabled through Segment, the event data is pushed to the GTM dataLayer.

For example, if you make this track call:

analytics.track('Played Video', {
  title: 'How to Dance the Tango',
  location: 'Tango FAQ Page'
})

Segment sends it to the dataLayer as an object like this:

{
  event: 'Played Video',
  title: 'How to Dance the Tango',
  location: 'Tango FAQ Page'
}

Troubleshooting

404 Error

If you are seeing 404 error on the JavaScript console of your page and it is attributed to Google Tag Manager, it is likely that you have yet to publish your GTM container. If the issue still persists, please ensure that Google’s preview mode is disabled and that the environment variable is removed from your destination settings.

Duplicate Events

If you have Google Ads enabled and see duplicate events in GTM, check to see if the event is set as a conversion in Google Ads. Duplicate conversions are common when you use both Google Ads and GTM, since Segment’s Adwords destination initializes the gtag script with the dataLayer itself. So, when you fire a mapped event, Segment submits the payload directly to the dataLayer.

Google recommends using transactionIds to prevent this duplication.

Appendices

UserId and AnonymousId

By default Segment pushes the anonymousId and userId(if exists) into the dataLayer for each page or track call. Since the anonymousId is created by Segment, namespaces that property in the dataLayer as segmentAnonymousId.

Environments

If you’re using an ‘environment’ variable for gtm_preview in your tag’s query string, you can set that string in the Environment of your Optional Settings. IMPORTANT: Make sure the string includes the gtm_auth variable. For example, your string should look like: env-xx&gtm_auth=xxxxx.

Consent mode

Consent mode is a feature provided by Google in the context of its products, particularly the Gtag library and Google Analytics. As of March 6, 2024, Google announced that consent mode must function for European Economic Area (EEA) users, otherwise data from EEA users won’t process.

For Google Tag Manager, consent mode settings need to be managed directly within your GTM account. There’s no direct update from Segment for the GTM destination regarding consent mode, as it’s managed within GTM tags themselves.

Segment recommends you install a consent management platform that uses the current consent-tools wrapper that’s outside of Google Tag Manager like OneTrust.

Settings

Segment lets you change these destination settings from the Segment app without having to touch any code.