web-dev-qa-db-ja.com

Googleタグマネージャーがwindow.loadを遅らせていますか？

ロード時にajax呼び出しを起動するページがあります

$(window).load(function() {
  updateDeliverySlots();
});

また、bodyの上部にGoogleタグマネージャーのJavaScriptがあります（現在の提案では、これをheadセクションに配置することをお勧めしますが、コードは更新されていませんまだ、それが問題の原因だとは思わないでください）。

<body>
        <!-- Google Tag Manager -->
<noscript>
    <iframe src="//www.googletagmanager.com/ns.html?id=XXXX" height="0" width="0" style="display:none;visibility:hidden">
    </iframe>
</noscript>
<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='//www.googletagmanager.com/gtm.jsid='+i+dl;f.parentNode.insertBefore(j,f);
})
(window,document,'script','dataLayer','XXXX');
</script>
<!-- End Google Tag Manager -->
....
</body>

GTMタグに含まれているスクリプトによって行われた呼び出しの1つに問題があります。このスクリプトは、サードパーティにリクエストを送信します。何らかの理由（サーバーがダウンしているなど）でリクエストが接続できない場合、updateDeliverySlots（）関数（およびその中のajax呼び出し）は、リクエストがタイムアウトするまで（60秒）起動されません。また、ページがまだ「ロード中」であることがわかりました（ブラウザのアイコンによると）。

GTMの実装に、間違っていることがありますか？ Googleタグの裏側で起動されるものはすべて非同期である必要があり、ページの「準備」とは関係がないことを理解していました。

javascriptjqueryajaxgoogle-tag-manager
11
northernMonkey

同期スクリプトmustは、処理がそれらに到達したときにフェッチして実行する必要があります、 非同期スクリプトmay処理が到達した後はいつでも実行できます。

したがって、サーバー/ページの制御外のタイミングに応じて、非同期スクリプトは次のことができます。

  • ドキュメントが終了する前に、ロードイベントを遅らせるタイミングで同期リソースを追加します
  • ページが処理された後に同期リソースを追加し、ロードイベントに影響を与えません。
  • ページに大きな影響を与えない非同期リソースを追加します（ページに同期リソースを追加しない限り）

GTMでこれを解決するには、いくつかのオプションのいずれかを選択できます。

  1. 非同期リソースを使用するようにカスタムスクリプトを修正する
  2. 発砲トリガーをpage view -> window loadedに変更します
  3. 非同期リソースのみを使用するように作成する必要があるため、スクリプトをGoogleが提供するタグ（使用可能な場合）に置き換えます。

  4. GTMでカスタムスクリプトをブロックします（これにより、関連する追跡も防止されます）

  5. GTMスニペットでasyncを defer に変更します。

つまり：

  <!-- 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.defer=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXX');</script>
  <!-- End Google Tag Manager -->

これにより、GTMプロセス全体がページが完全に解析された後に移動するため、「Googleオプティマイザー」タグと初期のページ追跡が機能しなくなります。

2
lossleader

同じ問題が発生し、GTMは他のスクリプトの実行を本当に遅らせていました。 jquery $（window）.loadでロードするための小さな変更により、問題が解決しました。

<script>function loadgtm(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).load(function(){loadgtm(window,document,'script','dataLayer','GTMID');});</script>
1
Marquinho Peli