Cookiebotを使ったWEB上でEmbedしたYouTube動画を確実に表示できるようにする

Cookiebotを使ったWEB上でEmbedしたYouTube動画を確実に表示できるようにする

Cookiebotを使ったWEB上でEmbedしたYouTube動画のCookie設定をNecessaryにする設定を行います。Cookiebotは、GDPRやPDPA(タイの情報保護保護法)に対応したWEBのCookie管理ツールです。
Clock Icon2020.11.18

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

はじめに

クラスメソッドタイランドの三並です。

Cookiebotは、GDPRなどの個人情報保護法に対応した、WEBサイトのCookie管理及びCookie確認バナー表示のツールです。2021年5月からタイで始まるPDPA(タイの個人情報保護法)の対応にも役立つツールとなっています。

CookiebotをWEBサイトに導入すると、WEB内で使われているサードパーティのCoookieについても承認が必要になります。例えば、YouTubeやGoogleMapなどのツールでもCookieが使用されていますので、これもCookieとして管理する対象になります。

発生した問題

Cookiebotを導入すると、Cookiebotは自動でWEBページをスキャンし、Cookieを自動で分類します。

この際、Youtubeが作るCookieは自動でマーケティングに分類されます。 ユーザーはWEBへのアクセス時に設定情報(Preference)、統計(statistics)、マーケティング(marketing)に分類されたものは、ユーザーの意志でチェックを外すことができます。必須(necessary)に分類されているCookieは、WEBを参照するために必須のCookieということでチェックを外すことはできません。(このCookieを承認しないとWEBの参照ができなくなります)

YoutubeのCookieは分類されたマーケティングのチェックを外すと、ユーザーはembedされた動画を見れなくなるという状況になります。通常は問題ないかと思いますが、動画がそのページにおいて必須のコンテンツの場合は、これだと困ることがあります。この場合の解決策を以下に書きます。

解決策

YouTubeのCookieを必須(necessary)に分類することで、上記の問題を回避します。

1.

YouTubeのembedタグが以下のようになっていたとします。

<iframe src="https://www.youtube.com/embed/a9__D53WsUs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

ウェブページの中に貼り付けるYouTubeのembedタグを以下のように修正します。

<iframe data-cookieconsent="necessary" src="https://www.youtube.com/embed/a9__D53WsUs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

ポイントは、 data-cookieconsent="necessary" の部分になります。

2.

Cookiebotのコンソールにログインして、画面上部のCookiesをクリックします。 Cookieのスキャンがされていない場合は、「SCAN DOMAIN NOW」 をクリックして、Cookieの認識をさせてください。

次に、この画面内をしたにスクロールしていき、YouTubeに関連したCookieを探します。 Providerが「youtube.com」になっているものの設定を行います。 これらのCategoryを「Necessary」に変更します。

すべてのYouTube関連のCookieの設定を変更したら、Saveを押します。


これで設定は完了です。

3.

最後にWEBページにアクセスして、Cookiebotのバナー表示で、必須(necessary)のカテゴリに、YouTubeのCookieが含まれていることを確認してください。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.