「Cookie使用同意ユーザーのみ、GA4で解析」実装例

今回のテーマは

EUのユーザー等を対象にしてサービスを提供しているウェブサイトの中には、

「Cookie使用に同意したユーザーのみ、GA4で解析する」

というウェブサイトがあります。

https://www.lareserve-paris.com/en/

たとえば、こちらのホテルのウェブサイトがそれに該当します。

「Cookie使用に同意したユーザーのみ、GA4で解析する」という実装を行いたい場合の実装方法の具体例を紹介するのが、今回の記事の内容です。

「Cookie使用に同意したユーザーのみ、GA4で解析する」となった場合、どれ位のユーザーが同意してくれるかは、サイトによってまちまちで、10%未満～20％前後というサイトが多いようですが、5％未満のサイトもあるようです（弊社調べ）。

今回の方法で実装を行うと、実際にサイトを訪問したユーザーの、ごく一部しか、GA4で計測できなくなるということになりますので、実装に際しては、社内、チーム内で、十分な検討をしていただくよう、お願いいたします。

Cookie使用に同意してもらうためのウェブページのサンプル

設定方法をご説明するために、Cookie使用に同意してもらうためのウェブページのサンプルをご用意させていただきました。GTM-XXXXXXXXの部分は書き替えてご利用ください。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cookie Consent Popup with GTM Event</title>

    <!-- 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-XXXXXXXX');</script>
    <!-- End Google Tag Manager -->

    <style>
        #consent-popup {
            display: none; /* Default hide */
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #f9f9f9;
            padding: 20px;
            text-align: center;
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
        }
        #consent-popup a {
            padding: 10px 20px;
            color: #fff;
            background-color: #007bff;
            text-decoration: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>

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

<div id="consent-popup">
    This site uses cookies to improve your experience. 
    <a href="#" id="consent-button">I Agree</a>
</div>

<script>
// Check if user has already given consent
function checkConsentGiven() {
    return localStorage.getItem('userConsent') === 'true';
}

// Show consent popup if consent not given
function showConsentPopup() {
    if (!checkConsentGiven()) {
        document.getElementById('consent-popup').style.display = 'block';
    }
}

// Event listener for "I Agree" button
document.getElementById('consent-button').addEventListener('click', function(event) {
    event.preventDefault(); // Prevent default anchor action
    localStorage.setItem('userConsent', 'true'); // Store consent
    document.getElementById('consent-popup').style.display = 'none'; // Hide popup

    // Send a custom event to GTM dataLayer
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        'event': 'cookieConsentGiven'
    });
});

// On document ready
document.addEventListener('DOMContentLoaded', showConsentPopup);
</script>

</body>
</html>

HTMLコードの解説

上記のHTMLコードは、ユーザーがCookieの使用に同意した場合のみ、GA4を介してユーザーのウェブサイト訪問を追跡することを目的としています。

具体的には、ユーザーにCookie使用の同意を求めるポップアップを表示し、同意が得られた場合にのみ、GA4での追跡を開始する仕組みです。

以下に、コード内の主要な機能を解説します。

スタイル設定

#consent-popup {...}
#consent-popup a {...}

CSSスタイルは、同意ポップアップの見た目を定義しています。このポップアップは、ユーザーがまだCookieの使用に同意していない場合に画面の下部に表示されます。

Cookie同意ポップアップ

<div id="consent-popup">...</div>

この部分は、ユーザーにCookie使用の同意を求めるメッセージと「I Agree」ボタンを含むポップアップです。ボタンをクリックすると、ユーザーが同意したことがローカルストレージに記録され、ポップアップが非表示になります。

ローカルストレージとCookieの違い

ローカルストレージとCookieは、ウェブブラウザにデータを保存するための2つの異なる技術です。これらは、ウェブサイトがユーザーのブラウザに情報を格納し、後で取り出して利用できるようにするために使われますが、使用目的、容量、動作の仕組みなど、いくつかの重要な違いがあります。

ローカルストレージ

容量: ローカルストレージは、Cookieよりもはるかに大きなデータを保存できます。一般的にブラウザごとに5MBから10MBの範囲です。
存続期間: ローカルストレージに保存されたデータは、ユーザーが明示的に削除しない限り、無期限に残ります。ブラウザを閉じてもデータは消えません。
アクセス: ローカルストレージに保存されたデータは、同じオリジン（プロトコル、ドメイン、ポートが全て同じウェブサイト）からのみアクセス可能です。
セキュリティ: セッションハイジャックなどのセキュリティリスクを減らすために、ローカルストレージはHTTPリクエストとともにサーバーに送信されません。

Cookie

容量: Cookieは非常に小さなデータ量のみを保存できます。一般的には1つのドメインあたり4KBまでです。
存続期間: Cookieは有効期限を設定できます。期限が設定されていない場合はセッションCookieとなり、ブラウザが閉じられると削除されます。期限が設定されている場合は、その期間が過ぎるまでデータが残ります。
アクセス: Cookieは同じオリジンからのみアクセス可能ですが、設定によってはサブドメイン間で共有することもできます。
セキュリティ: CookieはHTTPリクエストとともにサーバーへ自動的に送信されるため、CSRF（クロスサイトリクエストフォージェリ）やセッションハイジャックなどの脆弱性に対して注意が必要です。セキュアな通信のみに制限するために、Secure属性やHttpOnly属性を設定できます。

使用目的の違い

ローカルストレージ: より大量のデータをクライアントサイドで保存する必要がある場合や、セッション間でのデータの持続が必要な場合に適しています。例えば、ウェブアプリケーションの設定情報や大量の一時データなどです。
Cookie: 主にサーバーとクライアント間での小さなデータのやり取りに使用されます。認証情報やユーザーの設定など、サーバーが参照する必要がある情報を保存するのに適しています。

