JavaScriptで超超簡易LPO その1

usow (2008年11月27日 16:33)

ちょ～ちょ～簡易的なLPO（ランディングページ最適化）をJavaScriptでやってみる。

ソース

function writeLpo() {
    // 検索キーワードにマッチした場合のリンク先
    var lpo = new Array();
    lpo['テスト'] = '<a href="#">テスト</a><br />';
    lpo['test']   = '<a href="#">test</a><br />';

    // 検索キーワード
    var str;

    // リファラ
    var ref = document.referrer;

    // 検索エンジン
    var yahoo  = ref.match(/^http:\/\/search\.yahoo\.co/);
    var google = ref.match(/^http:\/\/www\.google\.co/);

    // 検索エンジンからなら検索キーワード取得
    if (yahoo || google) {
        str = yahoo ? ref.replace(/.+[?|&]p=/, "") : ref.replace(/.+[?|&]q=/, "");
        str = str.replace(/&.*/, "");
        str = str.replace("%E3%80%80", "+");
        str = decodeURI(str);
        str = str.split("+");

        for (var s in str) {
            for (var l in lpo) {
                if (str[s].toLowerCase() == l) {
                    document.write(lpo[l]);
                }
            }
        }
    }
}

テスト

以下に「テスト」または「test」を入力して[実行]ボタンを2回押してください（1回ではリファラを取得できないので）。[実行]ボタンの横に、結果が表示されます。
※テストの為、JavaScriipt中の検索エンジンのURLを「roiro.com」と仮定してあります。

   

使い方

前述のソースの最初の「// 検索キーワードにマッチした場合のリンク先」以下をご自分のWEBサイトに合せて変更し、HTMLのhead要素内に<script type="text/javascript">ソース</script>で囲んで配置するか、ソースを配置した外部ファイルを読み込んでください。 

lpo['キーワード'] = '表示したいもの';

以下の様に設定すると、バナー画像を表示できます。 

lpo['キーワード'] = '<a href="リンク先"><img src="image.jpg" alt="" /></a>';

リファラから取得した検索キーワードは、小文字にして比較するので、半角英数の場合は小文字のみ設定すればOKです。平仮名、片仮名は別として扱われるので、それぞれ設定してください。
※JavaScriptはブラウザで実行されるので、設定数はほどほどにした方が良いです。

次に、HTMLの表示したい場所に、以下を設定してください。

<script type="text/javascript">writeLpo();</script>

その他

prototype.jsなどのライブラリを同時に使用していると、エラーになったり上手く動作しない場合があるようです。原因はよくわかりません。m(__)m。ライブラリと併用する場合は、ソースの最後の方の 

for (var l in lpo) {
    if (str[s].toLowerCase() == l) {
        document.write(lpo[l]);
    }
}
を 
for (var l in lpo) {
    try {
        if (str[s].toLowerCase() == l) {
            document.write(lpo[l]);
        }
    } catch(e) {}
}
に変更してください。

動作確認

Windows XP IE6.x, Firefox 3.0.4 のみです。ゴメンなさい。

用語

LPO（Landing Page Optimization／ランディングページ最適化）

検索エンジン、広告などを経由してやってきたユーザが最初に見るウェブページをランディングページと呼ぶ。そこからユーザが目的のページを探す場合、メニューやサイト内検索機能などが充実していない場合、ユーザは目的のページを探し出すことを諦めて他のサイトへと遷移してしまう行動が多く見られる。そのため、他のサイトへと遷移させないように、ランディングページから目的のページへと簡単に遷移出来るように最適化することを言う。
出典：Wikipedia   Wikipediaで続きを読む

カテゴリ: