Cognira's user activity tracking react library

Made with create-react-library

Cognira's user activity tracking is a library built with ReactJS that needs minimal effort to be plugged to a react application. It's aimed at tracking user activity like clicks, scroll, navigation, actions ...

Prerequisites

In order to use this library you need to install it and follow the implementation steps below.

Install

npm install --save cognira-useractivitytracking-react-library

Implementation

Step1: Configure App.js

import React, { useEffect } from 'react';
import { Routes, Route, useNavigate } from 'react-router-dom';
import { TrackElement, TrackScroll, TrackPath } from 'cognira-useractivitytracking-react-library'
import 'cognira-useractivitytracking-react-library/dist/index.css'

// create a context for the click tracking so we can use it later on the main routes
export const TrackContext = React.createContext(); 

function App() {

    //usenavigate to detect location change
    const navigate = useNavigate();

    //Start tracking scroll once the application is mounted
    useEffect(() => {
        TrackScroll()
    }, [])

    //When we change the location trigger the trackpath function that will return the time spent on the route
    useEffect(() => {
        let startTime = Date.now() 
        let path = window.location.pathname
        return () => {
            TrackPath(startTime, path);
        }
    }, [navigate])

        return (
        <div className="App">
            {/* Wrap the children off app component in the trackcontext provider so you can use it anywhere in the application */}
            {/* The TrackContext value must be the TrackElement function imported from the library */}
            <TrackContext.Provider value={TrackElement}>
                <div className="layout">
                        <Routes>
                            <Route path='/example-route1/*' element={ <Component1/> } />
                            <Route path='/example-route2/*' element={ <Component2/> } />
                        </Routes>
                </div>
            </TrackContext.Provider>
        </div>
    );
}

export default App;

Step2: Configure main routes

import React, { useEffect, useContext } from 'react'
//Import TrackContext from App.js
import { TrackContext } from '../App';

export default function Component1() {

    //Get the TrackContext value with the useContext hook
    const TrackElement = useContext(TrackContext);

    //The function will start tracking the elements when the route and its children are mounted
    useEffect(() => {
        Track();
    }, [])

    return (
        <React.Fragment>
            <Children />
        </React.Fragment>
    );
}

Step3: Choose how to track your elements

You can track the clicks on elements with two ways:

*Standard click tracking:
    If your element is a button or an input field and you only want to track if it's clicked as a whole element,
    you just need to add the track attribute to the jsx and give it the identifier of the element as a value.

*Click tracking with heatmaps:
    If your element is a complex element like a datagrid or an entire modal and you want to track where users are clicking exactly,
    you just need to add the trackheat attribute to the jsx and give it the identifier of the element as a value.
*Click tracking with hoc:
    if your element is a modal, popover or a dialog you can wrap it in the library's HOC component and add the track attribute to it. if your element is mounted in a portal you need to disable that.
    

examples:

<CustomButton text={ 'Login' } onClick={ loginSubmit } track='buttonLogin'></CustomButton>

<div trackheat={ props.trackheat }>
    <DataGrid rows={ props.rows } columns={ props.columns } />
</div>

<HOC>
    <Popover disablePortal={ true }>
        <div className={ classes.userPopover } trackheat='popovercontainer'>
            <div className={ classes.popoverListItem }><AccountCircleIcon style={ { marginRight: '5px' } } /> Profile</div>
            <div className={ classes.popoverListItem }><SettingsIcon style={ { marginRight: '5px' } } /> Settings</div>
            <div className={ classes.popoverListItem } onClick={ logout }><LogoutIcon style={ { marginRight: '5px' } } /> Logout</div>
        </div>
    </Popover>
</HOC>

-VERY IMPORTANT: you can't use the tracking attributes on custom made components like MUI components ect..

Step4: Add the redux middleware

If you are using redux in your application you can add our redux middleware to track the user actions, their status and the time of the action. in the redux store configuration file:

import { configureStore } from '@reduxjs/toolkit';
import exampleReducer from '../features/products/productsSlice';
//import the logger middleware from the library
import { logger } from 'cognira-useractivitytracking-react-library'

export const store = configureStore({
    reducer: {
        example: exampleReducer,
    },
    //add the middleware to redux default middleware
    middleware:  (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
});

Congrats your application is ready to track.

License

MIT ©