2024年3月8日

【WordPress】Cookie同意ボタンを作成しよう(Googleアナリティクス、GTM対応)


Content
こんにちは、まるたけです。

Webサイトへの「Cookie同意」対応はお済みですか?
2022年4月1日の個人情報保護法改正に伴い、個人関連情報も適切に取り扱う必要が出てまいりました。

本記事では、WordPressにおいて「Cookie同意」ボタンを設置する手順について解説します。


※上記の法改正すべてに対応するものではございません。
 お使いのWebサイトでのサービス/内容によりますので、
 担当部門(サービスのオーナーや管理部門など)へご確認のうえ、適切な設定をお願いします。



Cookie同意(Cookie Notice)について

はじめに、Cookie同意(Cookie Notice)について触れます。

これは、2022年施行の「個人情報保護法改正」により「個人関連情報」の取り扱いが変わったことで
それに合わせた対応が必要になったためです。

※詳細は「個人情報保護法委員会」の「個人関連情報の第三者提供の制限等(法第31条関係)」をご覧ください。
https://www.ppc.go.jp/personalinfo/legal/guidelines_tsusoku/#a3-7


以下、ポイントについて記載します。

  • 個人関連情報を第三者提供する際に、ユーザの「同意」が必要になった
  • 個人関連情報は個人情報とは異なり「年齢」「性別」「地域/位置情報」「Webサイトの閲覧履歴」「購入履歴」などが該当
  • Googleアナリティクスは、Cookieを用いて個人関連情報を取り扱っている
  • ユーザから見た際に、Googleアナリティクスで収集した情報はWebサイトから見て「第三者」である
  • そのため、ユーザの同意を得たうえでGoogleアナリティクスのトラッキングを行う

全体の流れ

「Cookie同意」のポップアップ表示と計測のおおまかな流れです。
「同意履歴」が保持されている場合のみ、緑色の線の流れで計測を行います。
同意がない場合は、ポップアップ表示をし「同意」を促します。

図1.全体の流れ

用意するもの

はじめに、以下をご準備ください。

  • WordPress実行環境(管理者権限)
  • Google アナリティクス(設定済みのもの)
  • Google Tag Manager(以下:GTM)※未使用も可です
  • 各種関連ページ(Cookieポリシー、プライバシーポリシー、Googleアナリティクスの利用について など)

図2-1.準備するもの

GTMでの同意設定

GTM経由でGoogleアナリティクスの計測設定を行います。
※GTMを利用しない場合は省略します

GTMに「同意機能」を用いた設定を行います。
※2024年2月末時点ではβ版です


【手順1】Google Tag Manager を開く

https://tagmanager.google.com/へアクセスし、Google Tag Managerにログインします。


【手順2】アカウントの「コンテナ」を開く

「アカウント」のタブで対象の「コンテナ」の「コンテナ名」のリンクをクリックします。

図3-1

【手順3】「タグ」の一覧から、対象のタグを選ぶ

※事前に「Google アナリティクス」の「タグ」「トリガ」設定をしておきます。

「タグ」の一覧から、Google アナリティクスを紐づけているタグのチェックボックスを選択します。
その後、右上の三点リーダーから「同意設定を編集します」をクリックします。

図3-2

【手順4】「タグの配信時に~」を選択します

図3-3

【手順5】選択肢から「analytics_storage」を選択し「保存」をクリックします。

図3-4

以上で、GTM上での「同意設定」が完了です。

WordPressへプラグイン設定を行う

Cookie同意のポップアップを実現するためのプラグインをインストールします。
ここでは、利用件数の多い「Cookie Notice & Compliance for GDPR/CCPA」を参考に手順をご紹介します。

【手順1】WordPressダッシュボードの「プラグイン」メニューを開きます。

【手順2】検索ボックスから「Cookie Notice & Compliance for GDPR/CCPA」を検索します。

【手順3】検索結果から、該当プラグインの「インストール」をクリックします。

 

