ブログ一覧

ストラテジー

同意バナーの正しい実装方法とMiravitaにおける計測タグ制御の具体例

閉じた玄関の扉の前で、小さな包みを持った手が待っている。包みはまだ置かれていない。左側には「同意の前に置かない」と書かれている。

同意バナーをウェブサイトに導入する際、単にバナーを表示すればよいと考えているケースが見受けられます。しかし、実装の順序や仕組みを誤ると、同意バナーを設置する意味そのものが失われてしまいます。本記事では、MiravitaのサイトにおけるGoogleアナリティクスの計測タグ制御を例に、同意前のCookie付与を防ぐ正しい実装順序や、同意取り消し時の処理、例外処理などの具体的な仕組みを解説します。プロの視点から、形だけの対策にとどまらない、技術的に整合性の取れた同意バナーの実装方法について詳しく掘り下げていきます。

この記事を3行で解説

  • 同意を得る前に計測タグを読み込むとCookieが置かれるため、同意バナーの意味が失われます。
  • Miravitaでは同意後にタグを読み込み、取り消し時は「止めてから消す」順序を徹底しています。
  • 社内端末などタグを読み込まない対象には、不要な同意バナーを表示しない設計にしています。

同意バナーの設置における順序の重要性

先に読み込んでから止める設計の問題点

同意バナーを設置する際は、訪問者の同意を受け取るまで計測タグを読み込まない設計にする必要があります。なぜなら、先に計測タグを読み込んでおいて、あとから計測を止めるという順序にすると、タグを読み込んだ時点でCookieが置かれてしまうためです。これでは同意を求める行為そのものの意味が無くなってしまいます。

Miravitaのサイトでは、この問題を避けるために、訪問者の同意を受け取るまでGoogleアナリティクスの計測タグを読み込まない作りにしています。計測タグの本体は、読み込み先のURLを変数に置くだけで、実際に読み込む処理は同意を受け取ったあとに行う設計にしています。このように、同意を得る前にタグを読み込ませないという順序を厳格に守ることが、同意バナーを機能させる前提となります。

同意を断られた場合の挙動

訪問者に同意を断られた場合は、計測用のスクリプトをページに足しません。この設計により、同意が得られない限り、計測のための通信は一度も発生しない状態を維持できます。形だけの同意バナーではなく、通信そのものを制御することが求められます。

同意取り消し時における処理の順序とCookie削除の仕組み

「止めてから消す」という順序の理由

一度同意した訪問者が、あとから同意を取り消す場合もあります。この場合はすでに計測タグが読み込まれているため、処理の順序が重要になります。Miravitaでは、処理を止めてからCookieを消すという順序にしています。この順序を逆にして「消してから止める」と、Cookieを消したそばから計測タグによって再びCookieが置き直されてしまうためです。

処理を止める手段としては、Google側が公式に用意している目印である window[‘ga-disable-<測定ID>’] を使用しています。この目印を設定した上でCookieを削除することで、再生成を防ぐことができます。

ドメイン判別ができないJavaScriptでのCookie削除

また、JavaScriptの仕様として、Cookieがどのドメインに紐づいているかを直接読み取ることはできません。JavaScriptから取得できるのは、Cookieの名前と値だけです。GoogleアナリティクスのCookieは、miravita.jp ではなく .miravita.jp のように1つ上のドメインに置かれることがあります。そのため、Cookieを消去する際は、ホスト名を分解し、考えられるすべてのドメインの形に対して消去の処理を実行する仕組みにしています。これにより、ドメインの判別ができない制限の中でも、Cookieを削除することが可能になります。

実用性を考慮した例外処理と表示制御

プライベートモードへの対応

実際のウェブサイト運用においては、訪問者のブラウザ環境やアクセス元に応じた細かな制御が求められます。例えば、ブラウザのプライベートモードを使用している訪問者の場合、localStorage が使えず、読み書きの際に例外が発生します。この挙動に対応するため、localStorage の読み書きを行う箇所は例外処理で囲む設計にしています。これにより、プライベートモードの訪問者に対してもエラーを発生させずにサイトを提供できます。

社内端末におけるバナー非表示の設計

さらに、Miravitaでは、社内の端末に対しては計測タグ自体を出さない設計にしています。計測タグを出さない以上、Cookieが置かれることもないため、同意バナーも表示しません。Cookieを置かない環境で同意を求めることは、訪問者にとってただの邪魔になるためです。このようなサイトの設計や実装の進め方について詳しく知りたい方は、弊社の提供するサービス開発のプロセスをご覧ください。

同意設定を再調整するための導線

また、訪問者が一度選択した同意設定をあとから変更できるようにすることも必要です。Miravitaでは、プライバシーポリシーのページに設定を再度開くためのボタンを設置し、いつでも設定を変えられるようにしています。実際の開発実績や具体的な実装例については、弊社の開発実績ページで紹介しています。また、具体的な実装方法のご相談は、お問い合わせ窓口よりご連絡ください。

よくある質問

Q. 同意バナーを表示していれば、タグの読み込み順序は関係ありませんか?

A. 関係があります。先に計測タグを読み込んでから同意を求める形にすると、同意を得る前にCookieが置かれてしまうため、同意を求める意味そのものが無くなります。同意を受け取るまではタグを読み込まない設計にする必要があります。

Q. 同意を取り消された場合、Cookieを消すだけで十分ですか?

A. 十分ではありません。すでにタグが読み込まれている状態でCookieだけを消すと、消した直後にタグがCookieを再生成してしまいます。そのため、公式の目印である window[‘ga-disable-<測定ID>’] などを用いて処理を止めてから、Cookieを消すという順序を守る必要があります。

Q. すべての訪問者に一律で同意バナーを表示すべきですか?

A. 計測タグ自体を読み込まない対象には表示すべきではありません。例えば社内端末など、計測タグを出さない設定にしている場合は、Cookieが置かれないため同意バナーを出す必要がなく、表示することは訪問者にとってただの邪魔になります。

WRITER

山下 生真

Miravita代表。日本とフィリピンで制作と事業支援に携わり、経営・ディレクション・デザイン・開発・マーケティングを横断して担当。

PICK UP

あわせてご覧ください

NEW SERVICE 外部販促部 設計から実行、改善までをまとめて引き受けます。

CONTACT

何を相談すればいいか、
まとまっていなくても
大丈夫です。

相談する