{"id":13902905,"url":"https://github.com/rangle/redux-beacon","last_synced_at":"2025-05-15T07:04:34.541Z","repository":{"id":37270389,"uuid":"76827659","full_name":"rangle/redux-beacon","owner":"rangle","description":"Analytics integration for Redux and ngrx/store","archived":false,"fork":false,"pushed_at":"2022-12-07T09:46:54.000Z","size":1741,"stargazers_count":667,"open_issues_count":39,"forks_count":71,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-05-03T18:02:18.491Z","etag":null,"topics":["analytics","angular","google-analytics","ngrx","react","react-native","redux","redux-beacon"],"latest_commit_sha":null,"homepage":"https://rangle.gitbook.io/redux-beacon/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rangle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-19T04:20:11.000Z","updated_at":"2024-11-13T05:20:38.000Z","dependencies_parsed_at":"2023-01-24T16:31:53.028Z","dependency_job_id":null,"html_url":"https://github.com/rangle/redux-beacon","commit_stats":null,"previous_names":[],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rangle%2Fredux-beacon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rangle%2Fredux-beacon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rangle%2Fredux-beacon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rangle%2Fredux-beacon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rangle","download_url":"https://codeload.github.com/rangle/redux-beacon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254179905,"owners_count":22027884,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analytics","angular","google-analytics","ngrx","react","react-native","redux","redux-beacon"],"created_at":"2024-08-06T22:01:29.378Z","updated_at":"2025-05-15T07:04:29.530Z","avatar_url":"https://github.com/rangle.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://rangle.github.io/redux-beacon/\"\u003e\n    \u003cimg alt=\"Redux Beacon\" src=\"https://raw.githubusercontent.com/rangle/redux-beacon/af4a88229194291f6b6c9f5311b86488f6b16f1d/logo/redux-beacon-logomark.png\" width=\"150\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eRedux Beacon\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\nAnalytics integration for Redux and ngrx/store\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/redux-beacon\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/redux-beacon.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/redux-beacon\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/redux-beacon.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=redux-beacon\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/redux-beacon.svg?style=flat-square\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## [Docs](https://rangle.gitbook.io/redux-beacon/)\n\n - [Migration Guide (from v1 to v2)](https://rangle.gitbook.io/redux-beacon/migration-guide-v1-to-v2)\n - [Getting Started (Redux users)](https://rangle.gitbook.io/redux-beacon/getting-started-redux)\n - [Getting Started (ngrx users)](https://rangle.gitbook.io/redux-beacon/getting-started-ngrx)\n\n## Introduction\n\nIf you're using Redux or ngrx/store to manage your app's state, you can use\nRedux Beacon to tap into your dispatched actions and map them to events that are\nconsumable by an analytics service (e.g. Google Analytics). With Redux Beacon\nyour entire global state life-cycle becomes trackable.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Redux Beacon Diagram\" src=\"https://user-images.githubusercontent.com/7446702/38284923-bf9e2b56-378b-11e8-99b0-0416b1efab46.gif\"\u003e\n\u003c/p\u003e\n\n - **Redux Beacon is lightweight**. The core Redux Beacon module is tiny (~ 1KB), and each target, extension, and\n   util, is either around the same size or smaller.\n\n - **You can use Redux Beacon with any framework**. Redux Beacon doesn't depend on any\n   framework, you can use Redux Beacon with React, Angular, React Native, Vue or\n   just plain JavaScript.\n\n - **You can send analytics anywhere**. We have prebuilt targets for the most\n   popular analytics services, you can also build your own custom targets if you\n   need to.\n\n - **You can track analytics offline**. Redux Beacon provides\n   extensions for tracking analytics during intermittent outages in\n   connectivity. These extensions save events in a persistent store when offline\n   (e.g indexedDB). When back online, the extensions purge the store and pass\n   the events off to a target. Read more about offline event collection in the\n   [docs](https://rangle.gitbook.io/redux-beacon/extensions/offlineweb).\n\n## Supported Targets\n\n|                                                                                                                          | Version                                                                                                                                                                                 | Package                                                                                                                       |\n| ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |\n| ![Google](https://www.google.com/favicon.ico)                                                                            | [![npm](https://img.shields.io/npm/v/@redux-beacon/google-analytics.svg?style=flat-square)](https://www.npmjs.com/package/@redux-beacon/google-analytics)                               | [@redux-beacon/google-analytics](https://rangle.gitbook.io/redux-beacon/index/google-analytics)                               |\n| ![Google](https://www.google.com/favicon.ico)                                                                            | [![npm](https://img.shields.io/npm/v/@redux-beacon/google-analytics-gtag.svg?style=flat-square)](https://www.npmjs.com/package/@redux-beacon/google-analytics-gtag)                     | [@redux-beacon/google-analytics-gtag](https://rangle.gitbook.io/redux-beacon/index/google-analytics-gtag)                     |\n| ![Google](https://www.google.com/favicon.ico)                                                                            | [![npm](https://img.shields.io/npm/v/@redux-beacon/google-tag-manager.svg?style=flat-square)](https://www.npmjs.com/package/@redux-beacon/google-tag-manager)                           | [@redux-beacon/google-tag-manager](https://rangle.gitbook.io/redux-beacon/index/google-tag-manager)                           |\n| ![Google](https://www.google.com/favicon.ico)                                                                            | [![npm](https://img.shields.io/npm/v/@redux-beacon/react-native-google-analytics.svg?style=flat-square)](https://www.npmjs.com/package/@redux-beacon/react-native-google-analytics)     | [@redux-beacon/react-native-google-analytics](https://rangle.gitbook.io/redux-beacon/index/react-native-google-analytics)     |\n| ![Google](https://www.google.com/favicon.ico)                                                                            | [![npm](https://img.shields.io/npm/v/@redux-beacon/react-native-google-tag-manager.svg?style=flat-square)](https://www.npmjs.com/package/@redux-beacon/react-native-google-tag-manager) | [@redux-beacon/react-native-google-tag-manager](https://rangle.gitbook.io/redux-beacon/index/react-native-google-tag-manager) |\n| ![Amplitude](https://github.com/rangle/redux-beacon/blob/master/logo/amplitude-32x32.png?raw=true)                       | [![npm](https://img.shields.io/npm/v/@redux-beacon/amplitude.svg?style=flat-square)](https://www.npmjs.com/package/@redux-beacon/amplitude)                                             | [@redux-beacon/amplitude](https://rangle.gitbook.io/redux-beacon/index/amplitude)                                             |\n| ![Segment](https://d1gi394wp2tyv2.cloudfront.net/app/4.244.0/favicon-6430a09ca7d7fb4217290b0d1a7a0ae3-favicon-32x32.png) | [![npm](https://img.shields.io/npm/v/@redux-beacon/segment.svg?style=flat-square)](https://www.npmjs.com/package/@redux-beacon/segment)                                                 | [@redux-beacon/segment](https://rangle.gitbook.io/redux-beacon/index/segment)                                                 |\n| ![Segment](https://d1gi394wp2tyv2.cloudfront.net/app/4.244.0/favicon-6430a09ca7d7fb4217290b0d1a7a0ae3-favicon-32x32.png) | [![npm](https://img.shields.io/npm/v/@redux-beacon/react-native-segment.svg?style=flat-square)](https://www.npmjs.com/package/@redux-beacon/react-native-segment)                       | [@redux-beacon/react-native-segment](https://rangle.gitbook.io/redux-beacon/index/react-native-segment)                       |\n\n\n## Third-Party Targets\n\n|                                                     | Version                                                                                                                                                             | Package                                                                                                        |\n| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |\n| ![Matomo](https://matomo.org/favicon.png)           | [![npm](https://img.shields.io/npm/v/redux-beacon-matomo-tag-manager.svg?style=flat-square)](https://www.npmjs.com/package/redux-beacon-matomo-tag-manager)         | [redux-beacon-matomo-tag-manager](https://github.com/dbartholomae/redux-beacon-matomo-tag-manager)             |\n| ![Appsflyer](https://www.appsflyer.com/favicon.ico) | [![npm](https://img.shields.io/npm/v/redux-beacon-react-native-appsflyer.svg?style=flat-square)](https://www.npmjs.com/package/redux-beacon-react-native-appsflyer) | [redux-beacon-react-native-appsflyer](https://github.com/tomoakley/redux-beacon-react-native-appsflyer#readme) |\n\n## Other Targets\n\nIf you don't see your analytics target listed it might be worth a shot doing a quick search on npmjs.org. If all else fails you can always [build and provide your own custom Targets](https://rangle.gitbook.io/redux-beacon/examples-and-recipes#how-to-create-your-own-target)!\n\n## Integrations\n\n| Integration                                                                                  | Integrates with                                                | Description                                                                                                                                                                                                    |\n| -------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [redux-dynamic-modules-beacon](https://github.com/dbartholomae/redux-dynamic-modules-beacon) | [redux-dynamic-modules](https://redux-dynamic-modules.js.org/) | Redux Dynamic Modules is a library that allows to modularize redux code. With help of this extension events do not have to be defined in one central location but can be defined for each module individually. |\n\n## Usage\n\n - **Step 1.** Pick out a target _(see above)_\n\n - **Step 2.** Pick out some events you want to track from your target's Event Definitions section\n\n - **Step 3.** Match the events to action types _(see below)_\n\n### Examples\n\n_Track a page view on each `ROUTE_CHANGED` action_\n```js\nconst eventsMap = {\n  'ROUTE_CHANGED': trackPageView(action =\u003e ({\n    page: action.payload.routerState.url,\n  })),\n}\n```\n\n_Track an event on each `VIDEO_SELECTED` action, use the state before the action\nand the state after the action to hydrate the analytics event_\n```js\nconst eventsMap = {\n  'VIDEO_SELECTED': trackEvent((action, prevState, nextState) =\u003e ({\n    category: 'Videos',\n    action: action.type,\n    label: prevState.videos.currentCampaign,\n    value: nextState.videos.numVideosSelected,\n  }))\n}\n```\n\n_Track an event on _every_ action using the special '*' key_\n```js\nconst eventsMap = {\n  '*': trackEvent(action =\u003e ({\n    category: 'redux',\n    action: action.type,\n  })),\n}\n```\n\n_Track multiple events on each `VIDEO_PLAYED` action using the `combineEvents` util_\n\n```js\nconst eventsMap = {\n  'VIDEO_PLAYED': combineEvents(\n    trackTiming(action =\u003e ({\n      category: 'Videos',\n      action: 'load',\n      value: action.payload.loadTime,\n    }))\n    trackEvent(() =\u003e ({\n      category: 'Videos',\n      action: 'play'\n    })),\n  ),\n}\n```\n\n_Track an event on each 'VIDEO_SEARCHED' action, but throttle it with the debounceEvent util so it doesn't fire as often_\n\n```js\nconst eventsMap = {\n  'VIDEO_SEARCHED': debounceEvent(300,\n     trackEvent(action =\u003e ({\n       category: 'Videos',\n       action: 'search',\n       label: action.payload.searchTerm,\n     }))\n   ),\n}\n```\n\nThe `trackPageView`, `trackEvent`, and `trackTiming` functions used above are\ncalled `eventDefinitions` and are what you use to create events that are\nconsumable by an analytics service (a.k.a \"target\"). Each target will have its\nown set of `eventDefinitions` that you can use and customize.\n\n**Don't like the idea of using an object to map actions?**\n\n_You can use a function..._\n```js\nconst pageView = trackPageView(action =\u003e ({\n  page: action.payload.routerState.url,\n}));\n\nconst videoLoadTime = trackTiming(action =\u003e ({\n   category: 'Videos',\n   action: 'load',\n   value: action.payload.loadTime,\n}));\n\nconst videoPlayed = trackEvent(() =\u003e ({\n  category: 'Videos',\n  action: 'play'\n}));\n\nconst eventsMapper = (action) =\u003e {\n  switch(action.type) {\n    case 'ROUTE_CHANGED':\n      return pageView;\n    case 'VIDEO_PLAYED':\n      return [videoLoadTime, videoPlayed]\n    default:\n      return [];\n  }\n}\n```\n\n## More Examples \u0026 Recipes\n - [How to Track Pageviews in a React-Redux app](https://rangle.gitbook.io/redux-beacon/examples-and-recipes#how-to-track-pageviews-in-a-react-redux-app)\n - [How to Track Pageviews in an Angular-ngrx app](https://rangle.gitbook.io/redux-beacon/examples-and-recipes#how-to-track-pageviews-in-an-angular-ngrx-app)\n - [How to Track Analytics Offline (Web)](https://rangle.gitbook.io/redux-beacon/extensions/offlineweb)\n - [How to Track Analytics Offline (React Native)](https://rangle.gitbook.io/redux-beacon/extensions/offlinereactnative)\n\n## Extensions \u0026 Plugins\n\n|     | Version                                                                                                                                                           | Package                                                                                                   |\n| --- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |\n| 🔌  | [![npm](https://img.shields.io/npm/v/@redux-beacon/logger.svg?style=flat-square)](https://www.npmjs.com/package/@redux-beacon/logger)                             | [@redux-beacon/logger](https://rangle.gitbook.io/redux-beacon/index-2/logger)                             |\n| 🔧  | [![npm](https://img.shields.io/npm/v/@redux-beacon/combine-events.svg?style=flat-square)](https://www.npmjs.com/package/@redux-beacon/combine-events)             | [@redux-beacon/combine-events](https://rangle.gitbook.io/redux-beacon/index-3/combine-events)             |\n| 🔧  | [![npm](https://img.shields.io/npm/v/@redux-beacon/ensure.svg?style=flat-square)](https://www.npmjs.com/package/@redux-beacon/ensure)                             | [@redux-beacon/ensure](https://rangle.gitbook.io/redux-beacon/index-3/ensure)                             |\n| 🔧  | [![npm](https://img.shields.io/npm/v/@redux-beacon/debounce-event.svg?style=flat-square)](https://www.npmjs.com/package/@redux-beacon/debounce-event)             | [@redux-beacon/debounce-event](https://rangle.gitbook.io/redux-beacon/index-3/debounce-event)             |\n| 🔌  | [![npm](https://img.shields.io/npm/v/@redux-beacon/offline-web.svg?style=flat-square)](https://www.npmjs.com/package/@redux-beacon/offline-web)                   | [@redux-beacon/offline-web](https://rangle.gitbook.io/redux-beacon/index-2/offline-web)                   |\n| 🔌  | [![npm](https://img.shields.io/npm/v/@redux-beacon/offline-react-native.svg?style=flat-square)](https://www.npmjs.com/package/@redux-beacon/offline-react-native) | [@redux-beacon/offline-react-native](https://rangle.gitbook.io/redux-beacon/index-2/offline-react-native) |\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frangle%2Fredux-beacon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frangle%2Fredux-beacon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frangle%2Fredux-beacon/lists"}