HOME の中の
レポート の中の
jQuery の中の
[jQuery]本格LPOを手軽に実践 – jLPO地域/検索ワード/新規・リピーター等でコンテンツを切り替えるjQueryプラグイン

レポート

[jQuery]本格LPOを手軽に実践 – jLPO地域/検索ワード/新規・リピーター等でコンテンツを切り替えるjQueryプラグイン

Sep. 27, 2010

このエントリをはてなブックマークに追加
[jQuery]本格LPOを手軽に実践 – jLPO 地域/検索ワード/新規・リピーター等でコンテンツを切り替えるjQueryプラグイン

LPO(Landing Page Optimization)とは

Webサイトの中でユーザーが最初に開くページ(ランディングページ)を、アクセスしてきた条件により変化させることで、ユーザーを到達させたいページ・アクションへ導く手法のことです。

ページに訪れた際の検索キーワードや、広告を掲載していたページ(参照元URL)などにより振り分けるのが一般的ですが、ユーザーの地域・新規訪問かリピーターか・最終アクセスからの経過時間・アクセスした曜日・時間帯などによりターゲットを絞り込むことも、狙いによっては効果的です。

jLPOでできること

上で挙げたターゲティング表示機能のすべてが、jQueryのプラグインとしてLPOツールが簡単かつ無料で利用できます。高コストだった地域による絞込みも、GoogleAPIの利用で実現しました。(対応する地域の精度はGoogleAPIの機能に依存します。)

適用箇所・置換え内容のファイル・ターゲティング条件を設定し、ヒットした場合、適用箇所の内容を指定したファイルのHTMLデータに置き換えることができます。

設置方法サンプル

基本的な使い方

必要なライブラリを読み込み、下記のスクリプトを記述してください。

<script type="text/javascript" src="http://www.google.com/uds/api?file=uds.js&v=1.0"></script><!-- 「地域」を利用する場合のみ -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jLPO.js"></script>
<script type="text/javascript">

jLPO.add( '#適用箇所のID', '置換ファイルのパス', {
    // ターゲティング条件を記述
});

</script>
適用箇所のID 「#~~」に適用するHTML要素のidを記述してください。
置換ファイルのパス 条件が一致した場合に置き換えるHTMLデータをファイルに記述し、ファイルのパスを記述してください。
ターゲティング条件 下記の各条件の例を参考に記述してください。
条件:新規ユーザー or リピーター

ページを始めて訪れたユーザーか、以前訪れたことがあるユーザーかで表示を変更する場合、下記の条件を記述してください。

リピーターの場合のみヒット
デフォルト表示:はじめまして。(新規ユーザーの方へ)
<script type="text/javascript">

jLPO.add( '#sample_1', 'example_visited.html', {
    visited: true
});

</script>

※訪問したことがある(リピーター)=true、新規ユーザー=false

条件:前回訪問してからの経過時間

前回訪問してから一定時間が経過しているユーザーだけ表示を変更する場合、下記の条件を記述してください。

30分以上前にアクセスした場合のみヒット
デフォルト表示:新規・または30分以内に訪問されたばかりです。
<script type="text/javascript">

jLPO.add( '#sample_2', 'example_last.html', {
    last: 30 // 分以上前
});

</script>
条件:検索キーワード

Yahoo・Google・MSN(Bing)から特定のキーワードで検索して訪れたユーザーだけ表示を変更する場合、下記の条件を記述してください。

「無料 LPO」または「jLPO」で検索してアクセスした場合のみヒット
デフォルト表示:キーワードにヒットしていません。
<script type="text/javascript">

jLPO.add( '#sample_3', 'example_keyword.html', {
    keyword: '無料 LPO, 無料 lpo, jLPO, jlpo, JLPO'
});

</script>

※指定したキーワードは部分一致でヒットします。

※「(スペース)」区切りで複数のキーワードが同時に入力された場合、「,(コンマ)」区切りでいずれかのキーワードにヒットした場合を指定できます。

条件:参照元URL

特定のサイトやページから訪れたユーザーだけ表示を変更する場合、下記の条件を記述してください。

Googleのドメインからアクセスした場合のみヒット
デフォルト表示:その他のページからようこそ。
<script type="text/javascript">

jLPO.add( '#sample_4', 'example_referrer.html', {
    referrer: 'http://*google.co.jp/*,http://*google.com/*'
});

</script>

※「*(ワイルドカード)」が使用できます。

※「,(コンマ)」区切りでいずれかのURLにヒットした場合を指定できます。

