Raj*_*Raj 25 google-analytics reactjs react-ga
我正在尝试将Google Analytics添加到React Web应用程序中.
我知道如何在HTML/CSS/JS站点中进行操作,我也将它集成到AngularJS应用程序中.但是,我不太确定如何应对它.
使用HTML/CSS/JS,我刚刚将它添加到每个页面.
我使用AngularJS做的是将GTM和GA脚本添加到index.html,并将UA标签添加到HTML div(和按钮)以获得点击.
我怎么能用React做到这一点？
请帮忙!
Mat*_*obi 37
更新:2019年2月
当我看到这个问题被大量搜索时,我决定扩大我的解释.
要将Google Analytics添加到React,我建议您使用React-GA.
通过运行添加:
npm install react-ga --save
初始化:
在根组件中,通过运行初始化:
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 repo中找到更多说明
这个IMO的最佳实践是使用react-ga.看看github代表
Giw*_*wan 18
如果您不想使用包，这就是它在 React 应用程序中的工作方式。在 index.html 中添加“gtag”
<!-- index.html -->
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "<GA-PROPERTYID>");
</script>
在登录表单的提交动作中，触发事件
window.gtag("event", "login", {
event_category: "access",
event_label: "login"
});
Google Analytics 属性有 2 种类型：Universal Analytics ( UA-xxxxxxxxx-x) 已弃用，并于 2023 年 7 月 1 日结束，而 Google Analytics 4 属性 ( G-xxxxxxxxxx) 是替代品。
react-ga在 Universal Analytics 中很受欢迎，但维护者不打算更新它（相关问题：1、2、3）并且它存在维护问题 ( 1 )。react-ga4并ga-4-react作为替代品出现，但由于这些是类似的包装器，您将受到维护人员的摆布来实现和支持所有功能。
最简单的开始方法是遵循Google 的指南：包含gtag在页面上并将其用作window.gtag. 此方法适用于旧标签和新标签，甚至还通过@types/gtag.js. 可以按照建议异步加载脚本。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxxx" >
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-xxxxxxxxxx')
</script>
<!-- ... -->
</head>
<body>
<!-- ... -->
</body>
</html>
请记住，Google Analytics 会自动进行页面跟踪，但这并不适用于所有用例。例如，不跟踪hash参数search更改。这可能会导致很多混乱。例如，当使用或锚链接时，导航将不会被跟踪。要完全控制页面视图跟踪，您可以禁用自动跟踪。详细解释请参见：The Ultimate Guide to Google Analytics (UA & GA4) on React (Or Anything Else)HashRouter
手动页面跟踪：/sf/answers/4427453061/
您可以在cra-typescript-starter中看到它的工作原理，我还从环境变量中设置标签。
如果不使用软件包，这就是我的方法：
在index.js（render方法中）：
{/* Global site tag (gtag.js) - Google Analytics */}
<script
async
src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"
/>
<script>{injectGA()}</script>
在课外：
const injectGA = () => {
if (typeof window == 'undefined') {
return;
}
window.dataLayer = window.dataLayer || [];
function gtag() {
window.dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'YOUR_TRACKING_ID');
};
| 归档时间： |
|
| 查看次数： |
21212 次 |
| 最近记录： |