2.0.0 • Published 2 years ago
helx-analytics v2.0.0
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 broadTrackingEvent
, 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.