@imtbl/react-analytics

This package publishes via CICD to the public npm component: @imtbl/react-analytics.

What's inside?

The root of this package exports:

1. a helper function called createAnalytics(), and
2. some useful type unions to use as generic type inputs for createAnalytics.

This function accepts some configuation and some generic types (to apply to analytics events) - and returns an <AnalyticsProvider> and a useAnalytics() hook.

Under the hood, this tooling utilises @segment/analytics-next - and the structure of the events sent using this tooling conform to the schema that is currently recommended by the imx-data team.

Example usage

import {
  createAnalytics,
  StandardAnalyticsActions,
  StandardAnalyticsControlTypes,
} from '@imtbl/react-analytics';
import { Button } from '@biom3/react';

export const getWriteKey = () => process.env.NEXT_PUBLIC_SEGMENT_WRITEKEY || '';

export const { AnalyticsProvider, useAnalytics } = createAnalytics<
  'Onboarding' | 'ViewDocsPage' | 'UsingStorybook',
  string,
  'Click' | 'CopyText' | 'Signup',
  StandardAnalyticsControlTypes
>({
  writeKey: getWriteKey(),
  appName: 'BiomeDocs',
});

function DemoButton() {
  const { track } = useAnalytics();
  return (
    <Button
      onClick={() =>
        track({
          userJourney: 'Onboarding',
          screen: '/moo',
          control: 'Signup',
          controlType: 'Button',
          action: 'click',
        })
      }
    >
      Signup
    </Button>
  );
}

function DemoApp() {
  return (
    <AnalyticsProvider>
      <DemoButton />
    </AnalayticsProvider>
  )
}

For testing purposes, the analytics browser held in the context can be overridden:

function MockAnalyticsProvider(props: PropsWithChildren) {
  return (
    <AnalyticsProvider overrideValue={{ track: cy.stub().as('track') } as any}>
      {props.children}
    </AnalyticsProvider>
  );
}

...

  cy.mount(<MockAnalyticsProvider><MyComponent></MockAnalyticsProvider>);
  cy.get('@track').should('be.calledWith', 'rewardsZkEvmConnectWallet');

Commands and tooling

Thanks to turbo-repo, all of these commands can be run from the root of the repo

Install dependencies

To install depedendencies for all monorepo apps and packages, run:

npm i

Build

To build all apps and packages, run the following command:

npm run build

Lint

To lint all apps and packages, run the following command:

npm run lint

Testing headless

To headlessly test all apps and packages, run the following command:

npm run test