JSとCookieを使った新規ユーザーのみに表示するコンテンツで心を掴もう

サイト運営において
目標はそれぞれ異なると思いますが、そもそも目標を達成するためにはどうすればいいでしょうか。

LPOもそれなりに浸透してきましたが
新規ユーザーの心を掴めるかどうか（ユーザーの目的に合った情報を提示してあげること）
が重要になってくると思います。

注目を惹くための手段は色々とあると思いますが

• 新規ユーザーのみに提示するようなコンテンツを表示してあげる

というのもひとつの手段になります。
今回はJavaScriptとCookieを使って表示する情報をコントロールする方法を紹介します。
この方法はとても簡単に導入できるので覚えておいて損はないと思います。

まずは何もしていない状態のサンプルを見てください。
では次に新規ユーザーのみに提示するようなコンテンツを表示してあげるサンプルを見てください。

サンプルをもう一度見たい場合は
タイトルの下の 新規ユーザーに戻る リンクをクリックしてください。

一度表示されたらF5を押してページを更新してみてください。
こうするだけで印象が違いませんか？

やっていることは簡単で
Cookieを使って一度訪れたことがあるユーザーかどうかを判別して
そうでなければ（新規ユーザーなら）指定の要素を表示している、だけです。

導入方法

まずは、cookie.jsをダウンロードして読み込みます。

このcookie.jsはjQuery Cookieプラグインを
JavaScriptでcookieを操作する時はjquery.cookie.jsを使おう – 文殊堂
を参考にjQueryなしで使えるように書き換えたものです。

<script type="text/javascript" src="js/lib/cookie.js"></script>

今回は以下のような要素を新規ユーザーに表示することにします。

<div id="welcome">
  <p>ようこそ！はじめての方は以下のエントリーがおすすめです。</p>
  <p id="close">閉じる</p>
  <ul>
    <li><a href="http://5509.me/2009/04/16/using-wordpress-as-cms.html">CMSとしてのWordPressでサイト構築をするときに便利な13のプラグイン
    <img src="http://b.hatena.ne.jp/entry/image/http://5509.me/2009/04/16/using-wordpress-as-cms.html" /></a></li>
    <li><a href="http://5509.me/2008/08/22/realtimeformvalidation.html">リアルタイムフォームバリデーション jQuery.validation.js</a>
    <img src="http://b.hatena.ne.jp/entry/image/http://5509.me/2008/08/22/realtimeformvalidation.html" /></li>
    <li><a href="http://5509.me/2008/09/14/jqueryselectable.html">selectボックスをシンプルなプルダウンに拡張するjQuery.selectable.js
    <img src="http://b.hatena.ne.jp/entry/image/http://5509.me/2008/09/14/jqueryselectable.html" /></a></li>
  </ul>
</div>

まずはＣＳＳで↑の要素(p#welcome)を非表示にしておきます。

div#welcome {
  display: none;
}

次に、JSとCookieを使って新規ユーザーにのみ表示するスクリプトを加えます。
サンプルではHTMLのHEAD内に書いています。

window.onload = function(){
  // Cookieに値が保存されているか
  var visited = cookie("visited") ＆＆ cookie("visited")!=null ? false : true;

  // Cookieが空の場合（新規ユーザー）p#welcome を表示する
  if(visited){
    document.getElementById("welcome").style.display = "block";
    cookie("visited","visited"); // Cookieに値を保存して以降はリピーター扱いにする
  }
}

＆だけ半角に打ちなおしてください。。

JSがわからない人はそのまま貼って、
getElementById(“welcome”)のwelcome部分を表示したい要素のIDにすれば大丈夫です。

jQueryを使えば…

jQueryを使って表示方法を変えたサンプル

表示方法ちょっと変えるだけで印象も全然違いますね。
jQueryを使えば簡単にできますので、興味がある人は試してみてください

サンプルファイルのダウンロード

JSのみ

cookie.js(1KB) – オリジナルソース jQuery Cookieプラグイン

サンプルファイル

contents-for-new-visitors.zip