Jquery 和 Google 跟踪代码管理器

Question

我在我的网站上实施 Google 跟踪代码管理器时遇到了一些问题。我有一个 Google 代码，当我在我的网站上尝试它时，它会造成很多的 javascript 冲突。

所以我尝试将代码放在一个单独的文件中，以便逐步执行并观察不同脚本的行为。

这里是我非常简单的 HTML 页面：

<!DOCTYPE html>
<html>
<head>
    <title>Titre</title>
</head>
<body>
    <!-- Google Tag Manager -->
    <noscript>
    <iframe src="http://www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>
    </noscript>
    <script type="text/javascript">
        dataLayer = [{'uid':'12'}];
        (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='//www.googletagmanager.com/gtm.js?id='+i+dl;
            f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-XXXXXX');
    </script>
    <!-- End Google Tag Manager -->
    hello
</body>
</html>

而这个页面，returns JS 控制台中的一个错误：

Uncaught ReferenceError: jQuery is not defined

嗯，这出乎意料，jQuery在这里有什么用？我什至没有在我的 body 标签上声明它，Google 需要 jQuery 吗？

所以这很奇怪，第二件事，当我在浏览器上加载后查看生成的 HTML 页面时：

<body>
... Long stuff here
<script type="text/javascript" id="" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
... some other stuff here
</body>

这是什么魔法？为什么 Google 在我的页面底部添加 jquery 东西，为什么我的控制台显示 jQuery 错误？

非常感谢任何类型的信息，我完全迷路了...... 祝你有美好的一天！

Answer 1

我终于找到了解决方案，正如在另一个问题中所说，jQuery 是由 googletagmanager 注入的，它是由配置 google 的 Web 代理配置的标签管理器。

因此，如果您遇到同样的问题，请致电您的网络代理...

如果您自己配置了标签管理器，请在 Google 标签管理器界面上检查您的设置。

Answer 2

Google 跟踪代码管理器论坛上的 Simo Ahava 回答了此类问题：

Why jQuery might not be defined

基本上，他说GTM默认不加载jQuery。

即使您的页面确实加载了它，使用它的 GTM 标记也可能会在 jQuery 的页面加载之前被触发。

您可以让 jQuery 代码等待库加载或在自定义 HTML 标记中加载它。

Answer 3

如前所述，GTM 可能会在页面 jQuery 加载之前加载。这意味着如果您在通过 GTM 注入的脚本中使用 jQuery，它可能会生成 "Uncaught ReferenceError: jQuery is not defined"，具体取决于浏览器资源加载策略。

也就是说，您必须保证 jQuery 在之前加载 GTM 脚本。您可以通过以下任一方式执行此操作：

控制脚本的加载顺序
使用 hack，例如使用 setInterval 循环直到 jQUery 可用：

var func = function() {
    if (jQuery) {  
        clearInterval(timer);
        // do your stuff
    }
}
var timer = setInterval(func, 1000);

Jquery 和 Google 跟踪代码管理器

Jquery and Google Tag Manager

jquery

google-tag-manager