Ophan & GA Tracking

The useAnalytics component in app/client/services/useAnalytics.ts adds the tracking logic to component tree, which uses the React Router Location component to send client-side URL changes to BOTH Ophan and GA.

Notably the file also exports trackEvent and trackEventInOphanOnly which are used across the codebase for ad-hoc event tracking. Such tracking takes an object as a parameter with shape...

interface Event {
  eventCategory: string;
  eventAction: string;
  product?: {
    productType: ProductType;
    productDetail: ProductDetail;
  };
  eventLabel?: string;
  eventValue?: number;
}

... which closely follows the structure expected by GA, but with additional optional product info for Ophan (note though that Ophan has fewer fields so some of those values provided are just chucked into the labels array of the Ophan component event).

Ophan

Since manage-frontend is a 'Single Page App' it required changes to the default tracking mechanism in Ophan (which only tracks url onload) and so manage uses a custom tracker script in the ophan-tracker-js npm package, which is loaded in app/client/user.ts (where the client-side React hydration after SSR takes place and the client-side Sentry initialisation occurs) with...

import "ophan-tracker-js/build/ophan.manage-my-account";

D&I teams have built interesting dashboards from the page views and component events, but it's less good for ad-hoc bits of insight.

GA (Google Analytics)

Rather than being loaded via Google Tag Manager (GTM), GA is loaded directly (primarily to ensure engineering oversight about exactly what scripts are added on manage.theguardian.com) in app/server/html.ts (the main html template) then is initialised in the constructor of AnalyticsTracker.

The only other notable GA thing is the existing custom dimension dimension12 for INTCMP and dimension29 for some A/B testing purposes (used during the Account Overview 50% test for example, but not currently used at the time of writing this).

Within the Google Analytics UI (https://analytics.google.com/) there are two views... ... with the real traffic only one filtering out internal GNM IPs.

Google Optimize

manage-frontend does have Google Optimize integration for doing various A/B tests, but hasn't been used in a long time and the implementation is likely out of date and sub-optimal (indeed the use of MutationObserver breaks manage on IE - see https://trello.com/c/6X9kO23S).

It's still initialised in the AnalyticsTracker component but pushes the "optimize.activate" instruction manually (on load, on URL changes, on MutationObserver changes and explicitly in GoogleOptimiseAwaitFlagWrapper although that's not currently used) - see manage-frontend/pull/100.