つんどくダイアリー

つんどくダイアリー

わりと好き勝手書いてるからネタバレてたらごめんね。旧「怒濤の詰ん読解消日記」。積まれてしまったマンガ、ラノベなどを読んで感想を書いています。結果として面白い本の紹介だったりまとめだったりになってる。/端末の表示によると、あと740冊/※本サイトはアフィリエイトプログラムによる収益を得ています。ページ内のリンクがアフィリエイトリンクの場合があります。

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

 

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

 

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

Page-level tag does not work inside iframes.

というエラーが出ていました。プレビュー画面でしか出なかったので、本番適用しておかしくなければ無視してもよいと思います。

注意点

 続報でコードを公開してくれている、こちらの記事にもありますが、

www.toma-g.net

 AdSenseのコード改変は禁止されています。

 結果的に同じコードを目指しているし、必要な措置でもあるので大丈夫…だと思いたいですが、適用される場合は自己責任でお願いします。

 

 

 ひとまずウチも、導入してみて様子見というところで…