React +路由器+ Google跟踪代码管理器 [英] React + Router + Google Tag Manager
问题描述
我的做法是这样的：使用触发器来设置一个在某些页面上触发的GA标签，用于定制pageview事件。当事情发生时，我会将字段页面设置为/ rap。我在每个视图的顶层组件的componentDidMount方法中触发事件。使用调试器，我看到事件正如预期般发生，但在我的生活中，我无法让GA承认事件。当我简化标签以在所有页面上触发时，GA按预期工作，所以我假设它与React有关。
有没有人成功实施过这个或遇到类似问题？我的方法都错了吗？希望得到一些指导......欢呼！
这里的派对晚了点，但反应路由器应该不需要特殊的代码与GTM集成。只需在您的页面上放置GTM脚本（按照建议立即在< body> 标记之后打开）并让您的应用正常运行即可。
在GTM中创建历史更改的自定义触发器。
您可以在所有历史记录更改中触发它。
或者仅限于其中一些。例如，仅在您的生产主机名上。
然后为您的谷歌分析（或其他）添加一个标签，并将其配置为通过点击启用下的更多并选择上面创建的触发器来触发您的历史更改事件。
将标记的高级设置更改为每个事件触发一次也很重要而不是每页一次。如果没有这个，标签只会在初始页面加载时触发。
I've been spending a bit of time developing an MVP at quickcypher.com. I wanted to start putting in some analytics, and it worked great for just tracking total visits, but things went south when I tried to track different URLs on my site that uses React Router.
My approach was this: Setup a GA tag that fires on some pages, using a trigger for a custom "pageview" event. When things did fire, I would set the field page to "/rap" for example. I was firing the event in the "componentDidMount" method of the top level component for each of my views. Using the debugger, I saw the event fire as expected, but for the life of me I can't get GA to acknowledge the event. GA works as expected when I simplify the tag to fire on "all pages", so I'm assuming it has something to do with React.
Has anyone successfully implemented this or run into similar problems? Is my approach all wrong? Hoping for some guidance...cheers!
A bit late to the party here, but react router should need no special code to integrate with GTM. Just drop the GTM script on your page (immediately after the opening <body> tag as recommended) and let your app run as normal.
In GTM create a custom trigger for history change.
You can fire it on all history changes.
Or only on some of them. Only on your production hostname, for example.
Then add a tag for your google analytics (or whatever) and configure it to fire on your history change event by clicking "More" under "Fire On" and selecting the trigger created above.
It's also important to change the Advanced Settings of our tag to fire once per event instead of once per page. Without this, the tag will only fire on the initial page load.
这篇关于React +路由器+ Google跟踪代码管理器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
