Vue 和谷歌标签管理器

Question

我在 public/index.html 中的应用程序（VueJs）上添加了 GTM 脚本：

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

但是我收到错误

我的网站不使用 JQuery。 我该如何解决这个问题？

Answer 1

该片段本身没有对 Jquery 的引用。 但是，它加载的代码可能。 要正确测试它，请在您的开发工具中打开网络请求阻止窗口，然后阻止 gtm。 重新加载页面，看看是否仍然出现错误。 如果没有，那么确实我们在容器中的某个地方有一个 jquery 引用。

让我们找到它。 您应该转到与您正在加载的 ID 相同的 GTM 容器，转到管理员，然后以整洁的 json 格式导出整个容器。 打开 json 并查找 jquery。 找到用它的东西，把代码改写成纯 JS。

在标签管理器中使用 jquery 或其他第三方 JS 库并不是一个好习惯，正是因为这种情况。 您不希望标签管理器中出现不需要的依赖项。 虽然 jquery 可能对前端代码有用（可以说）因为它创建了一个更通用的跨平台界面，但标签管理器不应该用于 document.writes，dom 突变甚至 dom 抓取应该被视为临时/hacky解决方案。