React + 路由器 + 谷歌标签管理器 [英] React + Router + Google Tag Manager
问题描述
我花了一些时间在 quickcypher.com 上开发 MVP.我想开始进行一些分析，它在跟踪总访问量方面效果很好，但是当我尝试在使用 React Router 的网站上跟踪不同的 URL 时，事情变得很糟糕.
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.
我的方法是:设置一个在某些页面上触发的 GA 标记，使用自定义页面浏览"事件的触发器.例如，当事情发生时，我会将字段页面设置为/rap".我正在为我的每个视图在顶级组件的componentDidMount"方法中触发事件.使用调试器，我看到事件按预期触发，但在我的一生中，我无法让 GA 确认该事件.当我简化标记以在所有页面"上触发时，GA 会按预期工作，所以我假设它与 React 有关系.
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!
推荐答案
这里的聚会有点晚了，但是反应路由器应该不需要特殊的代码来与 GTM 集成.只需将 GTM 脚本拖放到您的页面上(按照建议在打开 <body> 标记之后立即)，让您的应用正常运行.
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.
在 GTM 中为历史记录更改创建自定义触发器.
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 + 路由器 + 谷歌标签管理器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
