web-dev-qa-db-fra.com

Jquery et Google Tag Manager

J'ai quelques problèmes pour mettre en œuvre Google Tag Manager sur mon site Web. J'ai un code Google, et quand je l'essaie sur mon site, cela fait beaucoup de conflits javascript.

J'ai donc essayé de mettre le code sur un fichier séparé, afin de le faire étape par étape et d'observer le comportement des différents scripts.

Alors voici ma page HTML très simple:

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

Et cette page même renvoie une erreur dans la console JS:

Uncaught ReferenceError: jQuery is not defined

Eh bien, c'est inattendu, qu'est-ce que jQuery doit faire ici? Je ne l'ai même pas déclaré sur mon tag body. Google a-t-il besoin de jQuery?

C'était donc bizarre, et la deuxième chose, quand je regarde sur ma page HTML générée, après avoir été chargé sur un navigateur:

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

Quel genre de sorcellerie est ce? Pourquoi Google ajoute-t-il un élément jQuery au bas de ma page et pourquoi ma console affiche-t-elle une erreur jQuery?

Merci beaucoup pour tout type d’information, je suis totalement perdue ... Et passez une bonne journée!

6
Hammerbot

J'ai finalement trouvé la solution, comme il est dit dans une autre question, jQuery a été injecté par le gestionnaire de googlets et configuré par l'agence Web qui a configuré le gestionnaire de balises Google.

Donc, si vous avez le même problème, appelez votre agence Web ...

Et si vous avez configuré vous-même le gestionnaire de balises, vérifiez vos paramètres dans l'interface de Google Tag Manager.

4
Hammerbot

Simo Ahava sur les forums de Google Tag Manager a répondu à ce type de question:

Pourquoi jQuery pourrait ne pas être défini

En gros, il dit que GTM ne charge pas jQuery par défaut.

Même si votre page la charge, la balise GTM qui l'utilise peut être déclenchée avant le chargement de jQuery à la page.

Vous pouvez faire en sorte que votre code jQuery attende que la bibliothèque soit chargée ou la charger dans la balise HTML personnalisée.

3
Aaron

Comme cela a déjà été dit, GTM pourrait se charger avant le chargement de la page jQuery. Cela signifie que si vous utilisez jQuery dans le script injecté via GTM, il risque de générer "Uncaught ReferenceError: jQuery n'est pas défini", en fonction de la stratégie de chargement des ressources du navigateur.

Cela dit, vous devez vous assurer que jQuery est chargé avant le script GTM. Vous pouvez le faire soit par:

  1. contrôler l'ordre de chargement des scripts
  2. employant un hack comme utiliser une boucle setInterval jusqu'à ce que jQUery soit disponible:
var func = function() {
    if (jQuery) {  
        clearInterval(timer);
        // do your stuff
    }
}
var timer = setInterval(func, 1000);
1
Anoyz