How to use react-gtm-module in react js app?(如何在REACT js应用中使用REACT-GTM-MODULE?)
本文介绍了如何在REACT js应用中使用REACT-GTM-MODULE?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在我的Reaction应用程序中,我使用了react-gtm-module。而且我只有GTM ID。
我将以下代码放在每个页面路由器组件中
import TagManager from 'react-gtm-module';
componentDidMount(){
const tagManagerArgs = {
dataLayer: {
page: '/pagepath'
},
gtmId: 'GTM-XXXXXX',
}
TagManager.initialize(tagManagerArgs)
}
我只是将上面的代码放在每个路由组件中。通过使用上述代码,在Google Analytics中,Active Page中有时会显示路径,有时则不会显示。
我只需在代码中添加代码即可实现Google分析跟踪页面,还是需要添加更多其他内容?如果是,那么我到底要添加什么以及添加到哪里?
当然,我在代码中遗漏了一些东西。但到底是什么呢?
推荐答案
仅使用每个应用程序中的ID进行初始化,而不是使用每个页面
TagManager.initialize({
gtmId: gtm_id,
});
然后在每一页中
TagManager.dataLayer({
dataLayer: {
event: 'pageview',
pagePath: 'page-path-here',
pageTitle: 'page-title-here',
},
});
这篇关于如何在REACT js应用中使用REACT-GTM-MODULE?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
编程基础网
本文标题为:如何在REACT js应用中使用REACT-GTM-MODULE?
基础教程推荐
猜你喜欢
- HTML5 画布调整为父级 2022-01-01
- 最佳动态 JavaScript/JQuery 网格 2022-01-01
- 逻辑运算符 ||在 javascript 中,0 代表 Boolean false? 2022-01-01
- 在 Javascript 中使用 Fetch API 上传文件并显示进度 2022-01-01
- 使用 jQuery 在悬停时交换 DIV 类 2022-01-01
- 即使每次插入第一个输入的值不同,第二个输入仍显示相同的输入值 2022-01-01
- 从快速中间件中排除路由 2022-01-01
- 当木偶师打开Chrome时,不能使用Chrome扩展 2022-01-01
- 带角度的选项卡:仅使用 $http 在单击时加载选项卡 2022-01-01
- CORS:当凭据标志为真时,无法在 Access-Control-Allow-Origin 中使用通配符 2022-01-01