JavaScriptの動作

同意の確認： checkConsentGiven() 関数は、ローカルストレージをチェックしてユーザーが既にCookieの使用に同意しているかどうかを確認します。
ポップアップの表示： ユーザーがまだ同意していない場合、showConsentPopup() 関数により同意ポップアップが表示されます。
同意処理： 「I Agree」ボタンにクリックイベントリスナー（注）が設定されており、クリックするとユーザーの同意がローカルストレージに保存されます。さらに、window.dataLayer.push({...}) を使用して、ユーザーが同意したことを示すカスタムイベントをGoogle Tag ManagerのdataLayerに送信します。これにより、GTMやGA4で特定のトラッキングやイベントトリガーを実行するための条件として、ユーザーの同意が利用できるようになります。
ドキュメントの準備ができたらポップアップを表示： 最後に、document.addEventListener('DOMContentLoaded', showConsentPopup); は、ページの内容が完全にロードされた後にポップアップを表示するようにします。

イベントリスナーとは？

「I Agree」ボタンにクリックイベントリスナーが設定されている部分は、ウェブページ上でユーザーが「I Agree」ボタンをクリックしたときに起こるアクションをプログラムするJavaScriptのコードの一部です。この処理は主に3つのステップで構成されています。以下で、これらのステップを詳しく解説します：

1. クリックイベントリスナーの設定

イベントリスナーは、特定のイベントが発生したときに実行される関数またはアクションを指します。ここでは、「I Agree」ボタンがクリックされるというイベントに対してリスナー（監視者）を設定しています。これはウェブページがユーザーの操作を「聞いている」状態にあると考えることができます。

document.getElementById('consent-button').addEventListener('click', function(event) {
    ...
});

2. イベントのデフォルト動作の阻止

event.preventDefault();

event.preventDefault(); は、イベント（この場合はクリックイベント）に関連付けられたブラウザのデフォルト動作を阻止する命令です。たとえば、もし「I Agree」ボタンがリンクだった場合、この命令によってリンク先への遷移を防ぐことができます。これはユーザーが意図したアクション以外のことを防ぐために重要です。

3. ユーザーの同意を保存し、ポップアップを非表示にする

localStorage.setItem('userConsent', 'true'); // Store consent
document.getElementById('consent-popup').style.display = 'none'; // Hide popup

この部分では、2つのことが行われます。まず、localStorage.setItem('userConsent', 'true'); を使って、ユーザーが同意したことをブラウザのローカルストレージに保存します。これにより、ウェブサイトはユーザーが以前に同意したかどうかを確認できるようになります。

次に、document.getElementById('consent-popup').style.display = 'none'; を使用して、同意を求めるポップアップを非表示にします。これは、ユーザーがすでに同意したことを示し、画面上の不要な要素を取り除くためです。

まとめ

このコードは、「I Agree」ボタンに対するクリックイベントを監視し、そのイベントが発生したとき（つまり、ユーザーがボタンをクリックしたとき）に、ユーザーの同意を保存し、同意を求めるポップアップを非表示にする動作を行います。この動作により、ユーザーがCookieの使用に同意したことをウェブサイトが記憶し、次回の訪問時にはポップアップを表示せずに済むようになります。

GTMの設定

1. 変数の設定

まず、ユーザーがCookieに同意したかどうかを追跡するカスタムJavaScript変数を設定します。これにより、タグがユーザーの同意状態に基づいてトリガーされるかどうかを判断できます。

変数タイプとして「カスタムJavaScript」を選択します。
以下のJavaScript関数を入力します。これは、localStorageからユーザーの同意状態を取得します。

function() {
  return localStorage.getItem('userConsent') === 'true';
}

変数に名前を付けます（例：userConsent）。

2. トリガーの設定

トリガー1: Cookie同意イベント

次に、カスタムイベントcookieConsentGivenがdataLayerにプッシュされたときにトリガーされるトリガーを作成します。これはユーザーが「I Agree」をクリックしたことを示します。

「トリガー」セクションに移動し、「新規」をクリックします。
トリガータイプとして「カスタムイベント」を選択します。
イベント名フィールドにcookieConsentGivenを入力します。
このトリガーに名前を付けます（例：Cookie Consent Given）。

こうなります。

トリガー2: 既存の同意でのページビュー

このトリガーは、過去にCookie利用に同意したユーザーが、戻ってきた時のためのものです。

トリガータイプ：ページビュー
このトリガーが発火する条件を設定します。具体的には、userConsent変数がtrueを返す場合に限ります。これは、トリガーの設定で「一部のページビュー」を選択し、userConsent変数がtrueに等しい場合に発火するように設定します。
名前：Page View with Consent

こうなります。

3. タグの設定

Google Analytics 4（GA4）の設定タグとして、Google タグを作成し、上記で作成した2つのトリガーのどちらかに基づいてこのタグが発火するようにします。

タグタイプ：Google タグ
タグIDを入力：G-XXXXXXX
トリガー：Cookie Consent GivenトリガーとPage View with Consentトリガーの両方を選択します。これにより、ユーザーが同意を与えたとき、または既に同意が存在する場合にページを訪れたときにタグが発火します。
名前：GA4 on Consent

このようになります。

以上で設定は完了です。

Cookieの利用同意をする前にページを閲覧しても、GA4のタグが発火していないことをChromeデベロッパーツールで確認してください。

同意前は、DebugViewで見ても、「何もない」状態でなければなりません。

最後まで読んでくださって、ありがとうございました。