広告スクリプトを object タグで読み込む方法

新年のご挨拶

明けましておめでとうございます、今年もよろしくお願いします（アリガチ）。昨日は知らないうちに年が明けていました（アリガチ）。初夢は見ましたか？（アリガチ）いやぁ、今年もあと 364 日ですね（アリガチ）。年越しの瞬間にジャンプして「おれ、年越しの時は地球にいなかったぜ？」（アリガチ・ちなみに年越しの瞬間にジャンプ – Google 検索）とかいう奴、いませんか？冗談も、休み、休み、言いましょうね（アリガチ）。

という前置きは読み飛ばし、新春早々 hack と行きますか。本当は **ck を（ry

注意書き

今回紹介するのは、広告スクリプトの読み込みのせいでページ全体の描画が遅くなるのを <object> タグで何とかする方法です。実際にこのブログに導入してから、けっこう時間が経ったので、そろそろ公開しようかと。

初めに書いておくと、同様の悩みを持っている人は document.lazy_writer などの導入を考えた方がいいかと思います。今回の方法を導入したために、広告収入が減ったり無くなったりしても責任は持てません（責任持ちます！という人の方がコワイ）。

導入方法

広告を表示するためのページを作成
実際に広告を表示したいページから <object> タグを使って 1 を読み込む

と、これだけです。

実際のコード

まずは、広告を表示させるためのファイルを用意します。ファイル名は適当ですが、PHP ファイルにしました（google_adsense.php）。

<?php header("Content-Type: text/html;charset=utf-8"); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>Google Adsense</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css"><!-- body { margin: 0; padding: 0; overflow: hidden; border: none; } --></style>
</head>
<body>
<script type="text/javascript"><!--
（Google Adsense のコード）
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</body>
</html>

2007-09-14T18:49:10+09:00 追記

charset を設定していないと、文字化けなどの不具合が起こるので追加しました。このせいで、Google のサイト検索（AdSense 付き）が IE だけ表示がおかしかったのですが、なかなか原因に気付きませんでした。というか、IE は窓から（以下略）

そして、実際に広告を表示させたい場所（個別記事ページの本文下など）で、

<p>
<object data="/path/to/google_adsense.php"
type="text/html" width="728" height="90">
Google Adsense
</object>
</p>

という風に読み込みます（実際は一行）。<object> タグに対応していない環境では、4 行目の「Google Adsense」とだけ表示されます。これだけで、自分の環境（WinXP SP2）では IE と Firefox、Opera9 で同じように広告が表示できました。

初めは、IE で読み込んだときにスクロールバーが表示されるのに困りました。Cubdesign Weblog: 横スクロールバーを隠す方法。for IE６フレームを使ったページで紹介されているように互換モードにしたあと、CSS でマージンやパディングを 0 にして、さらにリンクタグの下線を消す、というのが重要なポイントです。

2007-09-11T23:18:44+09:00 追記

──とか書いてあるけど、元のコードだと、すべての要素（*）に対して CSS が適用されていたので、body だけに適用するように変更しました。このあたりも、詰めが甘いな……。

導入のメリット・デメリット

メリット──

広告の表示に時間がかかる場合でもページ全体の描画が遅くなりにくい
document.write が動作しないページでも Google Adsense が表示できる
複数の広告ファイルを切り替える手間が軽減される……かも
少なくとも読み込むファイル上では、一切コード変更していない、と言い張れる

デメリット──

複数のファイルに分けるのが面倒と言えば面倒
Google ﾀｿ（など）に許可取ったわけではないので、最悪ボッシュート
<object> タグが対応していないブラウザでは表示できない（IE6 やモダンブラウザは大丈夫）

Via:

元ネタは CEFA::Blog – Google AdSenseをapplication/xhtml+xmlの環境で表示する（何故かウチの Firefox では開かない）で紹介されている方法ほぼそのままです。

Google Adsense は JavaScript の document.write を使って広告を描画しています。そして、Content-Type が application/xhtml+xml のページではそもそも document.write 自体が動作しません。つまり、Google Adsense の広告が表示できないわけです。それを解決する方法として、<object> タグで呼び出す方法が考案された、という過程があるそうです。

覚え書き@kazuhi.to: アフィリエイトの検討
- この方法だとGoogle的にも問題は無いらしいです。
- と書いてありますが、Google に問い合わせたわけでは無さそう……
Keystone Websites: Making AdSense work with XHTML
- こちらがネタ元のページですね

まとめ

上記の方法を導入後、Google Adsense の統計情報を見ると、広告の表示もクリックも正常にカウントされていました。しかし、実際に Google ﾀｿがこれを認めてくれるのかは、まったくの未知数。自分が広告収入を得られるか、結果をこうご期待！

なにしろ、この方法を実践しているところが少ない！ので、人柱覚悟でこのまま続けてみます。

──あ、最後に大事なことを。いまのペースで行くと、Google Adsense の収益額が 100$（最低支払い金額）に達するまで、軽く あと 5 年はかかります。てへっ。ということで、広告収入が支払われるかどうかは、Google Adsense 以外でレポートすることになりますね……。