Google 标签管理器单页应用获取历史变化元素

Google tag manager single page app get element on history change

我为页面浏览量的自定义维度创建了一些变量。

网页浏览触发器:窗口加载或历史记录更改 正在推送数据,但它只获取前几页' 例如,

page/1 div class "page date" is 25th Jul, I would get undefined, but when I click onto page/2, i would get the page/1's "page date"

function() {
 return window.document.getElementsByClassName('page date')[0].innerText;
}

好像是在相应的页面内容加载到DOM之前触发了history事件。这不是你可以责怪 GTM 的事情(GTM 看到历史变化,检查 DOM,并抓住它在那里找到的任何东西,这就是 normal/expected 行为)。

您的解决方案:

  • 确保在触发历史事件之前 DOM 中的内容已更新:这是应用程序方面需要解决的问题,并且这可能不容易改变(如果你使用像 react 这样的框架,最好不要开始破解它的核心行为)。

  • 延迟历史事件触发:看看this solution which describes how to achieve this。请注意,基于延迟的解决方案永远不会 100% 可靠,因为在您的延迟和内容加载之间存在竞争条件,并且您不确定谁会先到(并且过多地增加延迟会导致副作用的用户在分析进行更改以捕获它们之前快速连续更改页面)。

  • Detect DOM changes:一个更稳健的替代方法是监控 DOM 的特定元素每个页面(例如带有页面 ID 或 URL 的 <meta> 元素)。当您收到历史更改时,您可以使用标记来启动对此元素的监视,当元素实际更改时,这意味着 DOM 已更新,您可以触发自己的触发器。这可以通过 MutationObserver 或使用 setInterval/setTimeout 循环手动检查来完成。但是,如果 DOM 在几个阶段(逐块)更改,这将不起作用(您的 <meta> 元素会发生变化,但您正在寻找的 div 不会),需要您开始在每个元素或每个块级别上进行监控,这将是一项相当大的工作。

  • 从您的应用程序推送数据层this would be my preferred option。我会挂钩到你的应用程序的逻辑(你应该能够扩展路由方法或者应用程序框架应该给你事件监听器你可以绑定你的自定义函数,你可以告诉 GTM 页面已更改(例如 dataLayer.push({'event': 'page_changed'});)