Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/markdalgleish/redux-analytics
Analytics middleware for Redux
https://github.com/markdalgleish/redux-analytics
Last synced: 22 days ago
JSON representation
Analytics middleware for Redux
- Host: GitHub
- URL: https://github.com/markdalgleish/redux-analytics
- Owner: markdalgleish
- Created: 2015-10-14T22:52:20.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2016-10-11T12:17:17.000Z (about 8 years ago)
- Last Synced: 2024-10-19T02:02:03.797Z (about 1 month ago)
- Language: JavaScript
- Size: 10.7 KB
- Stars: 489
- Watchers: 9
- Forks: 22
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](http://travis-ci.org/markdalgleish/redux-analytics) [](https://coveralls.io/r/markdalgleish/redux-analytics) [](https://www.npmjs.com/package/redux-analytics)
# redux-analytics
Analytics middleware for [Redux](https://github.com/rackt/redux).
```bash
$ npm install --save redux-analytics
```
Want to customise your metadata further? Check out [redux-tap](https://github.com/markdalgleish/redux-tap).
## Usage
First, add some `analytics` metadata to your actions using the [Flux Standard Action](https://github.com/acdlite/flux-standard-action) pattern:
```js
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](https://github.com/acdlite/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:
```js
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.
```js
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.
```js
// 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](https://github.com/pavelvolek) and [@arturmuller](https://github.com/arturmuller) for providing the initial inspiration with [redux-keen](https://github.com/pavelvolek/redux-keen).
## License
[MIT License](http://markdalgleish.mit-license.org/)