ランチブックにGogole adsense広告を貼ってみた。
不定期更新で内容もバラバラな当ブログのアドセンスが意外とクリックされていて、蓄積が70ドル以上になっていた。
ならば、「ターゲットが明確でアクセスも急成長中のランチブックなら、もっとクリックされるかも？」と思い、実験のつもりで貼ってみた。
ところが、またもや落とし穴。Adsenseのコードを貼ると、ページが表示されないのだ。
ランチブックは、僕が作ったPHPフレームワークQuictyで四川赤熊猫さんが作ったサイトだ。
この問題は、現在のQuicty2.0以降を使用したすべてのサイトに共通するので、ここに解決法を書いておく。
原因
Quicty 2.0では、SEO対策、アクセシビリティの向上、レイアウト変更の柔軟性確保などの理由から、サイトのHTMLにはレイアウト情報が含まれていない。
ランチブックの場合、右側にメニューがある横幅固定の2カラムのレイアウトで表示されるが、このレイアウトを構成するためのタグは、HTMLのソースには含まれていないのだ。
どうやって、右カラムレイアウトを表示しているのか？ HTMLソースがWebブラウザに読み込まれたあと、JavaScript（というかJQuery）でレイアウト用のdivタグを動的に追加したり、入れ子構造を作りだすことで、レイアウトを構成しているのだ。
だから、JavaScriptに対応しない古いブラウザやテキストブラウザでは、2カラムではなく単なる1カラムのページに表示されてしまう。その代わり、GoogleやYahoo!のロボットから見ると、読みやすいシンプルなHTMLになっている。
ただ、Adsenseのように、JavaScriptでiframeを生成してその中にコンテンツを表示するタイプの広告を貼り込んだ場合、divタグといっしょにscriptタグまで移動させてしまうと、動作エラーが発生してしまうようだ。
対策
(1) Adsense広告のコードをJQueryによるレイアウト操作に影響を受けない、HTMLの一番最後に貼り込む。
(2) Adsense広告のコードがiframeを生成し終わったあとに、iframeだけ必要な場所へ移動させるJQueryのコードを追加する。
実際には、テンプレートのview/includes/common/footer.incの中に、以下のようにコードを追記した。
<div id=”adsense-source”>
<script type=”text/javascript”><!–
google_ad_slot = “5291421418”;
google_ad_width = 468;
google_ad_height = 60;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
<script type=”text/javascript”><!–
$(‘<div id=”adsense”></div>’)
.append($(‘#adsense-source>ins’))
.appendTo($(‘#site-id’).get(0));
$(‘#site-id’).css(‘height’,’160px’);
//–>
</script>
</div>
基本的には、(1) <div id=”adsense-source”>〜</div>の中に、Adsenseのコードを貼り込む。(2) 貼り込んだそのあとに、ins（内部にadsenseのiframeを含んでいる）を移動するJQueryのコードを書く。ここでは、ページのヘッダバナー部である<div id=”site-id”></div>の最後に広告のコードを追加する
$(‘<div id=”adsense”></div>’)
.append($(‘#adsense-source>ins’))
.appendTo($(‘#site-id’).get(0));
というコードを書いた。
iframeを含むINSタグを<div id=”adsense”></div>の中に入れ、その#adsenseのdivを#site-idのdivの中に移動させている。※2009年2月現在、adsenseのiframeはINSタグの中に入るようになったので改訂。以前は「.append($(‘#adsense-source iframe’))〜」と書いていた。今回、#adsense-source>insとしたのは、insタグの中にまたinsタグが含まれているので、adsense-source直下のinsタグだけを指定するため。
わざわざ、新しいdivの中にinsを入れたのは、あとでCSSによる設定をやりやすくするためだ。追加したCSSは以下の通り。
#adsense { text-align: center; margin-bottom: 10px;}
#adsense iframe { margin: 10px 0 0 0; padding: 0;}
