redux-hotjar's Introduction

redux-hotjar

$ npm install --save redux-hotjar

Setup

For client-only applications, simply include the supplied middleware.

import hotjar from 'redux-hotjar';

import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';

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

For server-rendered applications, to ensure Hotjar tags for server-side actions are included in your recordings, you'll also need to include the redux-hotjar reducer in your store. For now, only plain object-based stores are supported.

Note that, for brevity, the following example uses the proposed object spread properties standard, which is available via babel-plugin-transform-object-rest-spread.

import hotjar, { reducer as hotjarReducer } from 'redux-hotjar';

import { createStore, applyMiddleware, combineReducers } from 'redux';
import { reducer1, reducer2 } from './reducers';

// First, include the redux-hotjar reducer in your root reducer:
const rootReducer = combineReducers({
  reducer1,
  reducer2,
  ...hotjarReducer()
});

// Then, apply the middleware to the store:
const store = createStore(
  rootReducer,
  applyMiddleware(hotjar())
);

Tagging Actions

Simply add metadata to your actions using the Flux Standard Action pattern.

// Single tags:
dispatch({
  type: 'NEW_TODO',
  meta: {
    hotjar: 'New Todo'
  }
});

// Multiple tags:
dispatch({
  type: 'NEW_TODO',
  meta: {
    hotjar: ['Todos', 'Todos: New Todo']
  }
});