Analytics via GTM instead of directly to Google Analytics

README.md

Migrating to GTM

Overview of changes

Previous setup

1) Manual GTM registration

As below, but I believe it was chosen not to use, or abandoned or something, because the current GTM configuration does not seem to have any active triggers used.

2) Google Analytics

• Using the module angular-google-analytics defined in vendor_custom/angular-track/index.js,
• which defines the Analytics service,
• which is subsequently programmatically used as follows:
  • on each state change, if logged in, sets (Analytics.set(KEY, VALUE))
    • &uid to the (hashed) user id
    • dimension1 to the user status (user.identity.status)
    • dimension3 to user.identity.numberOfBookings
    • dimension4 to user.identity.preference
  • at specific moments, programmatically triggers analytics events via

    • Analytics.trackEvent(category, action, label, value, noninteraction, custom_extra_fields)

• and it also listens to $rootScope.on('$routeChangeSucces'), at which point a page view event is triggered.

New setup

1) Manual GTM registration

This is done manually, with

• the provider googleTagManager in the openwheels.analytics module in src/app/analytics/analytics.js,
• the configuration (setting of the GTM code) of this provider in the main app.js file.

2) Angulartics

The Angulartics package,

• defines the angulartics module,
• provides the (confusingly named) $analytics service,
• only provides a the Angular infrastructure (directives, service, etc), as follows:
  • being able to detect scroll (if you want to)
  • the analytics-event / analytics-on directives (and some more)
  • $analytics.pageTrack(URL) -- and also automatically registers virtual page tracks (via $rootScope.$on('$routeChangeSuccess'))

  • $analytics.eventTrack(EVENT_NAME, { category, label, ... })

  (The idea is that a 'plugin' will subsequently implement the actual registration/tracking.)

3) angulartics-google-tag-manager

The angulartics-google-tag-manager package

• defines the angulartics.google.tagmanager module,
• doesn't provide anything,
• and just delegate Angulartics' page views and events to dataLayer.pushes.
• No registration, it just pushes to the global variable dataLayer.
• $analytics.eventTrack(EVENT_NAME, { category, label, event, value, noninteraction }) leads to

  dataLayer.push({
    'event': event || 'interaction',
    'action' : EVENT_NAME,
    'target': category,
    'target-properties': label,
    'value': value,
    'interaction-type': noninteraction,
    'userId': $analyticsProvider.settings.ga.userId,
  });

• $analytics.pageTrack(path) leads to

  dataLayer.push({
    'event': 'content-view',
    'content-name': path,
    'userId': $analyticsProvider.settings.ga.userId,
  });

4) GTM configuration

GTM must be configured correctly to broker the page views and events to e.g. Google Analytics.

Following the naming choices of angulartics-google-tag-manager, which provides a default importable container with 2 pre-configured tags, 2 triggers, and a load of variables:

• Tags
  • "Angulartics Event", which sends an "event" track type event to Analytics
  • "Angulartics Pageview", which sends a "pageview" track type event to Analytics, with associated data
• Triggers
  • "Angulartics event" -- specifically, this checks for (dataLayer) event === 'interaction'
  • "Angulartics pageview" -- specifically, this checks for (dataLayer) event === 'content-view'
• Variables
  • ...