Google跟踪代码管理器单页应用获取有关历史记录更改的元素

Question

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

浏览量触发：窗口加载或历史记录更改 数据被推送，但只获取前一页 例如

  

page / 1 div类“页面日期”是7月25日，我不确定，但是   当我单击page / 2时，我将获得page / 1的“页面日期”

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

Answer 1

似乎是在将相应页面内容加载到DOM之前触发了历史事件。您不必怪这是GTM的任何事情（GTM看到历史更改，检查DOM，并抢夺在那里找到的任何东西，这就是正常/预期的行为）。

您的解决方案：

• 请确保在触发历史记录事件之前在DOM中更新内容：这是在应用程序方面要解决的问题，并且可能不容易更改（如果您使用像react这样的框架，如果您不开始了解其核心行为，那可能是最好的选择。

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

• 检测DOM更改：一种更可靠的选择是监视DOM中每个页面唯一的特定元素（例如，具有页面ID的<meta>元素）或网址）。您可以在收到历史记录更改时使用标签来发起对此元素的监视，并且当元素实际更改时，这意味着DOM已更新，并且您可以触发自己的触发器。可以通过MutationObserver或使用setInterval/setTimeout循环手动进行检查。但是，如果DOM在多个阶段（逐个块）中更改，则将无法正常工作（您的<meta>元素已更改，但您要查找的div却没有更改），需要您开始监视每个元素或每个块的级别，这将是很多工作。

• 从应用程序中推送一个数据层：this would be my preferred option。我会了解您的应用程序的逻辑（您应该能够扩展路由方法，或者应用程序框架应该为您提供事件侦听器，您可以绑定您的自定义函数，从而可以告知GTM页面已更改（例如dataLayer.push({'event': 'page_changed'});）