図5-1.プラグインのインストール

プラグインのインストールができたら、設定に入っていきます。
あらためて、以下がそろっていることを確認しましょう。

図5-2.設定前に必要なもの

プラグインをインストール後の設定

【手順1】メニューを表示する

左のメニューから「Cookies」をクリックし、設定画面を開きます。

図6-1.メニューのクリック

【手順2】メッセージの登録

「メッセージ」の欄へ、準備した「同意ポップアップの説明文」を入力します。
ここでは、以下を例に登録します。

図6-2.プラグインのインストール

【手順3】ボタンの表示名

図6-3.メッセージの入力(説明文)

【手順4】プライバシーポリシーのリンク設定

図6-4.プラグインのインストール

【手順5】「同意しない」ボタンの表示名

図6-5.「同意しない」ボタンの表示名

【手順6】同意の取り消し設定

「Revoke consent」では、同意の取り消しをユーザが行えるようにできます。
指定する場合は、チェックを入れて設定します。※ここではチェックを外した例です

図6-6-1.Revoke consentの設定(チェック無し)

図6-6-2.Revoke consentの設定

【手順7-1】ブロックされるスクリプトの指定 ※GTMを利用する場合

「同意」をクリック済みの際に、出力するコードを入力します。
以下、GTM×Googleアナリティクス連携を行う例です。
Googleアナリティクスのみを利用する場合は【手順7-2】に進めます。

図6-7-1.ブロックするコード(GTM利用時)

【手順7-2】ブロックされるスクリプトの指定 ※Googleアナリティクスのみ利用する場合

GTMを利用しない(Googleアナリティクスのみ)場合です。
ここでは、ユニバーサルアナリティクス(UA-XX)のコードを入力する例です。
※GA4を利用している場合も、この欄にコードを入力します。

図6-7-2.ブロックするコード(Googleアナリティクスのみ)

【手順8】「同意する」イベントの指定

以下に対する設定をすることができます。
「同意する」のあとにページの計測を行いたいため、「再読込」を選択しておきます。

・再読込   ・・・「同意する」「同意しない」のクリック後にページを再読み込みします
・スクロール時・・・ポップアップ表示の際に、スクロールをした場合「同意する」とみなします
・On click  ・・・ポップアップ表示の際に、画面上でクリックをした場合「同意する」とみなします

図6-8.同意するイベントの指定

【手順9】保持期間の設定

「同意する」「同意しない」のクリック記録をブラウザに保持する期限を指定します。

下図の選択肢から選ぶことができます。

・Accected Expiry:同意する
・Rejected Expiry:同意しない

図6-9.保持期間の設定

【手順10】スクリプトの読み込み設定

ページ上に本プラグインが出力するスクリプトの差し込み位置を指定します。
ここでは、ヘッダーにしておきます。

図6-10.スクリプト位置の設定

【手順11】同意ポップアップの表示設定

ポップアップの表示する位置、色、表示方式、透過率を指定します。
ここでは以下のように設定します。

図6-11.同意するポップアップの表示設定

おつかれさまでした!
以上で、プラグインの設定は終わりです。

まとめ

以上が、WordPressのWebサイトで、Cookie同意(CookieNotice)を設定する例でした。

今回のケースは「個人関連情報保護法改正」「改正電気通信事業法」が関係していますので、
詳細については、「Cookie規制」「CookieNotice」などのキーワードで、外部サイトもご参照ください。

法改正により、それに順守した対応をしていく必要があるので、
Webサイトを運営されているかたは、世の中のニュースをチェックしていきましょう。

本記事が、みなさまのお役に立てていましたら幸いです。

次回は、設定した内容の動作確認について紹介していきます。

2024年3月8日 【WordPress】Cookie同意ボタンを作成しよう(Googleアナリティクス、GTM対応)

Category 開発ブログ(技術ブログ)

ご意見・ご相談・料金のお見積もりなど、
お気軽にお問い合わせください。

お問い合わせはこちら