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

公開日 2019/04/19 Bloggerカスタム Vaster2

お客様のご要望からうまれた
シンプルな葬儀【小さなお葬式】

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

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

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

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

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

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

コード

</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タグ生成
    var el = document.createElement("script");
     
    // scriptタグの src属性に読み込みたいファイルを指定
 el.async = true;
    el.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
     
    // BODY要素の最後に追加
    document.body.appendChild(el);
    
  }
//]]>
</script>

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

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

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

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

【JavaScript】スマホとPCを判断する条件分岐|iPhone・Android

【JavaScript】スマホとPCを判断する条件分岐|iPhone・Android|JavaScriptを使用していると、スマートフォン・タブレット・PCによって処理を変えたい場合があるかもしれません。今回は、そのような場合に使用できるJavaScriptの例となり、サイトアクセス時のブラウザのユーザーエージェントの値を使い、スマホ・タブレット・PCの条件分岐を行い......