将Google Analytics(分析)新增至React [英] Adding Google Analytics to React

问题描述

我正在尝试将Google Analytics(分析)添加到React Web应用程序中.

I am trying to add Google Analytics to a React Web Application.

我知道如何在HTML/CSS/JS网站中执行此操作，并且我也已将其集成到AngularJS应用程序中.但是，我不确定要如何做出反应.

I know how to do it in HTML/CSS/JS sites and I have integrated it in an AngularJS app too. But, I'm not quite sure how to go about it when it comes to react.

使用HTML/CSS/JS，我已经将其添加到每个页面中.

With HTML/CSS/JS, I had just added it to every single page.

我对AngularJS所做的工作是将GTM和GA脚本添加到index.html，并将UA标签添加到HTML div(和按钮)以获取点击.

What I had done with AngularJS was adding GTM and GA script to index.html and added UA-labels to the HTML divs (and buttons) to get clicks.

如何使用React做到这一点?

请帮助！

推荐答案

更新:2019年2月
当我看到这个问题被大量搜索时，我决定扩大解释范围.
要将Google Analytics(分析)添加到React，我建议使用React-GA.
通过运行添加:
npm install react-ga --save

Update: Feb 2019
As I saw that this question is being searched a lot, I decided to expand my explanation.
To add Google Analytics to React, I recommend using React-GA.
Add by running:
npm install react-ga --save

初始化:
在根组件中，通过运行以下命令进行初始化:

Initialization:
In a root component, initialize by running:

import ReactGA from 'react-ga';
ReactGA.initialize('Your Unique ID');

要报告网页浏览量:

ReactGA.pageview(window.location.pathname + window.location.search);

要报告自定义事件:

ReactGA.event({
  category: 'User',
  action: 'Sent message'
});

更多说明可在 github存储库

此IMO的最佳做法是使用react-ga. 看看 github rep

The best practice for this IMO is using react-ga. Have a look at the github rep

这篇关于将Google Analytics(分析)新增至React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！