はじめに

最近のサイトでよく見かける「このサイトでは 〜 Cookie を利用します」という表示を、osano/cookieconsent を用いて簡単に実現する方法について調べた。

TL;DR

  • osano/cookieconsent で簡単に表示を追加可能
  • 公式ページ で簡単に見た目を変更可能
  • オプションが豊富なため、細かいカスタマイズもできる
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 簡単な利用方法
    2. 表示をカスタマイズする
    3. プライバシーポリシーへのリンク
    4. イベントハンドリング
    5. 表示クローズ後の挙動
      1. type: “info”
      2. type: “opt-in”, “opt-out”
    6. cookie 関連
      1. cookie.name オプション
      2. cookie.expiryDays オプション
  5. まとめ
  6. 参考文献

環境・条件

  • cookieconsent v3.1.1 (CDN)

詳細

GDPR対策のためにCookie利用の同意を得る方法 - 清水誠メモ によると色々なツールがあるようだが、この記事では osano/cookieconsent について整理した。

簡単な利用方法

CDN から script と css を読み込んで使うのが一番簡単。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" type="text/css">
<script>
document.addEventListener('DOMContentLoaded', () => {
  const cc = window.cookieconsent;
  cc.initialise({
    "palette": {
      "popup": {
        "background": "#000"
      },
    },
  });
})
</script>

上記コードで、以下の表示がページ下部に表示される。

表示をカスタマイズする

Download Cookie Consent | Osano で「Start Coding」をクリックすると、実際の表示イメージを見ながらカスタマイズができる。

type: "opt-in" や type: "opt-out" を選んだ時の「Allow cookies」ボタンの表示カスタマイズは content: { allow: "xxxx" } で行う。(なぜかウェブ上には項目が存在しない)

プライバシーポリシーへのリンク

content.link と content.href オプションを指定することで、プライバシーポリシーなどへのリンクも設定できる。

1
2
3
4
5
6
7
8
const cc = window.cookieconsent;
cc.initialise({
  // 略
  content: {
    link: "詳細",
    href: "/privacy",
  },
});

イベントハンドリング

(v3.x 系だと)以下のイベントがあるので、ユーザー操作などに応じて個別の処理を実装可能。

1
2
3
4
5
6
7
8
9
const cc = window.cookieconsent;
cc.initialise({
  // 略
  onInitialise: function (status) {},
  onPopupOpen: function () {},
  onPopupClose: function () {},
  onStatusChange: function (status, chosenBefore) {},
  onRevokeChoice: function () {},
});

表示クローズ後の挙動

type: “info”

デフォルトだと type: "info" となる。

「dismiss」を押して閉じると、Cookie に cookieconsent_status: dismiss が保存される。

以降、Cookie の削除や期限切れまでは表示がされなくなる。

なお Cookie の有効期限デフォルト値は 1年間となっている。

type: “opt-in”, “opt-out”

以下のように type: "opt-in" や type: "opt-out" を選択した場合、「Decline」(許可しない)、「Allow cookies」(許可する)の 2つのボタンが表示されるようになる。

1
2
3
4
5
const cc = window.cookieconsent;
cc.initialise({
  // 略
  type: "opt-in",
});

「Decline」を選択すると、Cookie に cookieconsent_status: deny が保存される。

「Allow cookies」を選択すると、Cookie に cookieconsent_status: allow が保存される。

どちらも Cookie の有効期限は 1年間で、以降は Cookie の削除や期限切れまでは表示がされなくなる。

「同意を得られるまで Google Analytics などを動かさない」などの場合は、type: "opt-xxx" で、onPopupClose や onStatusChange を使って頑張れば良い(はず)。

使っているツールは違うが、詳細は GDPR対策のためにCookie利用の同意を得る方法 - 清水誠メモ にかかれている。

表示クローズ時に保存される Cookie 名称を変更できる。

デフォルトは cookieconsent_status だが、cookie.name を設定することで変更できる。

下記の例だと myCookieName: allow のような形で保存される。

1
2
3
4
5
6
7
const cc = window.cookieconsent;
cc.initialise({
  // 略
  cookie: {
    name, 'myCookieName',
  }
});

cookieconsent_status の有効期限はデフォルト 1年だが、cookie.expiryDays を設定することで変更できる。

有効期限を 1日にしたい場合は、下記のように設定する。

1
2
3
4
5
6
7
const cc = window.cookieconsent;
cc.initialise({
  // 略
  cookie: {
    expiryDays: 1,
  }
});

まとめ

  • osano/cookieconsent で簡単に表示を追加可能
  • 公式ページ で簡単に見た目を変更可能
  • オプションが豊富なため、細かいカスタマイズもできる

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list