【JavaScript】Cookieを使ってGDPR対応

2024年08月13日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

GDPR対応というのをご存知でしょうか。
WEBサイトにアクセスした際、ページ下部もしくはページ上部に表示される、
閲覧しているWEBサイトがクッキーを使用してユーザーの情報を取得していることに対する情報開示、もしくは同意を促すものです。

現在（2024年8月時点）日本では、法整備はされておらず対応は必須ではないですが、
ヨーロッパでは、Cookieを使用してユーザーの情報を取得しているなら、
あらゆるサイトが対応必須になっています。

今後、ほとんどの確率で日本でも法整備が進み、GDPR対応が必須になるのではないかと言われており、企業のコーポレートサイト、特に海外展開している企業などが実装をしています。

当サイトは、もちろんGoogleアナリティクスなどのWeb解析ツールを使っているので、GDPR対応しております。
ただ今回ご紹介するのは、法整備が進んでいない日本の場合の対応なので、ユーザー情報の取得を完全に行わない機能は入っていません。

もし、ユーザー側が取得される情報を選択できるような機能を実装したい場合は、
「OneTrust」などの外部サービスの利用をおすすめします。

ちなみにスクラッチでCookie操作機能を実装するのは、おすすめしません。
できる限り、外部サービスを使用しましょう。
そのほうが安全です。

HTML例

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>

今回は「js-cookie」というクッキー操作ライブラリを使用します。
上記をjsファイルの手前に記述してください。

CSS例

.c-cookie__box {
  box-sizing: border-box;
  display: flex;
  z-index: 1000;
  position: fixed;
  bottom: 0;
  left: 0;
  justify-content: center;
  width: 100%;
  padding: 20px 40px;
  background: rgba(0, 0, 0, 0.8);
}
.c-cookie__box .c-container.en {
  display: none;
}
.c-cookie__box .c-container {
  display: flex;
  align-items: center;
}
.c-cookie__text {
  width: 75%;
  margin: 0 60px 0 0;
  color: #fff;
  font-size: 13px;
  line-height: 1.75;
}
.c-cookie__btn {
  display: flex;
}
.c-cookie__btn--consent a,
.c-cookie__btn--detail a {
  display: block;
  padding: 10px;
  background-color: #ababab;
  color: #fff;
  font-size: 13px;
  transition: 0.4s ease;
}
.c-cookie__btn--consent a:hover,
.c-cookie__btn--detail a:hover {
  opacity: 0.7;
}
.c-cookie__btn--consent {
  margin: 0 25px 0 0;
}
.c-cookie__btn--consent a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 145px;
  height: 48px;
  background-color: #fff;
  color: #323030;
  text-decoration: none;
}
.c-cookie__btn--detail a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 145px;
  height: 48px;
  border: 1px solid #fff;
  background-color: transparent;
  color: #fff;
  text-decoration: none;
}

JavaScript例

if (Cookies.get('cookieBox') !== 'on') {
  document.body.insertAdjacentHTML('beforeend', `
  <div class="c-cookie__box">
      <div class="c-container">
        <div class="c-cookie__text">
          <p>当ウェブサイトでは、お客様により良いサービスを提供するため、クッキーを利用しています。<br>
          クッキーの使用に同意いただける場合は「同意」ボタンをクリックし、クッキーに関する情報や設定については「詳細を見る」ボタンをクリックしてください。</p>
        </div>
        <div class="c-cookie__btn">
          <div class="c-cookie__btn--consent">
            <a href="javascript:void(0);" class="js-cookie">同意する</a>
          </div>
          <div class="c-cookie__btn--detail">
            <a href="/privacy/">詳細を見る</a>
          </div>
        </div>
      </div>
    </div>
  `);
}
document.addEventListener('click', function(event) {
  if (event.target.classList.contains('js-cookie')) {
    document.querySelector('.c-cookie__box').style.display = 'none';
    Cookies.set('cookieBox', 'on', { expires: 30, path: '/' });
  }
});

非表示の期間は30日間に設定してあります。