Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

redux-segment

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

redux-segment

Segment.io analytics integration for redux.

0.1.1
Source
npm

Version published: 9 years ago

Maintainers: 1

Created: 9 years ago

Source

Redux Segment

Segment.io analytics integration for redux.

npm install --save redux-segment

Features

Out-of-the-box support for popular routers:
- redux-simple-router✝: ^1.0.2
- redux-router: ^1.0.3

✝ Recommended router. You can also trigger page views manually.

Motivation

Redux Segment middleware allows you to draw deep and rich analytics from your Redux application with minimal configuration. You are already specifying the actions you care about:

export function addTodo(text) {
  return {
    type: types.ADD_TODO,
    payload: {
      text,
    },
  }
}

Just tell the middleware you also want it tracked:

export function addTodo(text) {
  return {
    type: types.ADD_TODO,
    payload: {
      text,
    },
    meta: {
      analytics: {
        eventType: reduxSegment.TRACK,
        eventName: types.ADD_TODO,
        paths: ['payload.text'],  // It understands [Flux Standard Action](https://github.com/acdlite/redux-actions)
                                  // so the 'payload' part is not required.
      },
    },
  }
}

Or if you want to save keystrokes:

export function addTodo(text) {
  return {
    type: types.ADD_TODO,
    payload,
    meta: {
      analytics: reduxSegment.TRACK,
    },
  }
}

That's all! :smile:

What is Segment?

Segment is a platform that allows you to collect your analytics data with one API and send it to hundreds of tools (e.g. Google Analytics, Mixpanel, Slack, etc...) or data warehousing. Crucially, it also allows you to own your data in raw format.

Can I just write one line that tells the middleware to track everything?

No. This is tempting to do, especially in Redux where your application state is small and centralized and changes are explicit. You should, however, resist the temptation. This constraint is core to the design philosophy of Redux Segment.

Analytics is about learning

-- @segment

Tracking everything, in many cases, is equivalent to tracking nothing at all. In practice, we are forced to think about analytics differently.

The Lean Startup methodology advocates applying a scientific approach to product development. The rationale, as it goes, is that the faster a team learns, the more likely they are to succeed. The process occurs in roughly three phases:

Build (idea -> code)

In phase 1, the team builds something they think their users want. The result is an experimental feature.
Measure (code -> data/analytics)

In phase 2, the team collects data on how users are reacting to the feature. This is the experiment.
Learn (data/analytics -> ideas)

In phase 3, the team uses the data collected to determine if the experiment was a success or not. They can then use what they learned to drive more ideas.

And so the cycle continues...

Redux Segment is designed to allow you to measure faster. First, choose what you want to learn. Build it. Then, determine how you're going to meaure it. And finally, collect the result.

You can, of course, still track all actions if you want by explictly marking each one.

Installation

npm install --save redux-segment

Usage

1. Create and apply the tracker

import { applyMiddleware, createStore, compose } from 'redux';
import { reduxReactRouter } from 'redux-router'
import createHistory from 'history/lib/createBrowserHistory'
import routes from '../routes'
import thunk from 'redux-thunk'
import api from '../middleware/api'
import rootReducer from '../reducers'
import { createTracker } from 'redux-segment';

const tracker = createTracker();  // Create the tracker...

const finalCreateStore = compose(
  applyMiddleware(thunk, api, tracker),  // and then apply it!
  reduxReactRouter({ routes, createHistory })
)(createStore)

export default function configureStore(initialState) {
  return finalCreateStore(rootReducer, initialState)
}

Note: Make sure to include the tracker after thunk or promise middleware so that it sees actual actions.

2. Copy the segment snippet into the header of your site

<head>
  <title>My amazing app</title>
  ...
  <script type="text/javascript">
    !function(){var
  analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment
  snippet included
  twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","page","once","off","on"];analytics.factory=function(t){return
  function(){var
  e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return
  analytics}};for(var t=0;t<analytics.methods.length;t++){var
  e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var
  e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var
  n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="3.1.0";
    analytics.load("YOUR_WRITE_KEY");
    // Make sure to remove any calls to `analytics.page()`!
    }}();
  </script>
</head>

3. You're done!

License

Keywords

FAQs

What is redux-segment?

Is redux-segment well maintained?

Package last updated on 25 Dec 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install