Cookie宣言(Declaration)の表示が崩れる場合の対処法

Cookie宣言(Cookie Declaration)機能について

Cookiebotでは、サイト上で利用されてるCookieを自動でスキャンし、サイト訪問者にリストアップして表示する Cookie宣言(Cookie Declaration) という機能があります。

実装方法は簡単で、管理画面から下記のスクリプトをコピーし、任意のページの <body> 内に設置するだけです。

scr 2022-10-27 1230

見た目は概ね下記のようになります。 scr 2022-10-27 1232

Cookie宣言の見た目が崩れる場合

サイト上に設置後、上記の宣言部分のレイアウトが著しく崩れる場合、下記の理由が考えられます。

スクリプトの設置位置が間違っている

管理画面からコピーするスクリプトは 任意のページの <body> 内の一箇所に設置 されている必要があります。

一方で、同意バナーを設置するためのスクリプト(id="Cookiebot")は全ページの <head> に埋め込むため、そちらの設置方法と間違われるケースがよくあります。

サイト上の他のcssの影響を受けている

また、Cookie宣言のスクリプトを埋め込む場所のHTMLタグの階層が深くなっている場合、上位階層のスタイルの影響を受ける場合がありますので、注意が必要です。

また可能性は低いですが、スクリプト内で利用されているclass名に対して、既存のCSSで別のスタイルを適用していないかどうかも確認してください。

例: <div class="CookieDeclaration" lang="en" dir="ltr">

最低限のスタイルがサイト側で適用されていない

Cookie宣言部分について、元々Cookiebotが付与しているスタイリングは最小限になっています。

例えば、最上位階層にあたる <div class="CookieDeclaration" lang="en" dir="ltr"> については、最大の横幅(max-width)や外側の余白(margin)は取られていません。

そのため、そのまま設置するとディスプレイの最大の横幅まで広がって表示されてしまい、レイアウト崩れと勘違いされるケース があります。

お客様のサイトのスタイルに合わせ、最低限のコンテナやセクションで囲うことをご検討ください。

例:

<div style="max-width: 800px; margin: 20px auto;">
<script id="CookieDeclaration" src="https://consent.cookiebot.com/XXXX/cd.js" type="text/javascript" async></script>
</div>

コンテンツセキュリティポリシー(CSP)によりCookiebotのスクリプトがブロックされている

ウェブサーバーのレスポンスヘッダで Content-Security-Policy が指定されている場合、その内容によってはCookiebotのスクリプトがブロックされるケースがあります。

サイトのセキュリティご担当者様とご相談の上、Cookiebotのドメインを許可するように設定してください。

上記のブロック状況について、例えばChromeをお使いの場合、サイト上で右クリック > Inspect > Console からご確認いただけます。