Question

Google跟踪代码管理器（GTM）具有一个称为“ Just Links”的内置触发器。在我的VueJS应用程序中，使用Vue Router，GTM在触发“ Just Links”触发器之前，先触发“ strong> History Change”事件。

（“历史记录更改”事件与页面浏览事件无关）

因此，Page Path GTM数据层变量（应该是触发事件的路径）与Click URL GTM数据层变量具有相同的值，这是href标记中的<a/>值。

例如：

用户在/support上
用户单击指向/about的链接
Vue Router更新浏览器历史记录
触发“历史记录更改”事件并更新Google跟踪代码管理器数据层的所有内部值（包括位置和页面路径）
“ Just Links”事件触发，Page Path和Click URL的值现在均为/about

我假设GTM / Google Analytics（分析）具有某种内置的延迟策略，不会干扰主要Javascript线程上运行的其他事物。因此，Vue Router会在GTM / Google Analytics（分析）触发“ Just Links”触发事件之前更改路由（从而触发历史记录更改）。

（很奇怪，当您在GTM中使用内置的Click - All Elements时，事件将以正确的顺序触发。）

还有其他人遇到此问题并提出任何类型的解决方案吗？可能仅使用Click - All Elements就有解决方案，但是默认情况下不会使用<a/>遍历DOM树并为Click URL值除去href，这意味着提取<a/>中的嵌套元素不起作用。但是，Just Links会这样做。

谢谢！

Answer 1

您可以查看tag firing priority。调整click标签，使其优先级高于依赖于历史记录更改触发器的标签。

Answer 2

由于网站更新，我刚刚遇到了这个问题。我没有将所有“仅链接”切换到“所有元素”并处理许多令人头疼的问题，而是创建了一个新变量来引用页面路径，而不是内置的“页面路径”变量。由于历史更改，此变量基本上存储了“gtm.linkClick”现在视为上一页路径的内容。我只是初级 JS，所以我确定有更好的方法来编写代码，但它有效。

第一步是创建一个新的自定义 HTML 标签（随意命名），设置为在所有页面和历史更改时触发。标签将首先尝试将当前页面路径存储到会话存储中，或者如果会话存储不可访问，则回退到 cookie。我使用了由 Simo Ahava 创建的 {{JS - setCookie}} 变量方法来设置 cookie。在将页面路径写入存储之前有 2 秒的延迟，这是“Just Links”触发器在下一次浏览或历史更改时被覆盖之前触发并接收“正确”值的充足时间。我为 sessionStorage 和 cookie 指定了相同的名称“gtm.truepage”。

自定义 HTML 标签

<script>
function truePage() {
  try {
    var page = document.location.pathname;
    var storage = window.sessionStorage;
    if(storage) {
     setTimeout(function() {
      storage.setItem("gtm.truepage", page);
      },2000);
    } else {
     setTimeout(function() {
      {{JS - setCookie}}("gtm.truepage",page,1800000,"/",window.location.hostname);
      },2000);
    }
  } catch (e) {
  }
}
truePage();
</script>

Custom HTML Tag Screenshot

第一方 Cookie 变量

下一步是创建一个名为“gtm.truepage”的新的第一方 Cookie 变量。此变量将用作自定义 Javascript 变量的参考。因此，如果更改名称，则在下一部分中还需要更改名称。 Cookie Variable Screenshot

自定义 Javascript 变量

最后一步是创建一个自定义 Javascript 变量（无论您想要什么名称），用于“点击 - 仅链接”触发器。该脚本将首先尝试从会话存储中检索由自定义 HTML 标记设置的页面路径，然后尝试使用第一方 Cookie 变量。

function() {
 return window.sessionStorage.getItem('gtm.truepage') || {{gtm.truepage}}; 
}

Custom Javascript Variable Screenshot

Answer 3

您可以在路由器上添加一个 after 钩子来创建一个自定义路径变量，如下所示：

router.afterEach((to) => {
  window.vuePath = to
}

然后在 Google Tag Manager 中创建一个名为 Vue Path 的 JavaScript 变量类型的新用户定义变量。将全局变量路径设置为 window.vuePath。

现在您可以在触发器中使用 Vue Path 而不是 Page Path 来获取正确的页面路径。

在“历史更改”事件之后触发“ Just Links”事件

3 个答案: