使用ReduxBeacon在您的React/Redux应用程序上使用GoogleAnalytics

Redux Beacon 是 Redux 和 ngrx 的分析中间件，使您能够在操作被分派时跟踪它们并将它们发送给任意数量的分析提供程序。支持的提供商包括 Google Analytics、Segment 和 Amplitude。

在本文中，我们将使用 Redux Beacon、Google Analytics，并在单页 React 应用程序中跟踪页面浏览量和事件。让我们开始吧！

设置

请注意，您首先需要将 Google Analytics 帐户和 Analytics.js 添加到您的网站。确保将您的 Analytics 代码段放在任何其他脚本之前，然后使用您的媒体资源 ID 更新代码段上的跟踪 ID。

要为 Google Analytics 安装 Redux Beacon，请使用 npm 或 Yarn 并安装 redux-beacon 和 @redux-beacon/google-analytics。

$ npm install —save redux-beacon @redux-beacon/google-analytics

# or, using Yarn:
$ yarn add redux-beacon @redux-beacon/google-analytics

在使用 Google Analytics 进行工作和测试时，请将您的网站列入您可能已安装的任何广告/跟踪拦截器的白名单。从我的痛苦中学习！

定义要跟踪的内容

我们将介绍综合浏览量和事件跟踪，但 Redux Beacon 的 Google Analytics 插件还支持跟踪时间、电子商务、社交互动和错误。您可以在此处找到关于的完整文档。

Redux Beacon 通过检查您调度的每个操作并将其类型与事件映射中的操作类型进行比较来工作。如果找到该操作，它将调用您在此处定义的跟踪函数。

const eventsMap = {
  MY_ACTION_ONE: someTrackingFn(…),
  MY_ACTION_TWO: someOtherTrackingFn(…)
  …
}

当 MY_ACTION_ONE 被调度时，someTrackingFn 将被调用。

浏览量

使用 Redux Beacon 跟踪页面浏览量意味着将用于更改路由的操作类型映射到页面浏览量函数。在此示例中，我们将使用来自 react-redux-router 的 LOCATION_CHANGE 事件。

import { LOCATION_CHANGE } from ‘react-router-redux’;

const eventsMap = {
  [LOCATION_CHANGE]: ourPageViewFn()
};

每次调度 LOCATION_CHANGE 时，都会调用我们的 pageview 函数。我们可以使用此功能将我们想要跟踪的数据从操作中提取出来。

网页浏览功能是什么样的？完整的例子：

import { LOCATION_CHANGE } from ‘react-router-redux’;
import { trackPageView } from '@redux-beacon/google-analytics';

const eventsMap = {
  [LOCATION_CHANGE]: trackPageView(action => ({
    page: action.payload.pathname,
    title: "My amazing page title"
  }))
};

可选地，传递给 trackPageView 函数的箭头函数也可以采用两个附加参数，prevState 和 nextState。

trackPageView((action, prevState, nextState) => { … })

活动

在 Google Analytics（分析）领域，事件是您网站/应用程序上可跟踪的用户交互。点击按钮、下载内容和点击广告都是可跟踪的事件。

让我们看看这个跟踪定义是什么样子的：

const eventsMap = {
  "DOWNLOAD_CLICKED": trackEvent(action => ({
    category: "VideoFile",
    action: "download",
    value: action.videoId
  }))
};

在这种情况下，当用户单击下载按钮时，会跟踪 videoId 以及类别和操作。

请注意，value 必须是整数。

最后的步骤

在 Redux Beacon 读取您的操作之前，必须使用 createMiddleware 函数将事件定义转换为中间件，并在创建您的 redux 存储时传递给 applyMiddleware 函数：

import { createStore, applyMiddleware } from 'redux';
import { createMiddleware } from ‘redux-beacon’;
import { LOCATION_CHANGE } from ‘react-router-redux’;
import GoogleAnalytics, { trackPageView, trackEvent }
  from '@redux-beacon/google-analytics';

const ga = GoogleAnalytics();
const eventsMap = {
    [LOCATION_CHANGE]: trackPageView(/* ... */),
    "DOWNLOAD_CLICKED": trackEvent(/* ... */)
};
const middleware = createMiddleware(eventsMap, ga)

const myReducer = (state, action) => { ... }
const myInitialState = {}
const store = createStore(myReducer, myInitialState,
  applyMiddleware(middleware));

现在我们的 redux 操作可以被 Google Analytics 跟踪！您可以在浏览器的检查工具上打开网络选项卡，以查看其展现的魔力。

回顾一下：

在您的网站上安装 Redux Beacon 和 Google Analytics，并记住在您的浏览器上禁用广告/跟踪拦截器
定义事件映射，将 redux 操作映射到跟踪函数
将此事件映射转换为中间件并将其传递给您的 redux 存储

如果一棵树倒在树林里而 Google 没有跟踪它，它会发出声音吗？ 🕵