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解決方案。