Twitter icon Facebook icon Line icon Hatena Bookmark icon Pocket icon Feedly icon

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




アドセンスロゴ

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

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> が挿入されました。

PCのときのみbody直上にアドセンスのスクリプトが挿入される

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

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

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

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

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

JavaScript スマートフォンとPCを判別して表示する要素を振り分ける方法 - by Takumi Hirashima

JavaScript でスマートフォンとPCを判別して表示する要素を振り分ける方法を紹介します。ユーザーエージェントの判別には navigator.userAgent を利用します。

【コピペでOK】スマホとPCのデバイスごと条件分岐するスクリプトまとめ

デバイスごとにPC用、スマホ用へ条件分岐するスクリプトのまとめです。コピペでご利用ください。

javascriptでモバイル判定 - ITS

簡単なモバイル用判定処理を書きました。基本的にPCとそれ以外というかなりアバウトな分け方になりますがアンドロイド、iOSなどの判定が出来ます。

JavaScript内から外部JavaScriptを読み込む方法 - SMART 開発者のためのウェブマガジン

JavaScriptのコード内からほかのJavaScriptを読み込む方法を紹介します。 特定の条件によりJavaScriptを読み込みたいときなどに有用です。




NHkで紹介されました。

0 件のコメント :