Redux Analytics Middleware

0.3.1 verified Thu Apr 23 auth: no javascript abandoned

The `redux-analytics` package offers a Redux middleware designed to integrate analytics tracking into Redux applications. It works by inspecting actions for a specific metadata structure: `action.meta.analytics`. For an action to be processed, this `analytics` metadata must itself conform to the Flux Standard Action (FSA) pattern, meaning it must have at least a `type` and a `payload` property. The middleware is instantiated with a callback function that receives these analytics `type` and `payload` (along with the full Redux state), allowing developers to connect to any third-party analytics service. As of version 0.3.1, this project appears to be a historical artifact from the early days of Redux, with no significant updates or active maintenance since its initial development around 2015. Its key differentiator was its strict adherence to the FSA convention for both the action and its embedded analytics metadata, promoting a consistent action structure.

Common errors

error Error: analytics meta must be a Flux Standard Action ↓

cause The `meta.analytics` property on your Redux action is missing either the `type` or `payload` field, or is not a plain object, thereby violating the Flux Standard Action pattern.

fix

Modify your action to ensure action.meta.analytics adheres to the FSA structure: { type: 'MY_ANALYTICS_EVENT', payload: { ...eventData } }.

Warnings

gotcha This package is effectively abandoned. It has not been updated since 2016 (v0.3.1), and is not recommended for new projects. Modern Redux setups have moved towards different patterns for analytics integration. ↓

fix Consider using newer Redux patterns like sagas, thunks, or dedicated analytics integration libraries, possibly tied to action types, rather than relying on this unmaintained middleware.

gotcha The `analytics` metadata within your action's `meta` property must itself be a Flux Standard Action (FSA). If it does not conform (e.g., missing `type` or `payload`), an error will be printed to the console, and the event will be ignored. ↓

fix Ensure `action.meta.analytics` is an object with at least `type` and `payload` properties, for example: `{ type: 'EVENT_NAME', payload: { ...data } }`.

Install

npm install redux-analytics

yarn add redux-analytics

pnpm add redux-analytics

Imports

analytics
wrong
```
const analytics = require('redux-analytics');
```
correct
```
import analytics from 'redux-analytics';
```
This package was developed during an earlier era of JavaScript module systems. While `import` syntax can be used with bundlers, the original intent was likely CommonJS `require`.

Quickstart

This example demonstrates how to set up `redux-analytics` middleware, dispatch an action with valid analytics metadata, an action without, and an action with invalid metadata.

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

// Mock analytics tracking library
const track = (type, payload) => {
  console.log('Analytics Event:', type, payload);
  // In a real app, this would send data to Google Analytics, Segment, etc.
};

// Redux reducer (minimal for demonstration)
const initialState = {
  user: { id: 'user-123', plan: 'premium' },
  app: { version: '1.0.0' }
};
function rootReducer(state = initialState, action) {
  switch (action.type) {
    case 'USER_LOGGED_IN':
      return { ...state, user: { ...state.user, id: action.payload.userId } };
    default:
      return state;
  }
}

// Analytics middleware setup
const analyticsMiddleware = analytics(({ type, payload }, state) => {
  // Example: Augment analytics payload with shared state data
  track(type, { ...state.app, userId: state.user.id, ...payload });
});

// Create Redux store
const store = createStore(rootReducer, applyMiddleware(analyticsMiddleware));

// Dispatch an action with valid analytics metadata
store.dispatch({
  type: 'ITEM_ADDED_TO_CART',
  payload: { itemId: 'sku789', quantity: 2 },
  meta: {
    analytics: {
      type: 'ecommerce_add_to_cart',
      payload: {
        product: 'Super Widget',
        value: 19.99
      }
    }
  }
});

// Dispatch another action without analytics metadata (should be ignored by middleware)
store.dispatch({
  type: 'UPDATE_UI_SETTING',
  payload: { theme: 'dark' }
});

// Dispatch an action with invalid analytics meta (should log an error to console)
store.dispatch({
  type: 'INVALID_ANALYTICS_ACTION',
  meta: {
    analytics: { // Missing payload, thus not a valid FSA for analytics meta
      type: 'invalid_event'
    }
  }
});