Home –  ウェブ製作 – jQueryを使ってブログの読み込みを速くするAdSense最適化の方法

jQueryを使ってブログの読み込みを速くするAdSense最適化の方法


Googleの画像

piouPiouM’s devOptimiser 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^=&quot;adsref-&quot;]').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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA