redux-segment
Advanced tools
Segment.io analytics integration for redux.
npm install --save redux-segment
✝ Recommended router. You can also trigger page views manually.
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:
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.
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.
npm install --save redux-segment
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!
Code and documentation copyright 2015-2016 Rangle.io. Code released under the MIT license. Docs released under Creative Commons.
FAQs
Segment.io analytics integration for redux.
The npm package redux-segment receives a total of 3,561 weekly downloads. As such, redux-segment popularity was classified as popular.
We found that redux-segment demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.