2013年9月20日金曜日

Bloggerでクッキーを使用して初回表示の判定を行う

JavaScript(JS)とクッキーを使用して、Bloggerで初回表示の判定をして表示分けをしてみました。

JSのライブラリとして jquery と jquery-cookie を使用しています。BloggerでJSのライブラリを使うためには、どこかのサイトにJSのライブラリを配置する必要がありますが、この2つを配置したCDNサービスが見つかったので、CDNサービスから呼び出すことにしました。

Bloggerの[テンプレート]-[HTMLの編集] からテンプレートを修正し、<head>にJSを記述。初回表示エリアに表示内容を記述します。

1.<head>部分にJSをロードするタグと追加のスクリプトを記述します。

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>
      <script>
        //<![CDATA[
         $(function(){
          var dom_class= 'div.non_repeater_display_area';
          var key = 'refer_count';
          var expire = 30; // day

          var cnt = $.cookie(key);
          console.log(cnt);
          if ( cnt == null ) {
            cnt = 0;
          } else {
            cnt = parseInt(cnt);
          }
          $.cookie(key, cnt + 1, { expires: expire } );

          if ( cnt == 0 ) {
            $(dom_class).each(function(){ $(this).css('display', 'block'); });
          }
        });
        //]]>
      </script>

2.次に、<body>の初回表示を行いたい場所に下記のようにブロックを追加して完了です。
      <div class="non_repeater_display_area" style="display: none;">
        初回表示の内容をここに記述
      </div>

0 件のコメント:

コメントを投稿