Skip to main content

Tracking hook with context

v.0.0.9

Installation​

yarn add @mercell/use-context-tracking-react

Usage​

Import and set Context Provider for tracking in the very top or almost top level of your application

import {
    TrackingContextProvider,
    TrackingContext,
} from '@mercell/use-context-tracking-react';

Create a wrapper component for our context to provide always the newest information of the language from the i18n context provider.

// if you are using micro frontend, you have an access to the AuthContext already
import { useAuthContext } from '@mercell/micro-frontend-toolbox';
import { TrackingContextProvider } from '@mercell/use-context-tracking-react';
import React from 'react';

// const MICRO_FRONTEND_APP_NAME = 'mf-application-name';
const APP_NAME = 'application-name'
const TrackingProvider = ({ children, i18n }) => {
    // if you are using MF authContext, you can use it to fetch userId necessary for tracking
    // if not, please check how you can receive this information with DICE team
    const { user } = useAuthContext();
    const trackingKey =
        user &&
        Object.keys(user).find(
            (key) => key.indexOf('dataInsightsTrackingId') > -1
        );
    const dataInsightsTrackingId = user && user[trackingKey];

    return (
        <TrackingContextProvider
            ep_app_language={() => i18n.language}
            // ep_microfrontend_name={MICRO_FRONTEND_APP_NAME}
            // ep_app_name={APP_NAME}
            userId={dataInsightsTrackingId}
        >
            {children}
        </TrackingContextProvider>
    );
};

export default TrackingProvider;

<Router>
    <I18nextProvider i18n={i18n}>
        <TrackingProvider i18n={i18n}>
            <ButtonSection />
        </TrackingProvider>
    </I18nextProvider>
</Router>

Several "complex" components will soon have additional property to pass the tracking method from hooks provider.

Thanks to the context, you can easily use tracking method from hook in any children of your provider As an example let's use tracking method inside <ButtonSection /> from above

const ButtonSection = () => {
    // use useContext with argument of our TrackingContext to get access to trackingAction method which will include all static values passed to provider and combine it with arguments passed inline
    const { trackingAction } = React.useContext(TrackingContext);
    const onClickMethod = ()=>console.log('Clicked!')
    return (
        <Button
            scheme='primary'
            onClick={trackingAction(
                'click', {
                    ep_whatever_is_necessary: 'value which is necessary'
                },
                onClickMethod
            )}
        />
    )
}

It is important to use trackingAction method like in the example because under the hood it is creating a proper callback method for any event action.

Our context will be able to provide you out of the box following keys which you don't need to specify anymore:

const eventProperties = {
    ...trackingProperties, // properties passed to trackingMethod at second parameter
    ep_microfrontend_name, // necessary if you are using micro frontend
    ep_app_name, // necessary if you don't have micro frontend
    ep_app_url, // all 3 url related properties are made of location from router
    ep_app_referrer_url,
    ep_app_page_path,
    ep_component_id,
    ep_app_language,
}

If your element doesn't have id, but you would like to add it to the tracking, you can always specify it inside the trackingProperties which you are passing as second argument to trackingAction method.

Types​

TrackingContextProps
interface TrackingContextProps {
    userId?: string;
    ep_microfrontend_name?: string;
    ep_app_name?: string;
    ep_app_language?: () => string;
}
TrackingActionType
interface TrackingActionType {
    trackingEventType: string,
    trackingProperties: Record<string, string | string[]>,
    defaultAction?: any
}

Changelog​

Changelog

Change Log - @mercell/use-context-tracking-react

This log was last generated on Fri, 11 Nov 2022 09:18:57 GMT and should not be manually modified.

0.0.9​

Fri, 11 Nov 2022 09:18:57 GMT

Patches​

  • Bump package react-tracking

0.0.8​

Thu, 15 Sep 2022 06:07:41 GMT

Patches​

  • Migration to Tailwind3, React 18 and ViteJS from webpack.

0.0.7​

Thu, 30 Jun 2022 10:57:49 GMT

Patches​

  • Fix typings
  • Package.json refactor, add test suite, more tests soon

0.0.6​

Wed, 22 Jun 2022 08:30:02 GMT

Patches​

  • Add additional param for teams which are not using microfrontend platform called ep_app_name
  • Adjustment in action_context param to include app or mfapp name

0.0.5​

Wed, 15 Jun 2022 15:57:11 GMT

Patches​

  • Update peer dependency list

0.0.4​

Wed, 15 Jun 2022 15:28:54 GMT

Patches​

  • Manual package bump - tracking action update

0.0.3​

Wed, 15 Jun 2022 15:10:09 GMT

Patches​

  • Add observer for referrer links and new implementation of hook to include event

0.0.2​

Mon, 13 Jun 2022 09:20:15 GMT

Patches​

  • Context implementation of tracking