Guide to using Segment, Google Analytics and Tag Manager together

Segment is a solid product that is great at deploying marketing data to several destinations at the click of a button, that’s one of it’s primary USP’s and it is very good at it. However, you may have noticed your Google Analytics data is a little lack lustre and the options available within Segment to customise this data without needing additional development overhead are fairly slim.

With a little additional work alongside your original Segment tagging you can use Google Tag Manager to curate how your data lands in Google Analytics.

What’s wrong with just using Segment’s direct connection?

Out of the box Segment promises to help consolidate your Google Analytics tagging into Segment and from there the product handles all of the routing of Pageviews/Events into Google Analytics. This sounds great on paper, but in practice deploying Google Analytics via Segment directly will eventually lead to issues with your tagging implementation. You will end up with manual additional meta information on your page-level tags to customise the category/label of your events and couple your website code with your Analytics. Not ideal – and an issue that tag management systems like Google Tag Manager were built to solve.

This guide introduces a different approach; using Google Tag Manager to handle the routing of Google Analytics tagging while leaving Segment to handle all others. This way you maintain full flexibility of the Google Analytics hits, keep Segment in place for your other tagging and allows you to use Google Tag Manager’s clever triggers to feed into Segment too – win win.

The Solution

Our solution still follows Segment best practice, whereby Google Tag Manager is deployed via Segment and all events are routed through Segment (to ensure your other destinations continue to receive events).

The event flow works similar to as follows:

1. Google Tag Manager is deployed by Segment within the Segment code snippet.
2. When a Segment track event occurs, this is fired into Google Tag Manager as a dataLayer event and the dataLayer is populated with the event’s important meta values.
3. At this point, Google Tag Manager takes over and pushes the hit directly into Google Analytics as with a typical Google Analytics implementation with Google Tag Manager.

Configure Segment

Within Segment disable/pause any Google Analytics tracking and enable Google Tag Manager for your container. Make sure you configure the following options, as shown below. This ensures all necessary events are available within Google Tag Manager and subsequently Google Analytics.

Setup your pageview tag in Google Tag Manager

Segment pushes a Google Tag Manager event Loaded a Page whenever a trackPage is triggered by the website (by default, once per page with standard Segment code).

Rather than use the built in gtm.js / gtm.dom / gtm.load we instead use this event which ensures user traits and Segment’s user-id is available to Google Tag Manager for use within custom dimensions and will also handle any virtual pageviews with the same tag.

First create the trigger, which is a simple Custom Event trigger, this uses regex matching to ensure it covers Segment page tracks, categorised pages as well as named pages:

Next create variables for the page details sent via Segment. We’ve used path and title in the below but all variables shown in the first screenshot above can be reproduced in the same manner:

Finally, define your pageview tag, using the data layer parameters to override the page and title fields and apply the Custom Event that was created above as a firing trigger

Setup event tags in Google Tag Manager

For each event that you trigger against track in Segment, Segment will push a dataLayer hit with an event of the same name. Additionally any properties you have passed with the event will also be passed as key-value pairs to Google Tag Manager within the same dataLayer push scope.

For Example, if your Segment code is:

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

Then this will create a Data Layer push equivalent to:

At this stage things should look familiar, as you would with any other custom event – you’ll need to produce a Custom Event trigger and create Data Layer Variable variables to access the meta data passed into Google Tag Manager.

This trigger can then be used to create an event in Google Analytics using your Google Analytics Settings variable, as you usually would with Auto-Event tracking.

Configure a “catch-all” event

This is optional, but I would recommend this or something similar is added to your setup (our container recipe includes this). To mimic Segment’s default Google Analytics setup, we send ALL custom events into Google Analytics with the setup as follows:

Event Category: Segment Event
Event Action: <Event Name>
Event Label: <blank>

The reason this is added is primarily to catch any events that you didn’t send into Google Tag Manager, as Google Tag Manager is only dealing with Google Analytics and Segment is handling everything else it could be that you/your development team add some tracking that you then forget to configure the appropriate triggers/tags for in Google Tag Manager. This event/trigger combination will ensure you at least have a record of which events happened within Google Analytics.

First create a trigger that excludes pageview events and any built-in gtm.* events:

Then create a tag that pushes these events into Google Analytics, using the built-in variable {{Event}} to capture the event name:

Note: This, in the same way as Segment’s initial approach, isn’t a suitable alternative to manually creating events, any additional properties that you send into Segment will not be recorded against this event but it’s a good interim failsafe for those what-if scenarios.

Access Segment user traits in Google Tag Manager

As Google Tag Manager is being deployed via Google Tag Manager you can be confident that Segment is available and can be accessed on the global window object within JavaScript. In plain English, any traits that have been configured within your Segment on-page code can be accessed for those users and any time moving forward.

To access Segment user traits within Google Tag Manager, which can then be used to populate Custom Dimensions, it’s a matter of simply accessing the Segment object from within a custom JavaScript variable which returns the value.

function() {
  if(!window["analytics"])
    return undefined;
  
  return window.analytics.user().traits().userStatus;
}

This can then be used as a custom dimension on the Google Analytics Settings variable, in the example below we’re pushing the userStatus from the user traits into Custom Dimension 6 in Google Analytics:

Access Segment User-ID in Google Tag Manager

As with user-traits, as we have access to the Segment object we can extract the User-ID set on the Segment object with a custom JavaScript variable.

function() {
  if(!window["analytics"])
    return undefined;
  
  var userId = window.analytics.user().id();
  
  if (!userId)
    return undefined;
  
  return userId;
}

This can then be used to set the User-ID against the Google Analytics Settings variable:

Use Google Tag Manager to trigger additional Segment events

If you’ve used Google Tag Manager in the past you’ll likely have experienced using it’s auto-events that can be used to trigger your tags to fire. Now that Google Tag Manager is setup you can use it’s standard event helpers to track user interactions within the website as usual. However rather than directly pushing data into Google Analytics instead you will need to create a Custom HTML Tag which triggers a Segment track event, this in turn will cause Segment to fire the corresponding event back to Google Tag Manager for you to handle as mentioned above. This may seem a little long winded but is for good reason, these events will then also be sent into Segment for the marketing channels handled there.

Below, for example, we’ve used Google Tag Manager’s link click trigger to capture clicks on email addresses and then send a Segment track event with some meta values:

This causes an event to be raised in Segment, which is subsequently pushed into Google Tag Manager:

You can now create a Custom Event trigger which matches the name of the event passed (in this case “Email Click”) and configure Data Layer Variable variables for each value you want to use in your tags. This is a couple more steps than usual, however this provides the necessary data into Segment for your other marketing channels/data warehouses.

Author William Julian-Vicary

Posted June 1, 2018