Cookiebot の導入を Cloudflare Workers で簡単に行えるツールをローンチしました。

どうも、ベルリンオフィスの小西です。

クラスメソッドの取り扱いサービスの一つに、サイトに Cookie 利用同意バナーを導入できる Cookiebot があります。

今回、Cloudflare Workers という別サービスを使い、Cookiebot をより簡単にインストールできるツールを開発したので紹介します。

作ったもの

まずは作ったアプリの共有です。

https://cookiebot.classmethod.cf/

使い方はシンプル

1. Cookiebot Domain Group ID を入力 （Cookiebot管理画面から取得）
2. （Google Tag Managerをお使いの方）GTM ID を入力
3. 画面下部にコードが生成されるので、作成した Cloudflare Workers にコードを貼り付ける
4. Cloudflare Workers をデプロイする（お好みのルート、ドメインで）

以上の作業で、GTM に適応した Cookiebot のコードが全ページの HEAD に挿入されます。基本的にどのようなサイトでも対応します。

CMS やサイト生成ツールをお使いのケース、また様々な事情から HEAD をいじれないサイトでも、Cloudflare Workers が Cookiebot の導入に必要なタグを自動的にインストールしてくれます。

開発の経緯

Cookiebot って？

Cookiebot は CMP（同意管理プラットフォーム）のサービスで、ウェブサイトへの初回訪問時に表示される「Cookie を使っています」というアレです。

簡単なスクリプトを埋め込むだけで、同意に応じた他スクリプトの配信/ブロック、利用 Cookie の一覧化、オプトアウトを一手に引き受けてくれます。

クラスメソッドは Cookiebot とパートナー契約を締結しており、日本語での導入サポートや再販を行なっています。おかげさまで着々とご契約も増えています。

Cookiebot 導入時のお客様の課題

Cookiebot は競合サービスに比べると導入負荷が少ないことが特徴の一つです。

基本的には1つのスクリプトを HEAD に埋め込むだけで同意バナーをサイトに表示させることができます。

とはいえ、スクリプトの埋め込み位置を気にする必要があったり、裏側で動く CMS によっては埋め込めるスクリプトに制限があったり、お客様ごとに導入手順を調整する必要がありました。

普段サポート業務を行う中で常々「このプロセスをもっとスマートにできないものかなぁ」と思っていたのですが、「Cloudflare Workers を使ったらイケるんじゃないか」ということで、開発に至りました。

導入ツールについてもう少し詳しく

本ツールは「Cloudflare Workers で動かすスクリプトを生成するサービス」とも言えるので、まずはCloudflare の説明から。

Cloudflare とは

弊社紹介ページから抜粋。

Cloudflareはインターネットに接続するすべてのものを安全、プライベート、高速、信頼性の高いものにするべく設計されたグローバルネットワークです。SASEの提供、DDoS、ボット対策、WAF、ファイアーウォール、ゼロトラスト、CDN、DNS、サーバレス構成の構築によるJamstack対応など様々な機能を提供します。

さらに Cloudflare Workers は Cloudflare が提供する CDN のエッジにコードをデプロイして実行できる、サーバレスなサービスです。ms以下の実行速度で動く JavaScript などのコードを即時デプロイできます。

やっていること

サイト訪問者とオリジンのサイトを仲介し、オリジンの HEAD に Cookiebot のスクリプトを挿入、訪問者にコンテンツを返しています。

オリジンの HEAD へのスクリプト挿入は、Workers のランタイムに組み込まれた HTMLRewriter というセレクターベースの HTMLパーサーを使っています。

HTMLRewriter を使えば、HTML タグの改変、属性追加、テキスト置換、要素の削除などがエッジ上の処理で可能になりますし、HEAD のどの位置でコンテンツリライトを行うか制御する豊富なメソッドも持っています。

• before() : 特定のHTML要素の前に挿入する
• after() : 特定のHTML要素の後に挿入する
• prepend() : 特定のHTML要素の開始タグ直後に挿入する
• append() : 特定のHTML要素の終了タグ直前に挿入する
• などなど

Cookiebot はその機能性質上、他のスクリプトとの位置関係や GTM スニペットの書き方に影響を受けるため、それらの順番管理を Workers に任せているイメージです。

必要なもの

ツール利用にあたっては下記が必要になります。Cloudflare は無料でも使い始めることができます。

• Cookiebot アカウント （登録はこちらから）
• Cloudflare アカウント

最後に

今回のツール開発にあたり、OSS の Notion site wrapper である Fruition を参考にさせていただきました。

Fruition: Free, Open Source Toolkit for Building Websites with Notion

また、上記ベースに弊社で開発メンテしている姉妹ツール Worknot もありますのでよろしくです。

https://github.com/classmethod/worknot

上記ツールや、Cookiebot、Cloudflare の導入を希望される方はぜひ弊社にご相談ください。