@imtbl/react-analytics

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

Important notice

It appears this library is being phased out, thus maintenance on it for now will be paused.
If you are using this library, you're advised to post inside #frontend-engineering

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

``tsx
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 (
onClick={() =>
track({
userJourney: 'Onboarding',
screen: '/moo',
control: 'Signup',
controlType: 'Button',
action: 'click',
})
}
>
Signup

);
}

function DemoApp() {
return (



)
}
`

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

`
function MockAnalyticsProvider(props: PropsWithChildren) {
return (

{props.children}

);
}

...

cy.mount();
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

$3

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

`
npm i
`

$3

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

`
npm run build
`

$3

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

`
npm run lint
`

$3

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

`
npm run test
``