redux-google-analytics

Google Analytics middleware for Redux.

$ npm install --save redux-google-analytics

Usage

First, add google analytics metadata to your actions using the Flux Standard Action pattern:

const action = {
  type: 'MY_PLAY_ACTION',
  meta: {
    analytics: {
      type: 'event',
      payload: {
        category: 'Video',
        action: 'play', // by default its the action's type (MY_PLAY_ACTION)
        label: 'Fall Campaign'
      }
    }
  }
};

Note that the analytics metadata must also be a Flux Standard Action. If this isn't the case, an error will be printed to the console.

You can override the middleware to handle the presence of this metadata:

import analytics from 'redux-analytics';
import track from 'my-awesome-analytics-library';

const middleware = analytics(({ type, payload }) => track(type, payload));

If you need to expose shared analytics data to multiple events, your entire state tree is provided as the second argument.

import analytics from 'redux-analytics';
import track from 'my-awesome-analytics-library';

const middleware = analytics(({ type, payload }, state) => {
  track(type, { ...state.analytics, ...payload });
});

If you'd like to use a different meta property than analytics, a custom selector function can be provided as the second argument.

The selector function is only invoked if the action has a meta property, and is provided the entire action as an argument. If the selector returns a falsy value, it will be ignored.

// Given the following middleware configuration:
const select = ({ meta }) => meta.foobar;
const middleware = analytics(({ type, payload }) => track(type, payload), select);

// You can then format a trackable action like this:
const action = {
  type: 'MY_ACTION',
  meta: {
    foobar: {
      type: 'my-analytics-event'
    }
  }
};

Thanks

@markdalgleish for providing the initial inspiration with redux-analytics.

License

MIT License