cookie判定
初回アクセス時のみモーダルを表示（※選択肢あり）
| 追加可能パーツ | 変更可能箇所 | 同一ページ に複数設置 |
ページ複製・ クリップボード使用可否 |
|---|---|---|---|
|
■モーダル
|
→JS制御のため、後から変更は不可です。 ■モーダル
|
× | ◯ |
| ※留意事項 | |||
|---|---|---|---|
|
※1：こちらのパーツは、JS編集が必要になります。詳細はこちら▼
|
デモ
挙動の確認を分かりやすくするためデモ用の確認ページを用意しています。
右記のように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 expires = 〇〇;】の値を変更してください。
（例①日数単位）：1日→【let expires = 1;】
（例②時間単位）：3時間→【let expires = 3 / 24;】 - デフォルトでCookieに保存しておく期間は10年（365 * 10）に設定しています。
無期限にはできないので期間を必ず設定してください。
注意点
- 「はい」ボタンのリンク先は「このページの一番上に遷移」を設定してください。
- 「いいえ」ボタンのリンク先はcookie判定モーダルを設置したページと別のページを設定してください。
※いいえボタンを押した時はcookie登録＆モーダル削除処理はされず遷移ページに飛ぶだけなので、遷移先ページにモーダルが設置されているとそのままモーダルが出しっぱなしになってしまいます。（「はい」ボタンを押した時にcookie登録＆モーダル削除処理がされる）なので、遷移先のページにはモーダル設置をしないようにお願いします。
カスタムCSS
2023-11-07更新
/*----- cookie判定用 START -----*/
/* 初期読み込み時に一瞬見えてしまう（チラつき）防止用クラス */
.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
2023-11-07更新
/*-- cookie判定用 編集画面用 START --*/
@include edit-page {
.row {
&.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 --*/
JavaScript
2024-04-30更新
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script>
'use strict';
/*--- jQueryコンフリクト回避 ---*/
jQuery.noConflict();
/*--- この下にJavaScriptを記述していく---*/
</script>
<script>
/* ---------------------------
cookie判定
--------------------------- */
jQuery(function () {
/*------------- 変数定義 【変更可能】 START -------------*/
/* cookieに保存しておく期間 【 365日間 * 10年 】 */
let expires02 = 365 * 10;
/*------------- 変数定義 【変更可能】 END -------------*/
/* -------------- 変数定義 (変更不可) -------------- */
/* cookieに保存するデータのkey名 */
let foKey = "CookieConsentChecked";
/* cookieに保存するデータのvalue名 */
let foValue = "true";
/* htmlタグを取得 */
const html = jQuery("html");
/* 認証ボタン（はい）の要素をjQueryで取得 */
const authBtn = jQuery(".js-cookie_check_btn_auth a");
/* 認証ボタンの要素をjQueryで取得 */
const authField = jQuery(".js-cookie_check_row");
/* 日付データを格納する変数 */
let date1, date2;
/* 現在の日付データを取得 */
date1 = new Date();
/* expires02日後の日付データを作成 */
date1.setTime(date1.getTime() + expires02 * 24 * 60 * 60 * 1000);
date2 = date1.toGMTString();
/* Key=value の形で格納 */
let foData = `${foKey}=${foValue}; expires02=${date2}; path=/`;
/* Cookieに保存するデータ */
/* -------- Cookie情報登録後の処理 -------- */
function registration() {
console.log("Cookieが登録されました");
}
/* -------- 認証完了後の処理 -------- */
function authenticated() {
console.log("認証できました");
}
/* -------- 認証できなかったときの処理 -------- */
function unauthenticated() {
console.log("認証できませんでした");
/* モーダルの要素（authField）があったら実行 */
if (authField.length) {
authField.removeClass("js-displayNone");
/* htmlタグにクラスを付与 */
html.addClass("js-overflowHidden");
}
}
/* -------------------------------- Cookie登録 ----------------------------------- */
authBtn.on("click", function (event) {
/* イベントを無効化 */
event.preventDefault();
/* cookieにデータを追加 */
document.cookie = foData;
registration();
authField.css('display','none');
html.removeClass("js-overflowHidden");
});
/* -------------------------------- Cookie認証 ----------------------------------- */
let cookie = document.cookie.split(";");
let boolArr = [];
/* 判定用配列 */
/* Cookieにデータが保存されているかチェック */
for (let i = 0; i < cookie.length; i++) {
if (cookie[i].match(foKey)) {
let value = cookie[i].replace(`${foKey}=`, "").replace(/\s+/g, "");
if (value == foValue) {
boolArr.push(1);
} else {
boolArr.push(0);
}
} else {
boolArr.push(0);
}
}
/* 認証結果によって処理を分ける */
if (boolArr.some((e) => e === 1)) {
authenticated();
} else {
unauthenticated();
authField.removeClass("js-displayNone");
}
});
/* ---------------------------
cookie判定 END
--------------------------- */
</script>
© Basic Inc. All Rights Reserved.