web-dev-qa-db-ja.com

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

そして、このページは、JSコンソールでエラーを返します。

Uncaught ReferenceError: jQuery is not defined

さて、これは予想外ですが、jQueryはここで何をする必要がありますか？ bodyタグで宣言すらしていませんが、GoogleはjQueryを必要としていますか？

奇妙なことに、ブラウザにロードした後、生成されたHTMLページを見ると2番目になります。

<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エラーが表示されるのはなぜですか？

いろいろな情報をありがとう、私は完全に迷子になっています...そして良い一日を！

jquerygoogle-tag-manager
6
Hammerbot

他の質問で述べているように、私はついに解決策を見つけました。jQueryはgoogletagmanagerによって注入され、googleタグマネージャーを構成したWebエージェンシーによって構成されました。

したがって、同じ問題が発生した場合は、Webエージェンシーに電話してください...

また、タグマネージャを自分で設定している場合は、Googleタグマネージャのインターフェースで設定を確認してください。

5
Hammerbot

GoogleタグマネージャーフォーラムのSimoAhavaは、このタイプの質問に回答しました。

jQueryが定義されていない理由

基本的に、GTMはデフォルトでjQueryをロードしないと彼は言います。

ページが読み込まれたとしても、それを使用するGTMタグは、jQueryのページ読み込みの前にトリガーされる可能性があります。

JQueryコードにライブラリが読み込まれるのを待つか、カスタムHTMLタグ内に読み込むことができます。

3
Aaron

前に述べたように、GTMはページのjQueryが読み込まれる前に読み込まれる可能性があります。つまり、GTMを介して挿入されたスクリプトでjQueryを使用すると、ブラウザのリソース読み込み戦略によっては、「Uncaught ReferenceError：jQuery isnotdefined」が生成される可能性があります。

そうは言っても、jQueryがロードされていることを保証する必要がありますbefore GTMスクリプト。これは、次のいずれかの方法で実行できます。

  1. スクリプトのロード順序の制御
  2. jQUeryが利用可能になるまでsetIntervalループを使用するなどのハックを採用する：
var func = function() {
    if (jQuery) {  
        clearInterval(timer);
        // do your stuff
    }
}
var timer = setInterval(func, 1000);
1
Anoyz