“仅链接”事件在“历史记录更改”事件后触发

Question

Google 跟踪代码管理器 (GTM) 有一个名为“Just Links”的内置触发器。在我的 VueJS 应用程序中，使用 Vue Router，GTM 在触发“Just Links”触发器之前触发“历史更改”事件。

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

因此，

Page Path

 GTM 数据层变量（应该是触发事件的路径）与 

Click URL

 GTM 数据层变量（即 

href

）具有相同的值

<a/>

 标签中的值。

例如：

用户已开启
• /support
用户点击链接到
• /about
Vue Router 更新浏览器历史记录
历史更改事件触发并更新 Google 跟踪代码管理器数据层的所有内部值（包括位置和页面路径）
“Just Links”事件触发，
• Page Path

  和

  Click URL

  值现在都是

  /about

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

（奇怪的是，当您使用 GTM 中内置的

Click - All Elements

 时，事件会按正确的顺序触发。）

还有其他人遇到过这个问题并提出任何类型的解决方案吗？可能有一个仅使用

Click - All Elements

 的解决方案，但默认情况下不会使用 

<a/>

 遍历 DOM 树并剥离 

Click URL

 值的 href，这意味着提取 

<a/> 内嵌套元素的 href 值

 不起作用。然而，

Just Links

确实做到了这一点。

谢谢！

Answer 1

您可以查看

标签触发优先级。将点击标记调整为比依赖于历史记录更改触发器的标记具有更高的优先级。

Answer 2

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

第一步是创建一个新的自定义 HTML 标签（随意命名），设置为在所有页面和历史记录更改上触发。标签将首先尝试将当前页面路径存储到会话存储中，如果会话存储不可访问，则回退到 cookie。我使用 Simo Ahava 创建的

{{JS - setCookie}} 变量方法来设置 cookie。将页面路径写入存储之前有 2 秒的延迟，这对于“仅链接”触发器触发并接收“正确”值有足够的时间，然后再在下一个页面浏览或历史更改中覆盖该值。我给 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>

第一方 Cookie 变量

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

自定义Javascript变量

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

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

Answer 3

您可以向路由器添加 after 挂钩来创建自定义路径变量，如下所示：

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

然后在 Google 跟踪代码管理器中创建一个新的用户定义变量，其 JavaScript 变量类型称为 Vue 路径。将全局变量路径设置为

window.vuePath

。

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

Answer 4

我在使用 GA4 标签跟踪 SPA 上的链接点击时遇到了同样的问题...

在使用“Just Links”触发器触发的任何标签上，我添加了一个名为“page_path”的参数，该参数返回一个自定义 JS 变量，该变量修改内置的“旧历史状态”数据层变量。这是自定义 JS 变量：

function () {
  var path = {{Old History State}};
  path = path.as
  path = path.split("?")[0].split("#")[0]
  return path
}