条件:URLパラメータ(広告出稿など)

AdSenseやスポンサードサーチなどに広告を出稿した際、リンクするURLの最後に任意の引数(?xxx=yyyy)をつけておくと、その広告から訪れたユーザーだけ表示を変更することができます。その場合、リンク先のページでは下記の条件を記述してください。

URLに「?ads=201010」がついている場合のみヒット
デフォルト表示:引数が設定されていません。
<script type="text/javascript">

jLPO.add( '#sample_5', 'example_param.html', {
    param: 'ads=201010'
});

</script>

※「&(アンド)」区切りで複数の引数を指定できます。

※こちらのリンクからお試しください。http://www.jeia.co.jp/report/2010/09/27/238/?ads=201010

条件:時間帯

特定の時間帯に訪れたユーザーだけ表示を変更する場合、下記の条件を記述してください。

10:00~19:00にアクセスした場合のみヒット
デフォルト表示:閉店しています。
<script type="text/javascript">

jLPO.add( '#sample_6', 'example_time.html', {
    startTime: '10:00',
    endTime: '19:00'
});

</script>

startTime・endTimeのいずれかだけを指定した場合、0時まで・0時からの指定となります。

条件:期間

特定の日時から日時の間に訪れたユーザーだけ表示を変更する場合、下記の条件を記述してください。

9/30~10/31にアクセスした場合のみヒット
デフォルト表示:サービスをお楽しみに。
<script type="text/javascript">

jLPO.add( '#sample_7', 'example_date.html', {
    startDate: '2010/09/30 00:00',
    endDate: '2010/10/31 12:00'
});

</script>
条件:曜日

特定の曜日に訪れたユーザーだけ表示を変更する場合、下記の条件を記述してください。

土日にアクセスした場合のみヒット
デフォルト表示:今日は平日です。
<script type="text/javascript">

jLPO.add( '#sample_8', 'example_weekday.html', {
    weekday: 'Sat,Sun'
});

</script>

※曜日の表記は、「Sun」「Mon」「Tue」「Wed」「Thu」「Fri」「Sat」です。

条件:地域

特定の地域からアクセスしてきたユーザーだけ表示を変更する場合、下記の条件を記述してください。

近畿からのアクセスの場合のみヒット
デフォルト表示:ようこそ、みなさま。
<script type="text/javascript">

jLPO.add( '#sample_9', 'example_area.html', {
    area: '大阪府,京都府,奈良県,兵庫県,和歌山県,三重県,滋賀県'
});

</script>

※「国名(Japan)」「都道府県」「市」が指定できます。「~県」「~市」まで記述してください。

※地域特定の精度は、GoogleAPIの機能に依存します。

複数の条件を指定

複数の条件にヒットするユーザーに絞り込みたい場合、下記のように条件を「,(カンマ)」で区切って記述してください。

関西から平日にアクセスしたリピーターの場合のみヒット
デフォルト表示:ようこそ、みなさま。
<script type="text/javascript">

jLPO.add( '#sample_10', 'example_mix.html', {
    visited: true,
    day: 'Mon,Tue,Wed,Thu,Fri',
    area: '大阪府,京都府,奈良県,三田市,神戸市'
});

</script>

jLPO.add()はページ内で複数回使用できますので、ページの複数箇所にLPOを適用することが可能です。また、同一のidに複数回jLPO.add()を適用している場合、後で設定した条件の方が優先されます。

動作環境

InternetExplorer6~8,Firefox3.5~,Safari5~,Chrome3~で動作確認しています。
jQueryは1.2、1.3、1.4系に対応しています。

ライセンスについて

LGPLライセンスの定義に基づき、無料でご利用いただけます。

※個人利用・商用利用を問わず自由に改変してご利用いただけますが、ライセンスをご理解いただき、自己責任の上でご使用ください。

ダウンロード

お知らせ

jLPOをより活用していただくため、条件設定の管理画面・ヒット解析・A/Bテスト・自動学習などの機能を加えた高機能パッケージ『Wasshoy LPO』を近日リリース予定です。

jLPOの機能に関するご要望・ご質問・カスタマイズのご依頼は、日本電子工藝社までお問合わせください。

日本電子工藝社の特徴を知る。
日本電子工藝社とは?
お知らせを見る。
日本電子工藝社からのニュース・イベントを配信しています。
利用規約
www.jeia.co.jpのサイトにおけるご利用規約をご説明しています。
BLOGを見る。
Twitterと連動した「つぶやき型ブログ」を配信していいます。