Analytics for React Redux app made ridiculously simple

Comments

[Kushal V. Mahajan]

I struggled my way to find a good approach to track site events in my react application.

Here's what I was thinking,

1. I could think of track calls in my component code
2. Build my base ui-components (button, forms, selects) in a way to handle track events automatically.
3. Something more. Something less coupled to my app code

Huh! there started the stomach cramps. How can I do this without affecting or changing my existing apps and at same time considering any new react app to do this?

The first approach is naive. Second, seems a better solution than first but it's still embedded within the presentational logic. What if I plan to ship ui-components separately in future? Ah! I can still pass an analytics boolean flag to run the logic but I would avoid that marriage.

So, how about capturing events on every or any or some redux dispatch calls automatically. What if I can setup an event listener once, just once in my codebase to handle all dispatch calls app wide.

How about this code below

function trackListener(event, eventsHistory){
    window.dataLayer.push(event); // GTM code
    return event;
}

export default trackListener;

Now, what if this function fires on every redux action call? That would be helpful right. A universal tracker for all our needs.

Let's take a few more cases.

Second, how about a situation where I need to fire trackListener only on certain events.

trackListener.eventType = ['GET_QUOTE_CLICK', 'CART_CLICK'];

Third, what about a situation where I need to exclude the events.

Well, we can imagine doing a conditional check for the existence of an event in our event dictionary

...
if(EVENTS[event.type]){
        // Call the transform function if required and get the data
        const dataLayerObj = EVENTS[event.type](event);
        // If not use the event as such
        // const dataLayerObj = {...event };
        dataLayerObj.event = 'track_event';
        window.dataLayer.push(dataLayerObj);
        return event;
    }

Now, how do we achieve all this simplicity?

I created a small library to do enable this event tracking with this @ github.com/turtlemint/redux-analytics

There is a one-time small set up before we could enable this. Readme got it covered.

It requires a lot of improvement in the demonstration, code clean up, react hooks improvement, removing HOC pattern. But hey it works. So thought of sharing this meanwhile if it helps existing apps and getting community feedback at the same time.

Oh! almost forgot, do you guys know that redux also dispatch events on route changes when using connected-react-router package. Can you also imagine that your second type of events is page views which are handled automatically by just one or maybe two (as per your needs) listener functions? :)

It's my first open-source push. Hope you guys like it!