JavaScriptTypeScript

Cookiebotで対象地域以外かどうかを判定する

GDPRなどの個人情報保護法に対応するために、Cookie同意の実装が必要です。Cookiebotを使用して同意バナーを表示する場合、非表示にすることも可能か調査しました。Cookiebotのデータを使用して、EUやカリフォルニア州など一部の地域でのみバナーを表示しているため、JavaScript(TypeScript)コードを使用して手動でトラッキングイベントを制御することができます。具体的には、CookiebotのregulationRegionsに対象地域のコードを記述し、ユーザーの国や文化を参照してバナーを表示するか判断します。

広告ここから
広告ここまで

GDPRなどの各国が制定した個人情報保護に関する法律に対応するため、Cookieの利用同意を求める実装を組み込むことがあります。

その際にCookiebotというサービスを利用することがあるのですが、「Cookieの同意を取る必要が現状なさそうな地域」に対しては同意バナーなどを非表示にできないか調べてみました。

対象となる要件

  • Cookiebotを使ってCookieの同意をとっている
  • ただしEUやカリフォルニア州など、特定の地域でのみバナーを表示させている
  • Cookiebotのデータを使って、手動でトラッキングイベントの発行判定を行なっている

対応するためのJavaScript (TypeScript)コード

export type CookiebotWindowProps = {
  consent?: {
    marketing: boolean;
    necessary: boolean;
    preferences: boolean;
    stamp: string;
    statistics: boolean;
  };
  userCountry: string;
  userCulture: string;
  regulationRegions: CookiebotRegulationRegions
};

export type CookiebotRegulationRegions = {
 gdpr: string[];
 ccpa: string[];
 lgpd: string[]; 
}

/**
 * Check the provided region code to show the consent banner
 * @param param 
 * @returns 
 */
export const shouldShowConsentBanner = (param: Pick<CookiebotWindowProps, 'regulationRegions'| 'userCountry' | 'userCulture'>): boolean => {
  const { 
    regulationRegions,
    userCulture,
    userCountry,
  } = param

  const regions = Object.values(regulationRegions).flat()

  const matchedCountry = regions.find(region => region === userCountry)
  if (!!matchedCountry) return true;
  const matchedCulture = regions.find(region => region === userCulture)
  return !!matchedCulture
}

ざっくりAbout

window.Cookiebotには、regulationRegionsでGDPRやCCPAなどの対象地域のコードが入っています。そして、userCountryuserCulutureを参照することで、閲覧者の環境をある程度判定できます。(この2つの違いは把握していませんすみません)

なので、userCountryまたはuserCulutureの値が、regulationRegionsに存在しないなら、Bannerの自動表示が行われない地域と判定できる(はず)です。

あとは、Bannerを出さない地域ではオプトインまたはオプトアウトでトラッキングイベントを発行するように実装しましょう。

ブックマークや限定記事(予定)など

WP Kyotoサポーター募集中

WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。

14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。

広告ここから
広告ここまで

Related Category posts