WordPressサイトでCookie同意バナーを設定したい。でもやりかたがわかりません。設定方法を教えてください。
hideharuこういった疑問に答えます。
最近Webサイトの閲覧中に「Cookie利用に関する同意」みたいなバナー（ポップアップ）が出てくることが増えてきましたよね？こんなやつ↓
これ、GDPRという法律の施行が背景にあります。
本記事では、GDPR対応をするにあたり、Cookie同意のバナーを簡単に設置できるプラグイン「Cookie Notice & Compliance for GDPR / CCPA」の使い方・設定を解説します。
サイトにCookie同意バナーを設置する背景になったGDPRとは？
最近、Webサイトの閲覧中に「Cookie利用に関する同意」みたいなバナー（ポップアップ）が出てくることが増えてきましたよね？
これは、GRPRの施行が背景にあります。
GDPRとは、General Data Protection Regulation（一般データ保護規則）の略称で、EU域内における個人データの保護や取り扱いに関する規定を定めた法令です。2018年5月25日に施行されました。
規制に違反したときに多額の制裁金が課せられます。
GDPRに関するより詳しい情報については以下を参考にしてみてください。
日本のサイトでもGDPR対応は必要
EU圏内に拠点がないとしても、EU域内からのアクセスがある場合は法律が適用されるため、EU域内に関わらず日本での対応も求められてきています。
日本でブログをやるなら関係ない、と思うかもですが、そうではありません。GoogleアナリティクスやアドセンスとかのCookieを使用するものを使っているならばGDPRの対象になるそう。
そもそもWordPressでブログしているなら、レンタルサーバーにアクセス元のIPアドレスを保管している場合がほとんどなので、GDPRの対象となるらしい。
個人情報に関する規制は今後、日本でも厳しくなってくると思うのでそのようなリスクに対して対策しておいたほうがよいでしょう。
GDPR対応としてやることは以下の２つ。
- プライバシーポリシーのページを設置する
- Cookie同意のバナー（ポップアップ）を設置する
１つめのプライバシーポリシーページの設置方法は、以下の記事をご覧ください。
» ブログに必須！プライバシーポリシーの書き方・作り方【雛形コピペOK】
２つめのCookie同意のバナー（ポップアップ）を設置する方法は、以降で解説しました。引き続き、ご覧ください。
Cookie同意バナーを設定するおすすめのWordPressプラグイン
WordPressのサイトならば、プラグインを使うことで、Cookie同意バナー（ポップアップ）を簡単に設置できます。
Cookie同意バナーを設置するプラグインとして、候補は以下あたり。
- Cookie Notice & Compliance for GDPR / CCPA
- Beautiful and responsive cookie consent
- Complianz
- CookieYes
いろんな人のレビューや、わたし自身が実際に使った経験をふまえていうと、一番のおすすめは、Cookie Notice & Compliance for GDPR / CCPAです。
Cookie Notice & Compliance for GDPR / CCPAをおすすめする理由
以下の５つです。
- 無料で使える
- アカウント登録不要
- 設定がとにかく簡単
- カスタマイズ性もある
- デザインがシンプルできれい
プラグインをどれにするか迷っているなら、Cookie Notice & Compliance for GDPR / CCPA を選んでおけば間違いなし！
当ブログサイトでも、このプラグインを使ってますよ。
Cookie Notice & Compliance for GDPR / CCPAを使ってCookie同意バナーを設置する方法
続いて、Cookie Notice & Compliance for GDPR / CCPAをWordPressサイトに導入する方法を解説します。
Cookie同意バナーの完成イメージ
PCだとこんな感じになります。
スマホだとこんな感じに。
Cookie Notice & Compliance for GDPR / CCPAのインストール
WordPressの管理画面から、「プラグイン」＞「新規プラグインを追加」をクリックします。
検索窓に、「Cookie Notice & Compliance for GDPR / CCPA」を入力すると、以下がヒットします。
「今すぐインストール」をクリックしたのち、プラグインを有効にします。
Cookie Notice & Compliance for GDPR / CCPAのインストールの設定
プラグインを有効化すると、左メニューに「Cookies」というメニューが出てくるので、こちらをクリックして、設定画面に入っていきます。
「設定」と「同意ログ」のタブのうち、変更するのは「設定」タブだけでOK。
メッセージ／ボタンテキスト
- メッセージ：
-
アナウンスバーで表示される文章を編集できます。※当サイトとではデフォルトの文章のまま使ってます。
- ボタンテキスト：
-
メッセージとともに表示されるボタンの文字を編集できます。※ユーザがクリックするとアナウンスバーが消えます。
プライバシーポリシー
- プライバシーポリシー：
-
プライバシーポリシーへのリンクを有効にすると、指定のページへリンク設定ができます。
※有効化するかどうかはお好みで。当サイトではチェックはオフにしてます。 下の入力欄にリンクボタンに表示させるテキストを入力します。 - ページリンク：
-
サイト内の固定ページを選択可能です。
- カスタムリンク：
-
リンク先urlを指定します。
- WordPressのプライバシーポリシーページと同期します：
-
前項で設定したプライバシー設定のページと同期させることができます。
- _blank / _self：
-
プライバシーページを新規ウインドウで開く場合は_blankにチェックを入れます。
- バナー / メッセージ：
-
プライバシーポリシーのリンクの設置場所を選びます。 バナーを選択した場合、ボタンとしてOKボタン横に設置されます。メッセージを選択した場合、メッセージ文章の最後に設置されます。
以上で、Cookie同意バナーの大枠の設定は終わり。
以下で細かい設定をしていきましょう。
同意を取り消す
- 同意を取り消す(1)：
-
Cookieの利用を拒否する選択肢を加えます。下の入力欄はボタンに表示されるテキストです。
- 同意を取り消す(2)：
-
ユーザーが後から同意を取り消すことができるようになります。アナウンス文と、ボタンのテキストが編集できます。※有効化するかどうかはお好みで。当サイトではチェックはオフにしてます。
- 自動 / 手動：
-
ボタン表示を自動にするか手動にするかを選択します。手動の場合は、表示させたい箇所にショートコードを設置します。
ブロックされるスクリプト
- ブロックされるスクリプト ：
-
Google Analitycs等、承諾を得た後に読みこむコードをここに記載します。 挿入場所はhead閉じタグの直前か、bodyの閉じタグの直前かを選択可能です。 特にブロックする必要がない場合は空欄のままにしておいてOKです。
その他の設定
※少し細かい設定でとまどうかもですが、迷うなら上記と同じ設定にすればOK！
- 再読込：
-
同意を得た際にページを再読み込みさせる場合はチェックを入れます。
- スクロール時：
-
ユーザーがページをスクロールした際に同意したとみなすかどうかを選択します。チェック入れるとスクロール数の指定が可能になります。その数値分スクロールするとアナウンスバーも消えます。
- クリック時：
-
ユーザーがページのどこかをクリックした際に同意したとみなすどうかを選択します。
- 承認された有効期限：
-
同意した際の、Cookieの保存の有効期限を選択します。
- 有効期限を拒否：
-
拒否したユーザーのCookieの保存の有効期限を選択します。
- スクリプト位置 ：
-
スクリプトをheader、footerのどちらに挿入するかを選択します。
- 無効化：
-
プラグインのを無効化した時にプラグインの全データを削除させたい場合はチェックしておきます。
最後にデザインの設定をしましょう。
通知デザイン
- 位置：
-
アナウンスの表示位置をページの上部か、下部にするかを選択します。
- アニメーション：
-
アナウンスの表示スタイルアニメーションを選択します。
- ボタンスタイル：
-
ボタン・テキスト・バーの配色を選択・編集します。
- ボタンclass：
-
必要であればボタンにつけるクラス名を入力します。空白のままのときは、”cn-set-cookie cn-button”クラスが自動で付与されます。
デザインはお好みでどうぞ。※私は初期設定のままにしてます。
最後に、ページ最下部の「変更を保存」をクリックしましょう。
完成したCookie同意バナー
こんな感じになります。
設定お疲れさまでした！
参考：消したCookie同意バナーを再表示させる方法
あなたがご自身のサイトに設定したCookie同意バナーを、承諾などして非表示させたのち、再び表示させたいときもあるでしょう。
そういうときは、お使いのブラウザのキャッシュをクリアすればOKです。
ブラウザのキャッシュのクリア方法はこちらの記事を参考にどうぞ。
» ブラウザキャッシュのクリア方法
参考：Cookie同意バナーのボタンが押された回数を分析する方法
サイト分析ツールのGoogle Analyticsをお使いの方で、Cookie同意バナー内のボタンが押された回数を分析したい方向けに、設定方法を紹介します。
GTMの導入
Cookie同意バナー内のボタンが押された回数を分析するには、Google Tag Manager(GTM)を使います。
GTM：変数の設定
以下の３つを設定しておきます。
・Click Classes
・Click Text
・Page URL
GTMの画面はこちら。
GTM：トリガの設定
以下のように設定します。
cn-set-cookie cn-buttonというのは、Cookie同意バナー内のボタンに自動で付与されたクラス名ですね。
GTM：タグの設定
以下のように設定します。
イベント名とイベントパラメータ名は任意の名前をつけてください。
上記の設定をしたうえで、作成したタグを公開します。
Google Analytics4：カスタムディメンションの登録
前述の「タグの設定」で設定したイベントパラメータ名をカスタムディメンションとして登録します。
Google Analytics4の管理画面で、「データの表示」＞「カスタム定義」をクリックして、カスタムディメンションを登録します。
Google Analytics4：レポート作成
GTMのタグ公開後、「Cookie同意バナー内のどのボタンが何回押されたか」がGoogle Analytics上にデータ保存されます。
分析するには、Google Analytics4でデータ探索レポートを作ります。
当サイトで作成したデータ探索レポートの設定は以下です。
当サイトの実際のデータはこちらです（2023年12月の1ヶ月分データ）。
上記のように、Google Analytics4とGMTを使うことで、Cookie同意バナー内のどのボタンが何回押されたかを分析できるわけです。
まとめ：プラグインを使ってCookie同意バナーを設置しておこう
個人情報に関する規制は今後、日本でも厳しくなってくると思うので、この機に、Cookie同意バナー（ポップアップ）を設置しておきましょう。
WordPressサイトならば、今回紹介したプラグインCookie Notice & Compliance for GDPR / CCPAを使うのがおすすめ。
・無料
・設定がとにかく簡単
・デザインがシンプルできれい
だから。
参考になれば幸いです。
あわせて読みたい
今回紹介した以外のおすすめプラグインは、以下で解説してますのでご覧ください。
» WordPressの無料おすすめプラグイン13選【ブログ初心者必見】