如何将google analytics（谷歌分析）添加到react应用中，并举例说明

这篇文章讲述了在react应用中添加或设置谷歌分析。

谷歌分析是谷歌的一项服务，用于跟踪网站的页面、访问者和会话信息。它可以在任何网站上免费使用。

首先，从google analytics网站上获取跟踪ID。简单的跟踪ID格式是UA-000000-00。

React是一个单页应用程序，有多种方式可以配置

• 不使用路由器
• React-router历史

react-ga 是一个用于javascript的google分析模块，可以集成到网站或应用程序中。我们可以集成到Angular或Vuejs或任何其他使用JavaScript的应用程序。

使用npm命令将react-ga包安装到现有的应用程序中。

npm i --save react-ga

这将在package.json中用以下信息更新依赖关系部分

"dependencies": {
    "react-ga": "3.3",
  }

在index.js或主组件中，请添加以下内容

import ReactGA from 'react-ga';
ReactGA.initialize('UA-000000-00');

通过调用ReactGA.initialize方法和options可选参数启用跟踪功能。语法:

ReactGA.initialize(trackingid,OptionsObject);

Tracking Id是唯一的ID，你可以从Analytics网站上得到它。

选项对象是一个带有键和值/对象的JavaScript对象。

如何跟踪页面浏览量？

要跟踪页面浏览量，需要发送页面的名称

ReactGA.pageview('about');

同样可以在react中使用useHook 来重写:

 useEffect(() => {
    ReactGA.initialize('GA-000000-01');
    ReactGA.pageview(window.location.pathname);
  })

在react-router中添加google analytics（谷歌分析）

在更大的应用程序中，如果已经配置了react-router，你需要添加以下设置

首先在应用程序中安装react-router-dom

 npm install --save react-router-dom history

一旦安装了react-router-dom和history，你就可以用下面的代码添加history并监听pageview事件了

history.listen在路由器改变路径时启动，这将跟踪从一个路径到另一个路径的页面浏览。

  const history = createBrowserHistory();

history.listen((location) => {
    ReactGA.initialize('GA-000000-01');
    ReactGA.set({ page: location.pathname });
    ReactGA.pageview(location.pathname)
  }
);

一旦所有需要的变化，它将需要几个小时才能在谷歌分析工具中生效。