javascript - 在 React 中为 Google Analytics 安装 Google 标签管理器时遇到困难

标签 javascript reactjs google-analytics google-tag-manager

我正在尝试在我的 React 网站上安装 Google 跟踪代码管理器,但是当我阅读 Google 跟踪代码管理器的文档时,它表明我应该将长脚本标记粘贴到每个页面的头部和正文中:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager --> 

但是,React 站点传统上不使用 script 标签。如何使用 Google 跟踪代码管理器有效且高效地设置我的 React 网站? SPA 是否有特殊的 React 或 JavaScript 标签?

最佳答案

您可以在/public/index.html 中添加该脚本,因为它是单页应用程序,但只会加载一次,除非您根据 Google 标记的用途添加事件。

要实现 Google 跟踪代码管理器,请使用 NPM 软件包获取更多可自定义选项:https://www.npmjs.com/package/react-google-tag-manager

如果您在标签管理器中使用 Google Analytics,请阅读下文。

最好的方法是使用 Google Analytics React NPM 包:https://github.com/react-ga/react-ga

在路由器更改中添加:ReactGA.pageview(window.location.pathname + window.location.search);,以确保获得页面点击。

关于javascript - 在 React 中为 Google Analytics 安装 Google 标签管理器时遇到困难,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51996438/

相关文章:

javascript - AudioBufferSourceNode.buffer 已弃用?

google-analytics - 用于优化 ID 的 GTAG

google-analytics - 如何检查我网站上的任何URL是否包含特定的Google Analytics(分析)UTM代码?

reactjs - 如何将 React Native 集成到现有的 iOS 项目中

google-analytics - 谷歌分析臃肿的数据

javascript - CheerioJS 从具有相同类名的三个 div 元素中选择一个

javascript - 哪个更糟?多一个数据库访问权限还是一个过时的值?

javascript - 无法访问 angular.js View 中的数组项

linux - 我的服务器没有监听文件更改

css - react : Caret icon keeps moving outside of dropdown menu whenever page is resized to iPad or smaller