[Adsense Lazy load] スマホの時のみアドセンスを遅延読み込みさせる [Mobile only]

Google Logo Background : https://www.cleanpng.com

目次

• スマートフォンの時にのみ、アドセンスを遅延読み込みさせる
• 設置手順
• 参考にさせていただいたサイト

スマートフォンの時にのみ、アドセンスを遅延読み込みさせる

PCの時はPageSpeed Insightsのスコアは悪くなかったので、スマートフォンの時にのみ遅延読み込みをさせました。

具体的には、以前設置した遅延読み込みの（スクロールさせると読み込みが始まる）JavaScriptを条件分岐させました。

後述するサイトを参考に、素人が書いたものです。正確性などは担保しておりませんので留意してください。

また、未知の不具合、Googleからの指摘、アドセンスの収益の減少などがあるかもしれないので、設置の際は自己判断でお願いします。

HTMLを編集します。必ずバックアップを取ってから作業してください。

設置手順

まず、既存の<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>はすべて削除。

次に下記コードを</body>の直上に貼り付け。

<script type='text/javascript'>
//<![CDATA[
// iPhone iPad iPod Android の判別
if (
  navigator.userAgent.indexOf('iPhone') > 0 ||
  navigator.userAgent.indexOf('iPad') > 0 ||
  navigator.userAgent.indexOf('iPod') > 0 ||
  navigator.userAgent.indexOf('Android') > 0) {
  var lazyadsense = false;
  window.addEventListener("scroll", function() {
    if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) {

      (function() {
        var ad = document.createElement('script');
        ad.type = 'text/javascript';
        ad.async = true;
        ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
        var sc = document.getElementsByTagName('script')[0];
        sc.parentNode.insertBefore(ad, sc);
      })();

      lazyadsense = true;
    }
  }, true)
} else {
  // scriptタグ生成
  const createAdsbygooglejs = document.createElement('script');

  // src属性をtrue,src属性に読み込みたいファイルを指定
  createAdsbygooglejs.async = true;
  createAdsbygooglejs.src = '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';

  // BODY要素の最後に追加
  document.body.appendChild(createAdsbygooglejs);

}
//]]>
</script>

PCの時は <script async src="......adsbygoogle.js"></script> が挿入されました。

以前の遅延読み込みコードと、今回参考にさせていただいたサイトのコードをつなぎ合わせたものですが、希望通りの動きをしました。

表記のゆれは、おいおい直していきたいです。

参考にさせていただいたサイト