Googleアドマネージャーjs遅延読み込み方法AdManager遅延読み込み

Googleのサービスにはいろいろなものがあります。GmailをはじめとしてGoogle AdSense（アドセンス）やGoogleタグマネージャーやGoogleアドマネージャーGoogle Analytics（現在はGA4）などなど。それぞれにJavaScriptが使用されています。以前にはGoogle AdSense（アドセンス）のJavaScriptと遅延読み込み方法について以下にて記事にしました。

AdSense（アドセンス）新コードの遅延読み込み2つの方法

Googleのサービスを利用されている方々は多いと思います。さまざまサービスがありますが、今回はグーグルアドセンス（Google AdSense）の新しいコードの遅延読み込みコード

📅 2021.10.06 | 📂 AdSense, WordPress, カスタマイズ, 伝えたいこと, 備忘録

今回はアドマネージャーのJavaScriptを遅延読み込みさせる方法になります。

アドマネージャーのJavaScriptは以下のようになっています。

https://securepubads.g.doubleclick.net/tag/js/gpt.js

上記JavaScriptは本来head内に挿入するコードになっています。ですが、JavaScriptはhead内にての読み込みだとPageSpeed（ページ読み込み速度：スピード）に影響を与えます。PageSpeed InsightsにてURLを貼り付けて測定してみると一目瞭然です。

まずは、JavaScript遅延読み込みの為のコードは以下になります。

<script>
// 一度だけ実行されるようにフラグを設定
var scriptAdded = false;

window.addEventListener('scroll', function() {
  // スクロールが検知されたら実行
  if (!scriptAdded) {
    // 新しい script 要素を作成
    var newScript = document.createElement('script');
    newScript.src = 'https://securepubads.g.doubleclick.net/tag/js/gpt.js';
    newScript.async = true;
    
    // head 要素に追加
    var head = document.head || document.getElementsByTagName('head')[0];
    head.appendChild(newScript);
    
    // スクリプトが追加されたことを記録
    scriptAdded = true;
  }
});
</script>

上記コードを</body>タブ直前に挿入します。挿入後には上記した以下コードをhead内から削除します。

https://securepubads.g.doubleclick.net/tag/js/gpt.js

その後は、アドマネージャーにてのコードをhead内に残しておきます。これだけでアドマネージャーのJavaScriptの遅延読み込みは完了です。スクロールした際に発動するようになっています。

もう一点として、アドマネージャーのコード内に以下のようになっている箇所があります。

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>←このJavaScriptは上記したコードにて遅延読み込み。
<script> window.googletag = window.googletag || {cmd: []}; 
    googletag.cmd.push(function() { 
        googletag.defineSlot('/✕✕✕✕✕✕✕✕✕✕✕/AdManagerの広告枠ID-✕✕✕✕✕✕✕✕/◯◯◯◯_◯◯◯◯', [[300, 250], [336, 280]], 'div-gpt-ad-✕✕✕✕✕✕✕✕✕✕✕-✕').addService(googletag.pubads());
        googletag.pubads().enableSingleRequest();←このコードを変更。
        googletag.enableServices(); 
    }); 
</script>

上記コード内の赤色部分のRequestを以下のように変更します。LazyLoad

googletag.pubads().enableLazyLoad();

googletag.pubads().enableSingleRequest();のRequest部分のみをLazyLoadに変更します。1行全体でみると以下のようになります。

googletag.pubads().enableLazyLoad();

この上記2点にてアドマネージャー（AdManager）のJavaScriptの遅延読み込み方法になります。ページ表示速度で悩まれている方はJavaScriptの遅延読み込み方法にて少しでも表示速度の高速化に繋がるといいですね。参考まで。

PageSpeed Insightsは以下になりますので、上記2つを実施した後と前（ビフォアアフター）を比較してみてください。

PageSpeed Insights

URL: https://pagespeed.web.dev/