piouPiouM’s dev に Optimiser le chargement des AdSense (AdSense の読み込みを最適化する方法) という記事があったので、それを意訳しています。
あなたは、ウェブサイトの内容を読む前に広告のロードが終わるのを待ったことがあると思います。実際、Google AdSense を代表するウェブ広告のロードは非常に遅く、それによって、閲覧者をイライラさせたり Adblock Plus 等でウェブ広告を非表示設定にされたりして、結果的にウェブサイトの運営者は損をすることになります。
この記事では、jQuery を使って広告のロードを最後にする方法を説明します。
ムダ話はここまでにして、早速ソースコードを作ってみましょう。
まず、広告を囲むための DIV タグを作って下さい。
広告を表示させたいところに以下のコードをコピーアンドペーストしてください。
<!-- HTMLファイル [ads_id] は、なんでもいいので自分で決める。 [ads_format] もなんでもいいが、square250 や banner468 にするとわかりやすい。 --> <div id="ads-[ads_id]" class="ads [ads_format]"> Advertisment </div>
CSS ファイルの設定をします。下記のコードをコピーアンドペーストしてください。
/*
CSSファイル
.hide は固定。それ以外は自分で変更可能
上のhtml ファイルで設定した ads や [ads_format] のスタイルを設定
*/
.hide {
display: none;
}
.ads {
background-color: #F4F4F4;
color: #666666;
font-size: 11px;
text-align: center;
text-transform: uppercase;
}
.square250 {
height: 250px;
line-height: 250px;
width: 250px;
}
.banner468 {
height: 60px;
line-height: 60px;
width: 468px;
}
次に下記のコードをHTMLファイルの</body>の直前にコピペしてください。
WordPress の場合は footer.php に入れてください。
<!-- HTMLファイル [ads_id] はHTMLファイルで設定したもの。 Google <a href="http://www.authority-site.com/tag/adsense">Adsense</a> のコードをそのままコピペ。 --> <div class="hide"> <!-- Ads --> <div id="adsref-[ads_id]"> <script type="text/javascript"> google_ad_client = "pub-[client_id]"; google_ad_slot = "[slot_id]"; google_ad_width = 250; google_ad_height = 250; </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script> </div> </div>
jQuery を読み込んだ後に、下記のコードを挿入する。
/*
HTMLファイル、あるいは Javascriptファイル
*/
$(function() {
var $ads;
$('div[id^="adsref-"]').each(function() {
$ads = $('#ads-' + this.id.substr(7)).empty();
$('ins:first', this).appendTo($ads);
});
});
これで、コンテンツをすべて読み込んだ後広告を読み込むようになり、ウェブサイトの使いやすさが向上します。
Optimiser le chargement des AdSense – piouPiouM’s dev
Flickr: Carlos Luna’s Photostream
