[WordPress] GDPR Cookie ConsentでGoogle Analyticsをオプトインしたい

- GDPRに対応する上で、GAをオプトインできる状態にする必要があります
- サイトに訪問したユーザーに対して、Cookieを使用する旨の同意を得てからGoogle Analyticsを有効化するのですが、この制御を行う上で便利なプラグインが「GDPR Cookie Consent」です
- 本記事では「GDPR Cookie Consent」を使用したGAのオプトイン化の手順について解説します
オプトイン化の手順
①既存のGoogle Analyticsタグを削除する
- テーマファイル(一般的にはheader.php)に書かれているGoogle Analyticsのタグを削除します
- あとでプラグインの設定画面でタグを入力することになるので、タグ自体はテキストエディタなどに控えておきます
②「GDPR Cookie Consent」をインストールする

- ダッシュボードのプラグインの新規追加から「GDPR Cookie Consent」を検索して、インストール、有効化します
- プラグインを有効化すると、サイトの下部にメッセージとボタンが表示されるようになります

- この段階ではまだボタンを押してもGAは有効化されません。メッセージも英語になっていますので設定を変えていきます
③「GDPR Cookie Consent」の設定を変更する
- 「Cookie Law Settings」→「General」→「Show Again Tab」の「Show More Text」を変更します

- メッセージが閉じられた後、再表示用のボタンが表示されます。このボタンの名称がここで書かれた内容になります
- 「Cookie Law Settings」→「General」→「Other」の「Reload after Accept button click」と「Reload after Reject button click」を「Yes」にする

- メッセージに置かれたボタンを押したときに、サイトを再読み込みするかどうかの設定になります。ユーザーの同意を得てからすぐにGAタグを発行するために、この設定を有効化しておきます
- 「Customise Cookie Bar」の「Message」を変更します

- メッセージの内容そのものの設定です。今回は以下のようなメッセージを設定しています
当サイトでは、クッキーを使用してお客様の利用状況を把握し、利便性向上の改善に役立てています。
クッキーの使用に同意いただける場合は「同意する」ボタンをクリックしてください。
[cookie_reject margin="10px 20px 0px"][cookie_button margin="10px 20px 0px"]
- 「cookie_reject」と「cookie_button」のショートコードが、メッセージ上に配置するボタンとなります。それぞれショートコードの引数としてマージンも設定できるようになっています
- 「Customise Buttons」→「Accept Button」の「Text」と「Background colour」を変更します

- 「同意する」ボタンの文言と色を設定します
- 「Customise Buttons」→「Reject Button」の「Text」と「Background colour」を変更します

- 「同意しない」ボタンの文言と色を設定します
- 「Non-necessary Cookie Settings」の「This script will be added to the page HEAD section if the above settings is enabled and user has give consent.」に、「同意する」ボタンが押されたときに有効化させたいGAタグを設定します
- タグマネージャーを使っている場合は「This script will be added right after the BODY section if the above settings is enabled and user has given consent.」にbody内に置くタグを設定します

- これで「同意する」ボタンが押されてサイトがサイトのリロードが行われたときに、GAが有効になります
④動作確認する

- 最後に、きちんとGAの制御ができているか動作確認をします

- Chromeのデベロッパーツールの「Application」から、サイト表示時に「_gid」が生成されていないこと。「同意する」ボタンを押した後に「_gid」が生成されていることを確認しましょう
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。