作成日:  (更新日: )

Cookie Consent の例

このページは、Cookie Consent (Cookie の同意を求めるスクリプト) の例をまとめたページです。

  • 記載時点の Cookie Consent のバージョンは 3.1.0 です。
  • WordPress のプラグインではなく、JavaScript ライブラリの例になります。

単純な例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
    window.cookieconsent.initialise({ // cookie consent 設定
        "palette": {
            "popup": {
                "background": "#f0f0f0" // ポップアップの背景色
            },
            "button": {
                "background": "#f1d600" // ボタンの背景色
            }
        }
    });
});
</script>
<title>Document</title>
</head>
<body>
    ...
</body>
</html>

ブラウザの言語設定が日本語のユーザーのみメッセージを変更する例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
    var config = { // cookie consent 設定
        "palette": {
            "popup": {
                "background": "#f0f0f0"
            },
            "button": {
                "background": "#f1d600"
            }
        }
    };
    var lang = navigator.language || navigator.userLanguage || navigator.browserLanguage; // 言語設定

    if (lang == "ja" || lang == "ja-JP") {
        config.content = { // 日本語の場合のテキスト
            "message": "当サイトではクッキーを利用しています。", // メッセージテキスト
            "dismiss": "了解", // ボタンテキスト
            "link": "詳しく見る", // リンクテキスト
            "href": "https://example.com" // プライバシーポリシーなどへのリンクURL
        };
    }
    window.cookieconsent.initialise(config);
});
</script>
<title>Document</title>
</head>
<body>
    ...
</body>
</html>

ユーザーのIPアドレスをもとに、Cookie の同意の法律がある国のみメッセージを表示する例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
    window.cookieconsent.initialise({ // cookie consent 設定
        "palette": {
            "popup": {
                "background": "#f0f0f0"
            },
            "button": {
                "background": "#f1d600"
            }
        },
        "location": true // IPアドレスをもとに地域を推測
    });
});
</script>
<title>Document</title>
</head>
<body>
    ...
</body>
</html>
  • ライブラリ内部で https://ipinfo.io/ へ Ajax 通信を行っているため、Ajax 通信が有効に行える環境で確認する必要があります。(file:/// 等では確認できません)
  • ipinfo.io は 1000リクエスト/日 かつ非商用のみ無償で使用できます。条件に合わない場合は有償のライセンス契約が必要です。

参考