promotedaiimpression-tracker-react-hook
This library is used to track impressions using a react useImpressionTracker hook.
See unit tests for a detailed example for both the React Hook and Higher Order Component (HOC).
Hook
import { useImpressionTracker } from 'impression-tracker-react-hook';
import { createEventLogger } from 'promoted-snowplow-logger';
export const handleError = process.env.NODE_ENV !== 'production' ? (err) => { throw err; } : console.error;
export const eventLogger = createEventLogger({
enabled: true,
handleError,
});
const HookedExampleComponent = ({
// Set insertionId and/or contentId.
insertionId,
contentId,
}: Props) => {
// ref needs to be set on the div to observe.
// impressionId can be passed directly into a logAction call.
// logImpressionFunctor can be called to force an impression.
const [ref, impressionId, logImpressionFunctor] = useImpressionTracker({
enable: true,
insertionId,
contentId,
handleError,
logImpression: eventLogger.logImpression,
});
return <div ref={ref}>{text}</div>;
};Higher-Order Components (HOC)
interface Props {
...
// TODO - set this ref on the div.
impressionRef: (node?: Element | null) => void;
// Optional props.
impressionId: string;
// In case you want to log an impression early.
logImpressionFunctor: () => void;
}
class ExampleComponent extends React.Component<Props> {
...
render() {
...
return <div ref={this.props.impressionRef}>{text}</div>;
}
}
const WrappedExampleComponent = withImpressionTracker(ExampleComponent, {
handleError,
isEnabled: () => impressionLoggingEnabled,
getContentId: props => props.contentId,
getInsertionId: props => props.insertionId,
// Can be changed to modify the impression.
logImpression: eventLogger.logImpression,
});Using Compose
const WrappedExampleComponent = compose(
...,
composableImpressionTracker({
handleError,
isEnabled: () => impressionLoggingEnabled,
getContentId: props => props.contentId,
getInsertionId: props => props.insertionId,
// Can be changed to modify the impression.
logImpression: eventLogger.logImpression,
})
)(ExampleComponent);Features
Uses
- TypeScript support
- React support
- CSS Modules with PostCSS
- ESLint (with React and Prettier)
- Unit tests (Jest and Testing Library)
- Minified output with Terser
- Bundle size validation with size-limit
- Flexible builds with Rollup
- CHANGELOG.md template
Scripts
- Run most commands:
npm run finish - Build the project:
npm run build- Validate output bundle size with
npm run size
- Validate output bundle size with
- Lint the project:
npm run lint - Run unit tests:
npm testornpm test
When developing locally
Broken - We previously had an npm run updateLink command to use npm link for local development. This fails with a Error: Cannot find module 'react'.
For now, just copy/paste the impression tracker code into the client code and test it out.
Deploy
We use a GitHub action that runs semantic-release to determine how to update versions. Just do a normal code review and this should work. Depending on the message prefixes (e.g. feat:, fix:, clean:, docs:), it'll update the version appropriately.
When doing a breaking change, add BREAKING CHANGE: to the PR. The colon is important.
Resources
The base of this repository is a combination of the following repos: