AdSenseを差し込むスクリプトが表示してから移動している問題に対応してみました

※本サイトはアフィリエイトプログラムによる収益を得ています。
　ページ内のリンクがアフィリエイトリンクの場合があります。

　こちらの記事で話題になった、AdSenseを表示してから移動していることで結果的に「ファーストビューではない場所のAdSenseブロック」として二重にカウントされているのではないか疑惑。

www.toma-g.net

　そこに気づくとは…

　確かに、はてなブログのユニットはWordPressのそれに比べて妙に数値が低い…と思っていたところはあったので、試しに対応してみることにしました。

※以下のコードを参考にされる場合は、自己責任でお願いします。コードの動作、およびそれに伴う結果について当ブログでは一切責任を負いません。

具体的な対応のポイント

(2016/7/29追記)

　問題になっていたスクリプトの作者様が改良版を作って下さいました！

uxlayman.hatenablog.com

　AdSenseのコードをJavaScriptコメントとして埋め込む方式で、こちらのほうが簡単です。

なのでこちらを使用されることをお勧めします。

okanewofuyaso.hateblo.jp

　こちらの記事を参考にDOM Elementを組み上げていきます。

　例えば、うちのレスポンシブ広告はこんな感じ。(XXXX、YYYYにはアカウントごとの数字が入ります)

<div style="text-align:center; font-size: 80%">スポンサーリンク</div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXX"
data-ad-slot="YYYY"
data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || ).push({});
</script>

これをJavaScriptのDOM Elementに変換すると、

<script>
var elmDiv = document.createElement('div');

// script async
var elmPagead2 = document.createElement('script');
elmPagead2.async = true;
elmPagead2.src = '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
elmDiv.appendChild(elmPagead2);

var spsLink = document.createElement('div');
spsLink.style.textAlign = 'center';
spsLink.style.fontSize = '80%';
spsLink.innerHTML = 'スポンサーリンク';
elmDiv.appendChild(spsLink);

// 
var adsIns = document.createElement('ins');
adsIns.className = 'adsbygoogle';
adsIns.style.display = 'block';
adsIns.dataset.adClient = 'ca-pub-XXXX';
adsIns.dataset.adSlot= 'YYYY';
adsIns.dataset.adFormat = 'rectangle';

var adsGgl = document.createElement('script');

adsGgl.text = '(adsbygoogle = window.adsbygoogle || ).push({});';

elmDiv.appendChild(adsIns);
elmDiv.appendChild(adsGgl);

// h3の上に追加

var $target = $('.entry-content > h3');
$target.eq(0).before(elmDiv);
</script>

こんな感じ。

　だいたいそのままであることが見て取れると思います。

　「pagead2.googlesyndication.com/pagead/js/adsbygoogle.js」については、参考にした記事のほうではheadタグなどに…とありましたが、一応ここに設定しました。

　取り除きたい場合は

// script async
var elmPagead2 = document.createElement('script');
elmPagead2.async = true;
elmPagead2.src = '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
elmDiv.appendChild(elmPagead2);

のブロックを削除して下さい。

　ここでポイントになるのは、adsInsで組んでいるところです。

ここだけは、それぞれの広告ユニットに合わせて調整する必要がある部分です。

　といっても難しい話では無く、insタグの内容を踏襲すればOK。

　例えば、レクタングルなら

<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-XXXX"
data-ad-slot="YYYY"></ins>

から、

var adsIns = document.createElement('ins');
adsIns.className = 'adsbygoogle';
adsIns.style.display='inline-block';
adsIns.style.width='300px';
adsIns.style.height='250px';
adsIns.dataset.adClient = 'ca-pub-XXXX';
adsIns.dataset.adSlot= 'YYYY';

になります。

insタグのstyle="xxx:yyy"に書いてあるものを分解してstyle.xxx='yyy'としていく作業ですね。

　レスポンシブの場合は、上の自分の事例のように

<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXX"
data-ad-slot="YYYY"
data-ad-format="rectangle"></ins>

から

var adsIns = document.createElement('ins');
adsIns.className = 'adsbygoogle';
adsIns.style.display = 'block';
adsIns.dataset.adClient = 'ca-pub-XXXX';
adsIns.dataset.adSlot= 'YYYY';
adsIns.dataset.adFormat = 'rectangle';

という形にします。

styleが少ない代わりに、adFormat属性にrectangleを指定しています。(ウチではad-formatをautoからrectangleにしてあるのです)

「data-xx-yy="zz"」という属性を、「dataset.XxYy='zz'」にしていくお仕事。

変換ルールはこのあたりに詳しいです。

HTMLElement.dataset - Web API インターフェイス | MDN

　使っている広告ユニットによってこのあたりの修正が違ってくると思うので、適切につじつまをあわせてください。

　あと修正していて気づいたんですが、はてなブログの記事ページプレビューで確認していると、デベロッパーツールのコンソールに