HeLx Analytics

A proof-of-concept implementation of various analytics trackers for use within HeLx applications.

Info

The project is built using Typescript and compiled to ES6 using Babel/tsc.

• The package can be built by running npm run build. This will build the project to lib.
• Typedoc/JSDoc documentation can be generated under docs by running npm run doc.

The project exports specific analytics tracker implementations of the abstract HeLXAnalyticsTracker.

Installation

Using npm: npm i helx-analytics

Using yarn: yarn add helx-analytics

Design

Each tracking implementation extends the abstract class HeLxAnalyticsTracker, which consists of:

• setup initializes the tracking platform so that it is ready to be used to track events.
• trackEvent tracks a specific event (e.g. visiting a page, clicking a button) and sends it to the tracking platform. This method takes the broad TrackingEvent, which the specific implementation then translates for its associated tracking platform.
• trackRoute tracks the specific route (page) which subsequent events will occur on.
• teardown should destroy the tracker.

Example

Setting up a tracker:

// Data required to setup the associated analytics service and point towards the specific project.
const setupData = { projectToken: "xxx" };
// These will be added onto the customParameters field for all invocations of `trackEvent` and `trackRoute`.
const globalCustomParameters = { "helx-analytics version": analyticsVersion };
const analytics = new MixPanelAnalytics(setupData, globalCustomParameters)`;

Tracking events using the tracker instance:

// Relay to the analytics platform that a modal has been opened on the page.
analytics.trackEvent({
    category: "UI Interaction",
    action: "Settings modal opened",
    customParameters: { "User ID" : userId }
});

Tracking events/routes:

// While using the settings popup the user presses a button that navigates to the full settings page
analytics.trackEvent({
    category: "UI Interaction",
    action: "Settings page opened",
    label: "Settings page URL opened from settings modal",
    customParameters: { "User ID" : userId }
});
// The user has navigated to a new route on the site, make sure to relay the information to the analytics platform.
analytics.trackRoute({
    route: "/settings/",
    customParameters: { "User ID" : userId }
});

Destruction/teardown:

analytics.teardown();

API Documentation

API documentation is autogenerated to docs using Typedoc with context clues and comments from JSDoc.

The docs are currently not being hosted but are rendered on this website. They can also be viewed locally.