Analytics middleware for Redux

Overview

Build Status Coverage Status npm

redux-analytics

Analytics middleware for Redux.

$ npm install --save redux-analytics

Want to customise your metadata further? Check out redux-tap.

Usage

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

const action = {
  type: 'MY_ACTION',
  meta: {
    analytics: {
      type: 'my-analytics-event',
      payload: {
        some: 'data',
        more: 'stuff'
      }
    }
  }
};

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.

Then, write 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

@pavelvolek and @arturmuller for providing the initial inspiration with redux-keen.

License

MIT License

Issues
  • Adds .babelrc to .npmignore

    Adds .babelrc to .npmignore

    This avoids conflicts for projects using Babel 6+, as redux-analytics is using Babel 5.

    opened by jadnco 4
  • Why does the analytics object need to be FSA compliant?

    Why does the analytics object need to be FSA compliant?

    I tried using segment (https://segment.com/docs/libraries/analytics.js/) with redux-analytics and its api is bit more elaborate I guess. Wanted to do the following but its not possible since the analytics object needs be FSA compliant.

    export default analytics(({method, subject, payload }) => {
      return segment[method](subject, payload);
    });
    
    opened by ferdinandsalis 2
  • What about page views

    What about page views

    What is the strategy you favour for page views? a) Always rely on some kind or [react] router? b) Have an explicit PAGE_VIEW action dispatched? Something else?

    Thanks in advance.

    opened by joaomilho 1
  • Why not using just the regular action?

    Why not using just the regular action?

    I would like to understand a little bit more about your use cases and the reasoning why you think it's handful to append more data and a different event type in the meta object.

    In my use case I have a fairly complex reporting mechanism to ga's ecommerce thing and receiving the actual event would be enough, since all the data I need to report these events are available in the state. If they are not it seems to me it's easier to do something like:

    const myAnalyticsStuff = analytics(({type}, state) => {
      switch(type){
      case SOME_REGULAR_ACTION:
        ... some complex ga report based on type and current state ...
        break;
      }
    });
    

    (Unfortunately JS doesn't have guards :/)

    What do you say?

    opened by joaomilho 1
  • Is it a code smell if my analytics need the next state?

    Is it a code smell if my analytics need the next state?

    I see that you only expose the current (previous?) state in the analytics.

    Have you ever had the case where you need the next state?

    opened by inyigo 0
  • Add support for tracking multiple events in one dispatch

    Add support for tracking multiple events in one dispatch

    This PR adds support for multiple analytics events in one action

    opened by ipanasenko 4
  • Please post some example on this ..

    Please post some example on this ..

    Hi, Please post some example .. is it going to use some Tracking Id for ga analytics or its just middleware which i need to place while creating store as mentioned in repo ..

    opened by kumartarun 0
  • Google example

    Google example

    Hi, I'm trying to use GA with this and would love an example. Any real world example would probably be good. Will post one if I work it out.

    opened by swordsreversed 1
Owner
Mark Dalgleish
CSS Modules co-creator, Playroom, Braid, MelbJS. OSS / UI / design / tooling at @seek-oss
Mark Dalgleish
RxJS middleware for action side effects in Redux using "Epics"

RxJS-based middleware for Redux. Compose and cancel async actions to create side effects and more. https://redux-observable.js.org Install This has pe

redux-observable 7.8k Nov 29, 2021
A mock store for testing Redux async action creators and middleware.

redux-mock-store A mock store for testing Redux async action creators and middleware. The mock store will create an array of dispatched actions which

Redux 2.4k Nov 28, 2021
Skeleton React App configured with Redux store along with redux-thunk, redux persist and form validation using formik and yup

Getting Started with React-Redux App Some Configrations Needed You guys need to modify the baseUrl (path to your server) in the server.js file that is

Usama Sarfraz 10 Aug 23, 2021
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Redux Form 12.6k Nov 23, 2021
redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.

redux-immutable redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state. When Redux creat

Gajus Kuizinas 1.9k Nov 18, 2021
A chart monitor for Redux DevTools https://www.npmjs.com/package/redux-devtools-chart-monitor

Redux DevTools Chart Monitor This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and

Redux 298 Nov 13, 2021
Official React bindings for Redux

React Redux Official React bindings for Redux. Performant and flexible. Installation Using Create React App The recommended way to start new apps with

Redux 21.6k Dec 2, 2021
DevTools for Redux with hot reloading, action replay, and customizable UI

Redux DevTools Developer Tools to power-up Redux development workflow or any other architecture which handles the state change (see integrations). It

Redux 12.2k Nov 23, 2021
Ruthlessly simple bindings to keep react-router and redux in sync

Project Deprecated This project is no longer maintained. For your Redux <-> Router syncing needs with React Router 4+, please see one of these librari

React Community 7.9k Nov 25, 2021
The official, opinionated, batteries-included toolset for efficient Redux development

Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development (Formerly known as "Redux Starter Kit") Installati

Redux 6.8k Dec 2, 2021
Logger for Redux

Logger for Redux Now maintained by LogRocket! LogRocket is a production Redux logging tool that lets you replay problems as if they happened in your o

null 5.6k Nov 21, 2021
Selector library for Redux

Reselect Simple “selector” library for Redux (and others) inspired by getters in NuclearJS, subscriptions in re-frame and this proposal from speedskat

Redux 18.4k Nov 26, 2021
An alternative side effect model for Redux apps

redux-saga redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like acce

Redux-Saga 21.9k Nov 24, 2021
Declarative Side Effects for Redux

Redux Data FX Declarative Side Effects for Redux. It helps you keep your business logic and effectful code separate. The idea is simple: in addition o

Matthieu Béteille 53 Jun 30, 2021
:recycle: higher order reducer to add undo/redo functionality to redux state containers

redux undo/redo simple undo/redo functionality for redux state containers Protip: Check out the todos-with-undo example or the redux-undo-boilerplate

Daniel Bugl 2.7k Nov 25, 2021
Redux bindings for client-side search

redux-search Higher-order Redux library for searching collections of objects. Search algorithms powered by js-worker-search. Check out the live demo a

Brian Vaughn 1.4k Nov 17, 2021
An i18n solution for React/Redux and React Native projects

redux-react-i18n An i18n solution with plural forms support for Redux/React Workers of all countries, unite! Supported languages list with expected co

Dmitry Erzunov 63 Sep 30, 2021
Helper to create less verbose action types for Redux

Action Typer Helper to create slightly less verbose redux action types. Uses ES6 Proxies! Highly Performant: Proxy is only run once at startup. Includ

Alister Norris 57 Nov 21, 2021
persist and rehydrate a redux store

Redux Persist Persist and rehydrate a redux store. v6 upgrade Web: no breaking changes React Native: Users must now explicitly pass their storage engi

Zack Story 11.7k Dec 1, 2021