Numerous Panicky Mimes

    impression-tracker-react-hook
    TypeScript icon, indicating that this package has built-in type declarations

    7.6.0 • Public • Published

    impression-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,
      platformName: 'mymarket',
      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

    Scripts

    • Run most commands: npm run finish
    • Build the project: npm run build
      • Validate output bundle size with npm run size
    • Lint the project: npm run lint
    • Run unit tests: npm test or npm 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:

    Install

    npm i impression-tracker-react-hook

    DownloadsWeekly Downloads

    1,807

    Version

    7.6.0

    License

    MIT

    Unpacked Size

    201 kB

    Total Files

    10

    Last publish

    Collaborators

    • prm-deployer