This package publishes via CICD to the public npm component: `@imtbl/react-analytics`.
npm install @imtbl/react-analyticsThis package publishes via CICD to the public npm component: @imtbl/react-analytics.
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
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.
``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');
`
Thanks to turbo-repo, all of these commands can be run from the root of the repo
To install depedendencies for all monorepo apps and packages, run:
``
npm i
To build all apps and packages, run the following command:
``
npm run build
To lint all apps and packages, run the following command:
``
npm run lint
To headlessly test all apps and packages, run the following command:
```
npm run test