外部サイトから流入した時だけ広告を表示する（静的HTML + JavaScript）


検索エンジンなど外部サイトからの訪問の時だけ広告を表示させる方法。

私が運営している「すぐ使えるCGI」サイトは、お客様のためにCGI設置やWeb制作のための技術情報を掲載している。当然、検索エンジンなどから一般情報としてそういった技術情報を探している訪問者がやってくる。

それはそれでお役に立てて幸甚ですという話なのだが、製品を購入して下さるユーザより圧倒的に多数の直帰訪問者がやってくると複雑な心境になる。

ということで、参照元（referer）を判別して、外部サイトから流入した訪問者には1ページ目には広告を表示するという設定をした。

このような設定は動的生成のページでは全く簡単なのだが、技術情報ページは一旦書くと更新が少ない事から、一定期間ごとに静的書き出ししてしまっている。このため、静的ページ内に設定した JavaScript で制御した。

1. 広告だけを掲載したページを作る

まず、広告のHTMLコードだけを含むHTMLページを作成する。この時、広告のコード全体を固定のID属性「id=”adblock”」で囲う。

例： ad.html

<html>
<body>
<!– DTDだとかタグの記載はまずまずちゃんとやる –>
<div id=”adblock”>
広告内容
</div>
</body>
</html>

2. 空のページを作成する

次に、広告を表示しない時のコンテンツとなる、空のHTMLページも作成する。

例： null.html

<html>
<body>
</body>
</html>

１、２で作ったページの表示を、参照元によって切り替えるというのが、方法の概要。

3. 表示するページの編集

広告を表示するコンテンツページに以下の要素を埋め込む。

a. 広告表示の場所に<div>

<div id=”adareatop”></div>

b. 広告のネタ（上で作成した1か2）をロードするための<iframe>とそれを切り替えるためのJavaScript

<iframe id=”adtop” style=”width: 1px; height: 1px” onload=”showad(this, ‘adareatop’)”></iframe>
<script type=”text/javascript”>
var RegexpHostname = new RegExp(“https?://[^/]*/”, “i”);
var From = document.referrer;
var MyHost = document.location.href.match(RegexpHostname);
var FromHost = From.match(RegexpHostname);
var AdpageTop = “ad.html”;
if (!From || ”+MyHost === ”+FromHost){ //参照元がないか、ホスト名が同じ
AdpageTop = “null.html”;
}
document.getElementById(“adtop”).src = AdpageTop;
</script>

これは、ページ末尾に追加する。
ページのロードは全て JavaScript で行ってもよいのだが、習慣的な理由もあり今回は1ピクセル四方の<iframe> の src を切り替える事で読み込み。

c. 読み込まれたファイルを広告表示の場所に挿入するための JavaScript

ここで定義する関数 showad は、b の <iframe> の中身のロードが完了した時に onload で呼ばれる。

<script type=”text/javascript”>
function showad(myFrame, targetId){
var AdPart = myFrame.contentWindow.document.getElementById(‘adblock’); //広告ページに設定したID
myFrame.style.display = ‘none’; //1×1ピクセルの表示も消す。はじめから消すとうまくかないブラウザがある。
if (AdPart){
AdPart.id = AdPart.id+”_”+myFrame.id;
document.getElementById(targetId).appendChild(AdPart);
}
}
</script>

これを設定したページ例

http://sugutsukaeru.jp/support/3/
このサイトからアクセスした時だけ「AD」が表示され、サイト内を1回別のページに移動してから何かのリンクをたどって戻れば同じページでも広告は表示されない。

補足

もしかしたら、「ユーザが見れるものと検索エンジンが見れるものとが違う」とかでグーグル大先生の逆鱗に触れるかもしれません。しばらく運用してみて何かあったら（遭ったら？）追記します。