Jquery and Google Tag Manager

2019-02-22 03:33发布

问题:

I am having some problems implementing Google Tag Manager on my website. I have a Google code, and when I try it on my site, it makes a lot of javascript conflicts.

So I tried to put the code on a seperate file, in order to do it Step by Step and observe the behavior of the different scripts.

So here my very simple HTML page:

<!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>

And this very page, returns an error in the JS console:

Uncaught ReferenceError: jQuery is not defined

Well, this is unexpected, what does jQuery has to do here? I didn't even declare it on my body tag, is Google requiring jQuery?

So that was weird, and the second thing, when I look on my generated HTML page, after loading on a browser:

<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>

What kind of sorcery is this? Why does Google add a jquery thing at the bottom of my page, and why does my console shows me a jQuery error?

Thanks a lot for any kind of information, I am totally lost... And have a nice day!

回答1:

I finally found the solution, as it says in an other question, jQuery was injected by the googletagmanager and it was configured by the Web Agency that configured the google tag manager.

So if you have the same problem, call your Web Agency...

And if you have configured yourself the tag manager, check in your settings on Google Tag Manager interface.



回答2:

Simo Ahava on the Google Tag Manager forums answered this type of question:

Why jQuery might not be defined

Basically, he says that GTM does not load jQuery by default.

Even if your page does load it, the GTM tag that uses it might get triggered prior to the on page loading of jQuery.

You can either make your jQuery code wait for the library to be loaded or load it within the custom HTML tag.



回答3:

Like it has been said before, GTM might load before the page's jQuery loads. That means that if you use jQuery in the script injected via GTM, it might generate a "Uncaught ReferenceError: jQuery is not defined", depending on the browser resource loading strategy.

That said, you must guarantee jQuery is loaded before the GTM script. You can do this by either:

  1. controlling the order of loading of scripts
  2. employing a hack such as using a setInterval loop until jQUery is available:
var func = function() {
    if (jQuery) {  
        clearInterval(timer);
        // do your stuff
    }
}
var timer = setInterval(func, 1000);