GDPR対応のためにGatsbyサイトにCookiebotを埋め込んでみた

GDPRやCCPAをはじめとしたePrivacy規則では、サイト訪問者に対してCookie情報を利用する旨の明確な同意が必要となるため、今回はCookiebotというツールを使って、Gatsby.jsで構築したウェブサイトに、簡単に同意バナーを埋め込んでみようと思います。

#cookiebot

#cookie

小西諒

2020.09.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

GDPRやCCPAをはじめとしたePrivacy規則では、サイト訪問者に対してCookie情報を利用する旨の明確な同意が必要となります。

最近多くのサイトで見かける「このウェブサイトはCookieを使用しますが許可しますか？」というアレですね。

日本のサーバーにあるWEBサイトでも安心できず、GDPRではEU圏からのアクセスには対応義務が発生するので、対応を検討中の日本企業様も多いと思います。

今回はCookiebotというツールを使って、Gatsby.jsで構築したウェブサイトに、簡単に同意バナーを埋め込んでみようと思います。

Cookiebotとは

Cookiebotは、同意を求めるバナーを簡単な3ステップでウェブサイトに導入できるツールです。同意を求める文章も日本語含め多言語で自動で生成してくれます。

Google Tag Managerなどと連携して同意を得るまで他のタグの配信を待たせることも可能です。各サイトがこうした規則を遵守することで無断でIPや訪問履歴が使われることを防ぐことができます。

前提

ウェブサイトはGatsby.jsのGatsby Starter Blogというテンプレートで構築しています。
Cookiebotの動作をパブリックなURLで確認する必要があるため、AWS Amplifyを使ってGatsbyアプリを立ち上げています。

Google Tag Managerなどを通じて埋め込むこともできるのですが、今回はウェブサイトに直接埋め込む方式でやってみます。

1. Cookiebotへのサインアップ

クラスメソッドのこちらのページよりご登録いただけます。ちなみに3週間のフリートライアル受付中です！

2. ドメイングループの登録

ドメイングループとは、複数のドメインやサブドメインをまとめて管理できるグループのことです。

同じドメイングループに紐づいたサブ/ドメインは同じ同意バナー（ロゴ、テンプレートなど）を使い回せます。

登録完了後、下記の手順でドメイングループが作成できます。

(1)コンソール画面右上の「＋」をクリック
(2)で新規ドメイングループ名を入力
(3)ドメイングループの設定は初回作成の場合は「Default Configuration」のままでOKです。

3. ドメインの登録

Cookiebotは仕様上、設置したいドメインをあらかじめ登録する必要があるため、ローカルでは動作しません。

今回はAWS Amplifyでアプリを立ち上げ済みなので、そちらのURLをCookiebot管理画面から登録します。

ちなみに例えば

「Domain Name」にexample.com
「Domain Alias」にstg.example.com

とすることで開発環境までまとめてバナー設置を許可することができます。

これでCookiebot側の設定は完了しました。

Gatsby側へのタグの埋め込み

サイトに埋め込むスクリプトタグは2つです。管理画面の「Your Script」からDomain Group ID（後で使います）と一緒に確認できます。

まずはHEADにタグを埋め込みます。 Gatsbyではhead要素のカスタマイズはHelmetというプラグインを使うことが多く、Gatsby Starter Blogでは下記のファイルがそれにあたります。

src/components/seo.js

return (
<Helmet
htmlAttributes={{
lang,
}}
title={title}
titleTemplate={`%s | ${site.siteMetadata.title}`}
meta={[
~
].concat(meta)}
/>
)

上記のファイルを、下記のように修正します。 ※DOMAIN_GROUP_IDはご自身のDomain Group IDに置き換えてください。

return (
<Helmet
htmlAttributes={{
lang,
}}
title={title}
titleTemplate={`%s | ${site.siteMetadata.title}`}
meta={[
~
].concat(meta)}
>
<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="DOMAIN_GROUP_ID" data-blockingmode="auto" type="text/javascript"></script>
</Helmet>
)

Reactではない一般的なWEBサイトであれば、普通に<head> ~ </head>の始めに埋め込むだけなので簡単ですね。

次に、同意バナー本体のスクリプトを埋め込みます。場所はコンテンツ内ならどこでもいいのですが、今回はフッター付近に埋め込みます。 ※さきほどと同様にDOMAIN_GROUP_IDを置き換えてください。

src/components/layout.js

~
<script id="CookieDeclaration" src="https://consent.cookiebot.com/DOMAIN_GROUP_ID/cd.js" type="text/javascript" async></script>
<footer>
© {new Date().getFullYear()}, Built with
{` `}
<a href="https://www.gatsbyjs.org">Gatsby</a>
</footer>
~

ここはReact以外の通常のWEBサイトでも全く一緒ですね。