Coder Social home page Coder Social logo

redux-keen's Introduction

redux-keen

npm version

Redux middleware for sending analytics to Keen IO.

Instalation

npm install --save redux-keen

Usage

import keenAnalytics from 'redux-keen';

let keenMiddleware = keenAnalytics('YOUR_PROJECT_ID', 'YOUR_WRITE_KEY');

The default export is a function requiring Keen IO project id and API write key. This function returns a middleware function, that can be applied using applyMiddleware from Redux.

If it receives an action whose meta property contains an analytics property with non-empty collection property, it will record the event in the Keen IO analytics.

Actions

An action that should be recorded to analytics MUST

  • have an analytics property inside its meta property
  • have a collection property inside its analytics property

and MAY

  • have an event property inside its analytics property

collection

The required collection property inside the analytics specifies the Keen IO event collection.

event

The optional event property inside the analytics contains the data of the Keen IO event.

An example of an action:

{
  type: ADD_TO_SHOPPING_CART,
  payload: item,
  meta: {
    analytics: {
      collection: "add_item_to_shopping_cart"
    }
  }
}

An example with optional property event:

{
  type: ADD_TO_SHOPPING_CART,
  payload: item,
  meta: {
    analytics: {
      collection: "add_item_to_shopping_cart",
      event: {
        item: {
          title: item.title,
          itemId: item.itemId
        }
      }
    }
  }
}

Globals

When setting up analytics with Keen IO, we often want to send some common data (hereinafter referred to as globals) with each event (e.g. device information, geolocation, authenticated user, etc.).

The default function that creates keenMiddleware accepts an optional third parameter getGlobals. If provided, getGlobals must be a function returning a javascript object. It is called everytime the middleware intercepts a an action with valid analytics property.

let keenMiddleware = keenAnalytics(projectId, writeKey, getGlobals);

The redux state is passed as parameter to the provided function. You can use it for example for getting the authenticated user information (see the example bellow).

function getLocationPayload() {
  return {
    ip_address: '${keen.ip}',
    keen: {
      addons: [
        {
          name: 'keen:ip_to_geo',
          input: {
            ip: 'ip_address'
          },
          output: 'ip_geo_info'
        }
      ]
    }
  };
}

function getUserPayload(state) {
  const { isSignedIn, user } = state.session;
  if (!isSignedIn) {
    return {};
  }

  let userGlobals = {
    user: {
      name: `${user.firstName} ${user.lastName}`,
      userId: user.profileId
    }
  };

  return userGlobals;
}

export default function getGlobals(state) {
  const location = getLocationPayload();
  const user = getUserPayload(state);

  return {
    ...location,
    ...user
  };
}

If getGlobals provided the globals are sent by the middleware with each event, even when the action has a valid analytics property with the event property omitted.

redux-keen's People

Contributors

pavelvolek avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.