“历史更改”事件后触发“仅链接”事件答案

【问题标题】："Just Links" Event firing after "History Change" event“历史更改”事件后触发“仅链接”事件
【发布时间】：2019-08-19 19:03:47
【问题描述】：

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

（“历史变化”事件与页面浏览事件无关）

因此，Page PathGTM 数据层变量应该是触发事件的路径，与Click URLGTM 数据层变量的值相同，即@ <a/> 标签中的 987654323@ 值。

例如：

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

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

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

有没有其他人遇到过这个问题并提出了任何类型的解决方案？可能有一个只使用Click - All Elements 的解决方案，但默认情况下不会使用<a/> 遍历DOM 树并去除Click URL 值的href，这意味着在@987654334 内的嵌套元素上提取href 值@ 不起作用。但是，Just Links 确实这样做了。

谢谢！

【问题讨论】：

标签： google-analytics vuejs2 google-tag-manager vue-router

【解决方案1】：

您可以查看tag firing priority。将点击代码调整为比依赖于历史记录更改触发器的代码具有更高的优先级。

【讨论】：

谢谢@XTOTHEL，事实上我已经尝试过了，但没有运气。没有依赖于历史更改触发器的标签。无论如何都会触发历史更改事件，以便 GTM 可以使用新环境更新其数据层。我在系统中只有一个标签，它是由“Just Links”点击触发的，它总是在历史更改事件之后触发。所以没有什么可以优先考虑的。

【解决方案2】：

由于网站更新，我刚刚遇到了这个问题。我没有将所有“Just Links”切换为“All Elements”并处理许多令人头疼的问题，而是创建了一个新变量来引用页面路径，而不是内置的“Page Path”变量。这个变量基本上存储了“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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：