Google Tag ManagerとAdsenseを遅延読み込みする方法

Google Tag ManagerとAdsenseを遅延読み込みする方法です。

以前「PageSpeed Insightsのパフォーマンス改善のためにやったこと」でサイトの表示速度の高速化について紹介した。その結果、「デスクトップ」でのパフォーマンスは向上したものの、「携帯電話」でのパフォーマンスがいまいちだった。

いろいろ試したところ、Google Tag Managerを遅延読み込みさせることで、スマホでの高速化が可能となった。

ここでは Google Tag ManagerとAdsenseを遅延読み込みする方法 を紹介します。

Page Speed InsightsでGoogle Tag Managerの影響をチェック

まずは、Page Speed Insightsで、Google Tag Managerの影響をチェックしてみる。

「使用していない JavaScript の削除」に「Google Tag Manager」があった。ここでいうGoogle Tag Managerは「Google Analytics」のことだ。ついでにAdsenseのJavaScriptも対象になっていることに気が付けた。

使用しているのに使用していないって言われるのは謎だが、メッセージにあるように「必要になるまでスクリプトの読み込みを遅らせる」という行為が、高速化にとって有効だというのは間違いなさそうだ。

Google Tag ManagerとAdsenseを遅延読み込みする

では、Google Tag Managerを遅延読み込みするスクリプトを紹介する。

ここから先の紹介する記事は、Google AnalyticsやGoogle Adsenseの設定を自分でやったことがある方が対象となる。WordPressのプラグインなどを使ってAnalyticsの設定をしていたりする場合は対象外となるので注意してほしい。

Google Analyticsの設定コードを変更する

Google Analyticsの設定は、bodyタグすぐ下に下記のコードを設置していたことと思う。

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXX');
</script>

G-XXXXXXXXXの部分は、自身のGoogle Analyticsのトラッキングコードに読み替えてください。

サイトの表示速度を遅くさせている原因は、先頭行にある「<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"></script>」というコード。こいつが悪さをしているので、このコードは消してしまおう。

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXX');
</script>

この状態だとAnalyticsのJavaScriptは読み込まれない。後述する遅延読み込みのコードを追記することで、Google Analyticsでのトラッキングが開始される。

Google Adsenseの設定コードを変更する

Google Adsenseの設定は、広告設置したい場所で下記のようなコードを記述していたことと思う。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXX"
     crossorigin="anonymous"></script>
    <ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-XXXXXXXXXXXXXX"
      data-ad-slot="XXXXXXXXX"
      data-ad-format="auto"
      data-full-width-responsive="true"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

サイトの表示速度を遅くさせている原因は、先頭行にある「<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXX" crossorigin="anonymous"></script>」というコード。こいつが悪さをしているので、このコードは消してしまおう。

    <ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-XXXXXXXXXXXXXX"
      data-ad-slot="XXXXXXXXX"
      data-ad-format="auto"
      data-full-width-responsive="true"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

この状態だとAdsenseのJavaScriptは読み込まれない。後述する遅延読み込みのコードを追記することで、Google Adsenseでの広告配信が開始される。

遅延読み込みするスクリプト

Google Tag ManagerとGoogle AdSenseを遅延読み込みするスクリプトは下記の通り。

/*
 * Google Tag Manager / Google AdSense 遅延読み込み
 */
var loaded = false;
window.addEventListener('scroll', function() {
  if ( !loaded ) {
    // Google Tag Manager
    var gtags = document.createElement('script');
    gtags.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX';
    gtags.async = true;
    // head 要素に追加
    var head = document.head || document.getElementsByTagName('head')[0];
    head.appendChild(gtags);
    
    // Google AdSense
    var ads = document.createElement('script');
    ads.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXX';
    ads.async = true;
    ads.crossOrigin = "anonymous";

    var src = document.getElementsByTagName('script')[0];
    src.parentNode.insertBefore(ads, src);

    // 遅延読み込みの完了
    loaded = true;
  }
});

これをbody終了タグの前あたりに設置すればOK。WordPressならfooter.phpの一番下あたりかなっと。

このスクリプトでは、ユーザーがスクロールしたことを検知してAnalyticsとAdSenseを読み込みする。つまり、ユーザーがサイトを開いたままだとAnalyticsは読み込まれず、トラフィックには何も記録されない。Adsenseも同様で、開いたままでは広告が表示されない。

それじゃあ、トラフィックが減るじゃないかとか、広告収入が減るかもしれないじゃないかという声が聞こえてきそうだけど、スクロールしないで離脱するユーザーは、ほとんどの場合、間違えて開いたことが原因と推測できる。そんなケースのトラフィックを記録してもしょうがないし、広告配信しても意味がないので、気にすることはないと筆者は思う。

動作検証

スクリプトの設置が終わったら、必ず動作確認をすること。

Google Tag Managerコードが設置されているかの確認は、サイトを開いてスクロールする。その後、F12ボタンを押下して開発者ツールを開く。

「googletagmanager」で検索して下図のようなコードが出ていればOK。

Adsenseの動作確認は、サイト内に広告表示されればOK。これはすぐわかるから助かるね。

ただ、広告の配置は変更せざるを得なかった。というのも、スクロールしないと広告が表示されないので、ページ上部に配置していた広告スペースは見られることがなくなったんで削除した。配置場所については、今後も検討が必要かもしれないなー。

まとめ

Google Tag ManagerとAdsenseを遅延読み込みする方法を紹介しました。

この対応により「使用していない JavaScript の削除」のエラーが消えた。パフォーマンス向上も成果が出ているし、広告収入にも今のところ影響はない。なんならユーザー数は毎月増えてきているので、一定以上の効果があったといえるだろう。

サイトの高速化バトルに終わりはないかもしれないけど、今回の対応でしばらく様子を見ていこうと思う。

おつかれさまでした。

この記事がお役に立ちましたら シェア をお願いいたします。