@imtbl/react-analytics NPM

@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:

a helper function called createAnalytics(), and
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');