Google Analytics の Cookie をユーザーが同意した場合だけ書き出す方法

GDPR（EU一般データ保護規則）では Cookie が個人関連情報とされ、他社に提供することで提供先での個人識別が可能になる場合には、本人の同意が必要という決まりがあります。

Google Analytics の Cookie を発行する前に、ユーザーの同意を得るように対応する案件を行ったので、備忘録として記録しておきます。

使用するサービス
Google Analytics の設定
Google Tag Manager の設定
Cookie Consent の設定
参考にしたサイト

使用するサービス

この記事で紹介する方法は、下記のサービスを組み合わせて使う場合の解説になります。

Google アナリティクス 4
Google Tag Manager
Cookie Consent v2.8.0

Google Analytics の設定

アカウントは作成済みとして、プロパティを追加するところからの手順です。

Google Analytics にログインして、「設定」（歯車アイコン）からアカウントを選択
プロパティを作成
プロパティの設定とビジネスの概要を選択して「作成」
データストリームの設定でプラットフォームは「ウェブ」を選択
ウェブサイトのドメインを入力して、ストリーム名は任意の名前を入力

完了画面に表示される「測定 ID」は、次のステップの Google Tag Manager の設定に使用します。

Google Tag Manager の設定

こちらもアカウントは作成済みとして、コンテナを追加するところからの手順です。

管理タブからコンテナを追加する。
「新しいタグ」から「タグの設定」で進めていき、「測定 ID」には Google アナリティクス 4 のストリームと同じものを入力する。
※その際「同意設定」をオンにしておいてください。

配信トリガーは「All Pages」を指定しました。
タグの名前にはデフォルトの「Google アナリティクス GA4 設定」という名前で保存しました。

以上で、Google Tag Manager の設定は完了です。

Cookie Consent の設定

同意管理プラットフォーム（Consent Management Platform）で調べると、Cookiebot など色々なサービスがありますが、今回は無料で運用できる Cookie Consent を採用しました。

Cookie Consent のダウンロード

公式サイト（https://github.com/orestbida/cookieconsent）より「cookieconsent.js」と「cookieconsent.css」をダウンロードし、任意のディレクトリに配置する。

Cookie Consent をカスタマイズする

公式サイトの 2. Installation & Usage ⇒ 3. Configure and run ⇒ As external script を参考にして、「cookieconsent-init.js」を作成・カスタマイズします。

// obtain plugin
var cc = initCookieConsent();

