Tracking more analytics data (GA, MixPanel) with a single tool

Segment.io is a tool for tracking analytics data of more services (e.g. Google Analytics, MixPanel, Intercom, Flurry, KISSmetrics, HitTail), using an unique tool, a single set of commands and without you having to integrate each provider individually.

This is the definition of Segment.io on its website:

Segment.io lets you send your analytics data to any service you want, without you having to integrate with each one individually.
source: https://segment.io/

I use Analytics.js, the javascript library of Segment.io.

In order to use Analytics.js there are two ways:

  1. use online file and manage integration services on Segment.io Panel
  2. use offline file and manage integration services on our code

I like the latter most since you don’t need to configure settings on segmenetIO Panel because you can manage each provider directly in your javascript code.

 

1) Import offline Analytics.js

Minified version of Analytics.js is here: https://github.com/segmentio/analytics.js/blob/master/analytics.min.js
You must import the file before to track any data.

 

2) Initializes of analytics services

For to initialize the analytics services, you must use initialize() method, inserting all data of the tracking providers.

I initialize Google Analytics and MixPanel in this example:

analytics.initialize({
    'Google Analytics' : {
          trackingId               : "UA-12345678-9",
          universalClient        : false,
          initialPageview        : false
    },
    'Mixpanel' : {
          token                     : "1234567890123456789012345678901",
          people                   : true,
          pageview               : false,
          debug                    : true
    }
});

For Google Analytics, I define these variables:

  • trackingId: this is the tracking ID of google analytics profile
  • universalClient: this indicate if your google analytics profile is universal (true) or classic (false)
  • initialPageview: this indicate if Google Analytics track the page view automatically. I set it to false, because I track page view manually, using analytics.pageview() command

For MixPanel, I define these variables:

  • token: this is the token of your MixPanel profile
  • people: this indicate if the People feature of MixPanel is enabled
  • pageview: this indicate if mixpanel must track every page view (this is useful because every track have a cost, in MixPanel)
  • debug: this is the useful function for debug, if enabled the console logs every track

 

3) Identify the user

For some analytics services, we can identify the user before to track events and page view.

For to identify an user, you can use this code:

var analyticsID= 123456789;
var userProperties = {name: "John", surname: "Smith"};

analytics.identify(analyticsID, userProperties, function(){
      console.log("AnalyticsJS", "identify", analyticsID, userProperties);
});

The arguments of this command are:

  • analyticsID: this is the unique ID of user
  • userProperties: this is a javascript object (key, value) which contains the properties of user
  • callback funcion, that is performed after identify command

The user properties are free, you can define any key.
However, there are some properties specified for some services: for example, for MixPanel, you can define firstName, lastName, name, username (https://segment.io/docs/integrations/mixpanel#identify)

 

4) Track an event

For tracking a event, you can use this command:

var event = "play video";
var eventProperties = {videoID: 123456789, videoCategory: "sport"};

analytics.track(event, eventProperties, function(){
      console.log("AnalyticsJS", "track Event", event, eventProperties);
});

The arguments for this command are:

  • event: this is the label of the event
  • eventProperties: this is a javascript object (key, value) which contains the properties of the event
  • callback funcion, that is performed after trackEvent command

The contexts
If you want track an event only for one or more providers, excluding others, you can use the contexts:

var contextMixPanel = {
      providers: { 'All' : false, 'Mixpanel' : true }
};

analytics.track(event, eventProperties, contextMixPanel, function(){
      console.log("AnalyticsJS", "track Event", event, eventProperties);
});

For example, in this mode, you can track an event for mixpanel only.

You can use the contexts for both tracking events and identify.

For Google Analytics, you can track action, category and label with Segment.io AnalyticsJS, using this code:

var action = "play video";
var category = "UI";
var label = 123456789;
var contextAnalytics= {
      providers: { 'All' : false, 'Google Analytics' : true }
};

analytics.track(action, {
     category: category,
     label: label
}, contextAnalytics, function(){
      console.log("AnalyticsJS", "trackEvent GA", "(" + category + " | " + action + " | " + label + ")");
});

 

5) Track a link

For tracking an event when the user clicks an link, you can use this code:

var element = $('a.trackLink');
analytics.trackLink(element, event , eventProperties);

 

6) Track page view (manually)

For tracking page view manually, useful for single page site or for javascript navigation, you can use this command:

var url = '/' + location.hash;
analytics.pageview(url);

This is useful when automatically tracking don’t track the URL correctly

 

7) Listener for Analytics.js Events

For to execute a callback when analytics is ready, you can use:

analytics.ready(function () {
    console.log("analytics is ready");
});

For execute a callback after identify or track functions:

analytics.on('identify', function (userId, traits, options) {
    console.log("identify command is finished");
});

analytics.on('track', function (event, properties, options) {
    console.log("tracking is finished");
});

 

8) Documentation and links

Links of some useful docs:

https://segment.io/ – Home page of Segment.io
https://segment.io/libraries/analytics.js – Docs of Javascript AnalyticsJS
https://segment.io/docs/integrations/google-analytics – Docs for Google Analytics tracking
https://segment.io/docs/integrations/mixpanel – Docs for MixPanel tracking

Aurelio Merenda

I live in Florence (Italy). I graduated in IT in 2010, I work as Front End Developer in Buongiorno, a NTT Docomo Group company. I specialize in Javascript & AngularJS. I like photography, movies and cats.