mikeykhalil/redux-analytics-manager

Analytics middleware for Redux

Redux Analytics Manager

This module works as redux middleware allowing you to listen for actions and send a specified analytics object. You can also register callbacks instead of sending vanilla objects. Action callbacks are passed the original action, the current state, and the next state.

Installation

npm install --save 'redux-analytics-manager'

Usage

• Define a send method to be used with your registered actions. You can use any analytics library. The send method will be passed the the analytics object from the registered action along with the current state for further processing if necessary.
• Register actions with either analytics objects, or callbacks. Callbacks are passed the original action, the current state, and the next state. If the callback doesn't return anything the send method won't be called.
• Call the middleware create method

If you register the same action more than once, the calls to your send method will occur in the order they were defined.

// Example using Google Analytics

import { applyMiddleware, createStore } from 'redux';
import { ReduxAnalyticsManager } from 'redux-analytics-manager';

const manager = new ReduxAnalyticsManager();

ga('create', 'UA-XXXXX-Y', 'auto');

function sendAnalytics(analyticObj, currState) {
    ga('send', analyticsObj);
}

manager.setSendMethod(sendAnalytics);

// Sending plain analytics object
manager.registerAction(
    'MY FANCY ACTION', 
    {
        eventCategory: 'fancy-actions',
        eventLabel: 'my fancy action'
    }
)

// Register callback and return analytics to be sent
manager.registerAction(
    'PURCHASE PRODUCT',
    (action, currState, nextState) => {
        const product = action.product;
        const region = currState.regionID;
        return {
            eventCategory: region,
            eventAction: 'product-purchase',
            eventLabel: product
        };
    }
);

// Register an array of listeners for a single action
manager.registerAction(
    'DOWNLOAD IMAGE',
    [
        {eventCategory: 'page-visits', eventAction: 'page-visited'},
        (action, currState, nextState) => {
            const imageName = action.image;
            const totalDownloads = nextState.images[imageName].downloads;
            return {
                eventCategory: 'Images',
                eventAction: 'image-downloaded',
                eventLabel: imageName,
                eventValue: totalDownloads
            };
        }
    ]
);

// Conditionally send analytics based on state
manager.registerAction(
    'LOGIN USER',
    (action, currState, nextState) => {
        const firstTime = (
            currState.loginCount = 0 && nextState.loginCount === 1;
        );
        if (firstTime) {
            return {
                eventCategory: 'First Time Events',
                eventAction: 'user-login',
                eventLabel: action.userName
            }
        }
    }
);

const analyticsMiddleware = manager.createMiddleware();

const store = createStore(rootReducer, applyMiddleware(analyticsMiddlware));