【jQuery/クッキー】初回読み込み(アクセス)時のみ実行する方法

「新規ユーザーかリピーターかによって別の動きをさせたい！」

jQueryとクッキーを使って初回読み込み（アクセス）か2回目以降かを判定し、それぞれの条件で実行する方法を紹介します。

javascriptで実行する方法もありますが、今回はよりカンタンなjQueryで実行する方法を初回します。

初回読み込み時のみ実行

初回かどうかはクッキーを使って判定します。クッキーはブラウザに記憶させることができるものです。

クッキーをもっていなければ初回と判定しつつクッキーをもたせます。

クッキーをもっていれば2回目以降と判定できます。

まずhtmlに下記を記述します。後述するjQueryより先に記述しましょう。

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

一行目はjQueryを利用するためのコードです。

二行目はクッキーを利用するためのコードです。

下記jQueryが初回判定の動きです。

<script>
if ($.cookie('○○') != '××') {
    $(function() {
        /*初回実行内容をここに*/
        $.cookie('○○', '××' , { expires: 1 , path: '/' });
    });
};
</script>

まず、○○と××に任意の半角英数の名前をつけましょう。

「if ($.cookie('○○') != '××')」は「○○というクッキーの名前が××でなければ」という意味です。つまり「初回なら」という意味です。

「/*初回実行内容をここに*/」と書いている部分のコメントを消して初回実行内容をjQueryで指定しましょう。（具体例は後述）

2回目以降の実行については後述します。

「$.cookie('○○', '××')」で「○○というクッキーの名前に××をセット」します。これにより次は2回目以降と判定できます。

「expires: 1」はクッキーの保存期間、つまり「初回」の範囲です。単位は「日」です。

1を指定すると1日のうち初回か判定でき、365と指定すると1年のうち初回か判定できます。

これを指定しない場合、ブラウザを閉じるまでが期間となります。

「path: '/'」はクッキー適用範囲をサイト内すべてにするという意味です。つまり、サイト内の別ページに遷移しても「2回目以降」と判定されます。

これを指定しない場合、初回判定はページごととなります。そのページでリロードされたり戻ってきた場合は「2回目」ですが、別のページに遷移したときは「初回」と判定されます。

上記「expires」や「path」を指定しない、つまり消すときは「,」も気を付けましょう。複数指定するときは間に「,」が必要ですが、単一指定や最後の要素に「,」は不要となります。

expiresを指定しないとき

$.cookie('○○', '××' , { path: '/'});

pathを指定しないとき

$.cookie('○○', '××' , { expires: 1});

両方指定しないとき

$.cookie('○○', '××');

テストするとき

実行を確認したくてもリロードすると「2回目以降」となってしまいます。

初回実行を確認するには、逐一クッキー名を変えましょう。

【具体例】初回読み込み時　bodyにclassをつける

初回読み込み時にbodyにclass名をつけてみましょう。これによりあとはCSSだけで処理できるためjQueryに詳しくなくても動きをつけることができます。

<script>
if ($.cookie('cookie') != 'first') {
    $(function() {
        $("body").addClass("first");
        $.cookie('cookie', 'first' , { expires: 1 , path: '/' });
    });
};
</script>

「cookie」というクッキーに「first」という名前をつけました。

「$("body").addClass("first")」はbodyセレクタにfirstというclassを追加するという意味です。クッキー名とは関係ありません。

body以外のセレクタにも指定可能です。class名も変更可能です。

変更する場合は下記を参考にしてください。

クラス名がついたかどうかはDevToolsを使って確認しましょう。

2回目以降の実行

2回目以降のときjQueryを実行したい場合はelseを使いましょう。

<script>
if ($.cookie('○○') != '××') {
    $(function() {
        /*初回*/
        $.cookie('○○', '××' , { expires: 1 , path: '/' });
    });
} else{
    $(function() {
        /*2回目以降*/
    });
};
</script>

初回の処理がない場合でもクッキー名を指定する処理は必須です。

【まとめ】初回読み込み時のみ実行する方法

まず下記を読み込みjQueryとクッキーを使えるようにする

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

クッキーがあるかないかで初回を判定する

<script>
if ($.cookie('○○') != '××') {
    $(function() {
        /*初回実行内容をここに*/
        $.cookie('○○', '××' , { expires: 1 , path: '/' });
    });
};
</script>

2回目以降の実行をする場合は下記のようにelseを追加

<script>
if ($.cookie('○○') != '××') {
    $(function() {
        /*初回*/
        $.cookie('○○', '××' , { expires: 1 , path: '/' });
    });
} else{
    $(function() {
        /*2回目以降*/
    });
};
</script>

以上、jQueryとクッキーを使って初回読み込み（アクセス）時、または2回目以降かを判定し、実行する方法でした。