cookie判定
初回アクセス時のみモーダルを表示（※選択肢あり）
| 追加可能パーツ | 変更可能箇所 | 同一ページ に複数設置 |
ページ複製・ クリップボード使用可否 |
|---|---|---|---|
|
■モーダル
|
■モーダル
JS変更箇所
|
× | ◯ ※1 |
| ※留意事項 | |||
|---|---|---|---|
|
※1：一度バナーを閉じた場合、他ページでcookieのJSとバナーを入れていたとしても、【cookieに保存しておく期間】中は 【JS】 |
cookie判定のデモサイト
挙動の確認を分かりやすくするためデモ用の確認ページを用意しています。
右記のようにcookieの挙動が下記ボタンより確認できます。
構造図
デモのパーツの構造を説明しています。
補足：row（行）の背景がモーダル表示時の後ろの白背景にあたります。
設定方法
- CSSをカスタムCSSに記述。
- 編集画面用CSSをカスタムCSSに記述。
- JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
-
クラス名を見本とあわせる。
- モーダル表示用の行（row）を共通パーツにて作成し、
クラス名「cookie_check_row js-cookie_check_row js-displayNone」の3つを追加。
ページ下部に設置する。（複数ページに表示する場合は共通フッターに設置） - 共通パーツ内に、選択用（はい・いいえ）のボタンパーツを2つ配置。
- 「はい」用のボタン①にクラス名「cookie_check_btn js-cookie_check_btn_auth」の2つを追加。
リンク先を[このページの一番上に遷移]に設定。 - 「いいえ」用のボタン②にクラス名「cookie_check_btn」を追加。リンク先を[任意のURL]に設定。
旧CMSの場合：必要に応じて、クラス名「btn_custom01」等を追加。 - スタイルはデザインイメージによって適宜変更してください。
※JSパーツ集では共通パーツ機能で作成しているため、内容によってはCSSの変更（sectionからの紐づけ）が必要です。
-
新CMSの場合：基本デザインパーツ（セクションパーツ、複合パーツ、単体パーツ）を使用して問題ありません。
rowは新規で作成した方がCSSの影響を受けないので安心かと思います。
JavaScript設定方法
- JS内で【Cookieに保存しておく期間】と検索。
- Cookieに保存しておく期間を変更する場合は変数【let expires02 = 〇〇;】の値を変更してください。
（例①日数単位）：1日→【let expires02 = 1;】
（例②時間単位）：3時間→【let expires02 = 3 / 24;】
（例③年単位）：10年→【let expires02 = 365 * 10;】 - デフォルトでCookieに保存しておく期間は30日（30）に設定しています。
無期限にはできないので期間を必ず設定してください。
注意点
- 「はい」ボタンのリンク先は「このページの一番上に遷移」を設定してください。
- 「いいえ」ボタンのリンク先はcookie判定モーダルを設置したページと別のページを設定してください。
※いいえボタンを押した時はcookie登録＆モーダル削除処理はされず遷移ページに飛ぶだけなので、遷移先ページにモーダルが設置されているとそのままモーダルが出しっぱなしになってしまいます。（「はい」ボタンを押した時にcookie登録＆モーダル削除処理がされる）なので、遷移先のページにはモーダル設置をしないようにお願いします。
JS・CSS・編集画面用CSS
- JS
- CSS
- 編集画面用CSS
2025-10-17更新（v1.0.1）
<script>
/* ---------------------------
cookie判定 v1.0.1
--------------------------- */
document.addEventListener('DOMContentLoaded', function () {
/*------------- 変数定義 【変更可能】 START -------------*/
const expiresDays = 30;
/*------------- 変数定義 【変更可能】 END -------------*/
/* -------------- 変数定義（変更不可） -------------- */
const cookieKey = "CookieConsentChecked";
const cookieValue = "true";
const html = document.documentElement;
const authBtn = document.querySelector(".js-cookie_check_btn_auth a");
const authField = document.querySelector(".js-cookie_check_row");
/* 日付作成とCookie文字列生成 */
const expireDate = new Date();
expireDate.setTime(expireDate.getTime() + expiresDays * 24 * 60 * 60 * 1000);
const cookieString = `${cookieKey}=${cookieValue}; expires=${expireDate.toGMTString()}; path=/`;
/* Cookie登録処理 */
function registration() {
console.log("Cookieが登録されました");
}
/* 認証成功処理 */
function authenticated() {
console.log("認証できました");
}
/* 認証失敗処理 */
function unauthenticated() {
console.log("認証できませんでした");
if (authField) {
authField.classList.remove("js-displayNone");
html.classList.add("js-overflowHidden");
}
}
/* 認証ボタンクリック時の処理 */
if (authBtn) {
authBtn.addEventListener("click", function (event) {
event.preventDefault();
document.cookie = cookieString;
registration();
if (authField) {
authField.style.display = "none";
}
html.classList.remove("js-overflowHidden");
});
}
/* Cookieをチェックして認証処理 */
function checkCookie() {
const cookies = document.cookie.split(";");
let isAuthenticated = false;
cookies.forEach(c => {
const [key, value] = c.trim().split("=");
if (key === cookieKey && value === cookieValue) {
isAuthenticated = true;
}
});
if (isAuthenticated) {
authenticated();
} else {
unauthenticated();
}
}
checkCookie();
});
/* ---------------------------
cookie判定 END
--------------------------- */
</script>
CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。
2023-11-07更新（v1.0.0）
/*----- cookie判定用 START v1.0.0-----*/
/* 初期読み込み時に一瞬見えてしまう（チラつき）防止用クラス */
.js-displayNone {
display: none !important;
}
// モーダルが出ている間はスクロールバー非表示
.js-overflowHidden {
overflow: hidden !important;
}
.row {
&.cookie_check_row {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 10000;
top: 50%;
left: 50%;
width: 100%;
height: 110vh;
background: #fff;
transform: translate(-50%, -50%);
.col {
width: 100%;
max-width: 850px;
padding: 20px;
.component {
&.cta {
.cta-row {
& + .cta-row {
margin-top: 20px !important;
}
.cta-column {
.component {
.button {
&.cookie_check_btn {
.button-cont {
a {
width: 100% !important;
min-width: initial !important;
max-width: 340px !important;
}
}
}
}
}
}
}
}
}
}
}
}
/*----- cookie判定用 END -----*/
編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。
2023-11-07更新（v1.0.0）
/*-- cookie判定用 編集画面用 START v1.0.0--*/
&.cookie_check_row {
display: flex !important;
position: relative;
top: initial;
left: initial;
transform: initial;
width: 100%;
height: initial;
margin-top: 50px;
border: 1px solid red;
&::before {
content: "cookie判定用Row";
position: absolute;
color: #fff;
background: red;
padding: 5px;
font-size: 16px;
right: 0;
top: -24px;
}
}
/*-- cookie判定用 編集画面用 END --*/
© Basic Inc. All Rights Reserved.