# redux-analytics-data-store

> redux middleware that emits to a data layer object

Latest version **1.1.1** (published 2018-07-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install redux-analytics-data-store
pnpm add redux-analytics-data-store
yarn add redux-analytics-data-store
bun add redux-analytics-data-store
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2018-07-05 |
| First published | 2018-07-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | steven tsao |
| Maintainers | steventsao713 |

## Links

- npm: https://www.npmjs.com/package/redux-analytics-data-store
- Repository: https://github.com/steventsao/redux-analytics-data-store
- Homepage: https://github.com/steventsao/redux-analytics-data-store#readme
- Issues: https://github.com/steventsao/redux-analytics-data-store/issues
- npm.io page: https://npm.io/package/redux-analytics-data-store

## Recent versions

- 1.1.1 (latest) — 2018-07-05
- 1.1.0 — 2018-07-05
- 1.0.6 — 2018-07-04
- 1.0.5 — 2018-07-03
- 1.0.4 — 2018-07-03
- 1.0.3 — 2018-07-03
- 1.0.2 — 2018-07-03
- 1.0.1 — 2018-07-03
- 1.0.0 — 2018-07-02

## README

## Problem

Analytics tracking is done by firing POST requests with identifiers and labels alongside application logic. Maintenance becomes problematic when labels need to be updated or when analytics are needed to for other vendor applications. Emitting a [digital data layer](https://www.w3.org/2013/12/ceddl-201312.pdf) helps to abstract the labels away by emitting the same values in to the browser window. As long as the path to the values remain, vendors can update the corresponding labels without altering the codebase. The solution can be more straightforward. If the frontend application were using reactive pattern with libraries like Redux where app state has already been consolidated in a store, a middleware can be included to port the state in the Redux store to the data layer.

## What is a Data Layer?

A data layer is metadata for the app state available in the browser window. It was designed as a solution for providing a generic interface that analytics vendors can access without modifying the codebase.

## What is a Redux middleware and Redux store?

[Redux](https://github.com/reduxjs/redux) is a state container for JavaScript applications. It supports unidirectional flow of data that encourages pure functions and immutability that are also implemented in Flux and Om.

## Examples

```javascript
// one-time analytics tracking
store.dispatch(addTodo({ id: 1 });
analytics.eventTrack("added todo", { id: 1 });
```

```javascript
// emit value to data layer
store.dispatch(addTodo({ id: 1 });
window.digitalData = { action: "added todo", id: 1 }

// invokes vendor script to retrieve user action
_satellite.track("allPages");
```

```javascript
store.dispatch({ type: "LOGIN" });
console.log({ window, appState: store.getState() });
// allPages was fired
// { window: { dataLayer: { isLoggedIn: true } },
//   appState: { isLoggedIn: true } }

store.dispatch({ type: "ADD_TODO" });
console.log({ window, appState: store.getState() });
// allPages was fired
// { window: { dataLayer: { isLoggedIn: true, todo: [Array] } },
//   appState: { isLoggedIn: true, todo: [ 'test' ] } }

store.dispatch({ type: "DELETE_TODO" });
console.log({ window, appState: store.getState() });
// userAction was fired
// { window: { dataLayer: { isLoggedIn: true, todo: [] } },
//   appState: { isLoggedIn: true, todo: [] } }
```

## References

- [Data Layer](https://marketing.adobe.com/resources/help/en_US/sc/implement/ref-data-layer.html)
- [Google Tag Manager](https://github.com/snowplow/snowplow/wiki/Integrating-javascript-tags-with-Google-Tag-Manager#1.4)

---
_Source: https://npm.io/package/redux-analytics-data-store · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._