// run plugin with your configuration
cc.run({
    current_lang: 'ja',
    autoclear_cookies: true,                   // default: false
    page_scripts: true,                        // default: false

    // mode: 'opt-in'                          // default: 'opt-in'; value: 'opt-in' or 'opt-out'
    // delay: 0,                               // default: 0
    // auto_language: null                     // default: null; could also be 'browser' or 'document'
    // autorun: true,                          // default: true
    // force_consent: false,                   // default: false
    // hide_from_bots: false,                  // default: false
    // remove_cookie_tables: false             // default: false
    // cookie_name: 'cc_cookie',               // default: 'cc_cookie'
    // cookie_expiration: 182,                 // default: 182 (days)
    // cookie_necessary_only_expiration: 182   // default: disabled
    // cookie_domain: location.hostname,       // default: current domain
    // cookie_path: '/',                       // default: root
    // cookie_same_site: 'Lax',                // default: 'Lax'
    // use_rfc_cookie: false,                  // default: false
    // revision: 0,                            // default: 0

    onFirstAction: function(user_preferences, cookie){
        // callback triggered only once
    },

    onAccept: function (cookie) {
        if(cc.allowedCategory('analytics')){
            gtag('consent', 'update', {
                'analytics_storage': 'granted'
            });
        }
    },

    onChange: function (cookie, changed_preferences) {
        if (cc.allowedCategory('analytics')) {
            gtag('consent', 'update', {
                'analytics_storage': 'granted'
            });
        }
        else {
            gtag('consent', 'update', {
                'analytics_storage': 'denied'
            });
        }
    },

    languages: {
        'ja': {
            consent_modal: {
                title: 'Cookieについて',
                description: 'Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. <button type="button" data-cc="c-settings" class="cc-link">Let me choose</button>',
                primary_btn: {
                    text: 'Cookieを許可する',
                    role: 'accept_all'              // 'accept_selected' or 'accept_all'
                },
                secondary_btn: {
                    text: 'Cookieを拒否する',
                    role: 'accept_necessary'        // 'settings' or 'accept_necessary'
                }
            },
            settings_modal: {
                title: 'Cookieの設定',
                save_settings_btn: '設定を保存',
                accept_all_btn: 'すべて同意する',
                reject_all_btn: 'すべて拒否する',
                close_btn_label: 'Close',
                cookie_table_headers: [
                    {col1: 'Name'},
                    {col2: 'Domain'},
                    {col3: 'Expiration'},
                    {col4: 'Description'}
                ],
                blocks: [
                    {
                        title: 'Cookie usage 📢',
                        description: 'I use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a href="#" class="cc-link">privacy policy</a>.'
                    }, {
                        title: 'Strictly necessary cookies',
                        description: 'These cookies are essential for the proper functioning of my website. Without these cookies, the website would not work properly',
                        toggle: {
                            value: 'necessary',
                            enabled: true,
                            readonly: true          // cookie categories with readonly=true are all treated as "necessary cookies"
                        }
                    }, {
                        title: 'Performance and Analytics cookies',
                        description: 'These cookies allow the website to remember the choices you have made in the past',
                        toggle: {
                            value: 'analytics',     // your cookie category
                            enabled: false,
                            readonly: false
                        },
                        cookie_table: [             // list of all expected cookies
                            {
                                col1: '^_ga',       // match all cookies starting with "_ga"
                                col2: 'google.com',
                                col3: '2 years',
                                col4: 'description ...',
                                is_regex: true
                            },
                            {
                                col1: '_gid',
                                col2: 'google.com',
                                col3: '1 day',
                                col4: 'description ...',
                            }
                        ]
                    }, {
                        title: 'More information',
                        description: 'For any queries in relation to our policy on cookies and your choices, please <a class="cc-link" href="#yourcontactpage">contact us</a>.',
                    }
                ]
            }
        }
    }
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

// obtain plugin

var cc = initCookieConsent();

// run plugin with your configuration

cc.run({

current_lang: 'ja',

autoclear_cookies: true, // default: false

page_scripts: true, // default: false

// mode: 'opt-in' // default: 'opt-in'; value: 'opt-in' or 'opt-out'

// delay: 0, // default: 0

// auto_language: null // default: null; could also be 'browser' or 'document'

// autorun: true, // default: true

// force_consent: false, // default: false

// hide_from_bots: false, // default: false

// remove_cookie_tables: false // default: false

// cookie_name: 'cc_cookie', // default: 'cc_cookie'

// cookie_expiration: 182, // default: 182 (days)

// cookie_necessary_only_expiration: 182 // default: disabled

// cookie_domain: location.hostname, // default: current domain

// cookie_path: '/', // default: root

// cookie_same_site: 'Lax', // default: 'Lax'

// use_rfc_cookie: false, // default: false

// revision: 0, // default: 0

onFirstAction: function(user_preferences, cookie){

// callback triggered only once

onAccept: function (cookie) {

if(cc.allowedCategory('analytics')){

gtag('consent', 'update', {

'analytics_storage': 'granted'

});

}

onChange: function (cookie, changed_preferences) {

if (cc.allowedCategory('analytics')) {

gtag('consent', 'update', {

'analytics_storage': 'granted'

});

}

else {

gtag('consent', 'update', {

'analytics_storage': 'denied'

});

}

languages: {

'ja': {

consent_modal: {

title: 'Cookieについて',

description: 'Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. <button type="button" data-cc="c-settings" class="cc-link">Let me choose</button>',

primary_btn: {

text: 'Cookieを許可する',

role: 'accept_all' // 'accept_selected' or 'accept_all'

secondary_btn: {

text: 'Cookieを拒否する',

role: 'accept_necessary' // 'settings' or 'accept_necessary'

}

settings_modal: {

title: 'Cookieの設定',

save_settings_btn: '設定を保存',

accept_all_btn: 'すべて同意する',

reject_all_btn: 'すべて拒否する',

close_btn_label: 'Close',

cookie_table_headers: [

{col1: 'Name'},

{col2: 'Domain'},

{col3: 'Expiration'},

{col4: 'Description'}

blocks: [

{

title: 'Cookie usage 📢',

description: 'I use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a href="#" class="cc-link">privacy policy</a>.'

}, {

title: 'Strictly necessary cookies',

description: 'These cookies are essential for the proper functioning of my website. Without these cookies, the website would not work properly',

toggle: {

value: 'necessary',

enabled: true,

readonly: true // cookie categories with readonly=true are all treated as "necessary cookies"

}

}, {

title: 'Performance and Analytics cookies',

description: 'These cookies allow the website to remember the choices you have made in the past',

toggle: {

value: 'analytics', // your cookie category

enabled: false,

readonly: false

cookie_table: [ // list of all expected cookies

{

col1: '^_ga', // match all cookies starting with "_ga"

col2: 'google.com',

col3: '2 years',

col4: 'description ...',

is_regex: true

{

col1: '_gid',

col2: 'google.com',

col3: '1 day',

col4: 'description ...',

}

]

}, {

title: 'More information',

description: 'For any queries in relation to our policy on cookies and your choices, please <a class="cc-link" href="#yourcontactpage">contact us</a>.',

}

]

}

});

おそらく一番大変な部分はここで、設置するサイトに合わせて Cookie ポリシーや Cookie Table を記載します。

上記の例では「_ga」の項目で正規表現を有効（is_regex: true）にしているので、名前が「_ga」で始まる全ての Cookie が制御できます。正規表現を無効にすると、セッションを管理している Cookie「_ga_<container-id>」は一致しなくなるので、制御対象から外れます。

HTML に反映する

仕上げとしてサイトに反映していくのですが、Google のタグ設定ガイドにも記載されている様に、呼び出すコードの順序が大事です。

まず最初に「同意しない（されていない）」状態にしてから Google Tag Manager を呼び出さないと、Cookie が即時発行されてしまいます。

初期値を「同意しない」状態にする
Google Tag Manager を読み込む（Cookie は発行されない）
Cookie Consent を読み込む
ユーザーが同意した場合にのみ Cookie を発行する
※同意した後から「拒否」にした場合には、発行した Cookie が削除される

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">

    <script>
      // Define dataLayer and the gtag function.
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      // Default ad_storage to 'denied'.
      gtag('consent', 'default', {
        //'ad_storage': 'denied',
        'analytics_storage': 'denied'
      });
    </script>

    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
    <!-- End Google Tag Manager -->

    <!-- Cookie Consent -->
    <script defer src="js/cookieconsent.js"></script>
    <script defer src="js/cookieconsent-init.js"></script>
    <link rel="stylesheet" href="css/cookieconsent.css" type="text/css" media="screen">
    <!-- End Cookie Consent -->

    <title>Cookie Consent TEST</title>
  </head>
	
  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

    <p>Cookie Consent TEST</p>
    <button type="button" aria-label="Cookieの設定" data-cc="c-settings">Cookie Settings</button>
		
  </body>
</html>