前回、一度表示したアドセンスをJavascriptで移動すると、アクティブビュー視認可能率が正確に計測されず、低下してしまうところまでお話しました。
本記事では、その回避方法を書きたいと思います。
前の記事を読んでいない方はぜひ読んでから、本記事を読んでくださいね。
DOMオブジェクトを生成してから、所定の位置に挿入することで、アクティブビュー視認可能率に影響を与えずに、アドセンス広告を表示させることができます。
この方法は、IMUZA.comさんのページを参考にさせていただきました。
IMUZA.comさんのページに、Javascriptコードを公開してくださっているので、それをコピーさせていただきます。
アドセンスのHTMLコードは概ね次のような感じだと思います。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXX" data-ad-slot="XXX" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); *1 </script>
複数のアドセンス広告を貼っている場合は、この
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
の部分は、一ヵ所にまとめることができますので、まとめる場合は削除してもよいです。
何度も同じコードを読み込むのは無駄ですので、
<head>～</head>
に1回だけ書くとよいでしょう。
はてなブログの場合は、「設定」の「詳細設定」に「headに要素を追加」という項目があるので、そこにadsbygoogle.jsのロードするコードを書くと"<head>"に書き込まれます。
DOMオブジェクト生成のためのコードの該当箇所は、
var adsScr = document.createElement('script'); adsScr.async = true; adsScr.src = '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
と
elmDiv.appendChild(adsScr);
ですので、これらを削除します。
ということで、最終的には、
var elmDiv = document.createElement('div'); var spsLink = document.createElement('div'); spsLink.innerHTML = 'スポンサーリンク'; elmDiv.appendChild(spsLink); var adsIns = document.createElement('ins'); adsIns.className = 'adsbygoogle'; adsIns.style.display = 'block'; /* XXX は、自分のアドセンスのコードに含まれている番号で置き換えます */ adsIns.dataset.adClient = 'ca-pub-XXX'; adsIns.dataset.adSlot= 'XXX'; adsIns.dataset.adFormat = 'auto'; var adsGgl = document.createElement('script'); adsGgl.text = '(adsbygoogle = window.adsbygoogle || ［］).push({});'; elmDiv.appendChild(adsIns); elmDiv.appendChild(adsGgl);
はてなブログで、記事中にアドセンス広告を挿入したい場合は、例えば、次のようなコードになります。
var $target = $('.entry-content h3'); $target.eq(1).before(elmDiv);
上記の場合、はてなブログの記事内の2番目のレベル1見出し（HTMLではh3）の前にアドセンス広告を表示できます。
（0から数えます）
"1"を変更することで、目的の見出しの前に表示させることができます。
もちろん、h3を変えることで、他のタグを指定できます。
前ではなく、後ろがよければ".before"を".after"にすればよいです。
見出しの数によって、挿入箇所を変えたければ、
var $target = $('.entry-content h3'); if ($target.length == 1) { $target.eq(0).before(elmDiv); } else { $target.eq(2).before(elmDiv); }
のように、条件分岐してしまえばよいです。
皆さん、いろいろなコードを公開してくださって、大変助かってします。
感謝です。
