WEB制作、マーケティングに関する情報をお届けします。

ユーザーのさまざまなデータを保存するCookieですが最近では初回アクセス時にCookieの取得同意のポップアップなどで使用されます。
ユーザーの過去のアクセスを取得できるため処理を切り替えることができます。
『JavascriptとCookieで初回アクセス時と2回目以降のアクセスで処理を変更する方法』を紹介します。

コードの紹介

function checkFirstVisit() {
  const cookieName = "visited";
  if (document.cookie.split('; ').some(item => item.startsWith(`${cookieName}=`))) {
    // Cookieが存在する場合はここに初回アクセス時の処理を書く
    alert("以前アクセスしたことがありますね！");
  } else {
    // Cookieが存在しない場合はここに初回アクセス時の処理を書く
    alert("初回アクセスですね！");
    document.cookie = `${cookieName}=true; max-age=${60 * 60 * 24 * 365}; path=/`;
  }
}
document.addEventListener("DOMContentLoaded", checkFirstVisit);

コードの解説

処理を行うための関数を作成します。

function checkFirstVisit() {}

ユーザーの切り分けを行うためにCookieの名前をつけて、変数へ代入します。

const cookieName = "visited";

『document.cookie.split(‘; ‘).some』でセミコロンでユーザーのCookieを取得して、配列に変換します。
さきほど名前を代入した『cookieName』と合致するかどうかを比較して、合致した場合は『以前アクセスしたことがありますね！』のアラート、合致しない場合は『初回アクセスですね！』と処理を実行させます。

if (document.cookie.split('; ').some(item => item.startsWith(`${cookieName}=`))) {
  // Cookieが存在する場合、2回目以降のアクセス
  alert("以前アクセスしたことがありますね！");
} else {
  // Cookieが存在しない場合、初回アクセス
  alert("初回アクセスですね！");
  // Cookieを設定（有効期限は365日後に設定）
  document.cookie = `${cookieName}=true; max-age=${60 * 60 * 24 * 365}; path=/`;
}

最後に読み込みのタイミングを指定しています。

document.addEventListener("DOMContentLoaded", checkFirstVisit);

まとめ

以上、『JavascriptとCookieで初回アクセス時と2回目以降のアクセスで処理を変更する方法』でした。
数行程度で実装できるため手軽にユーザーのアクセス状況で処理を振り分けられるため活躍する場面も多いかと思います。
ぜひ、ご参考ください。