CookieバナーAPIの概要

スーパー管理者と[ウェブサイト設定]の編集権限を付与されたユーザーは、EUのCookie法規および一般データ保護規則(GDPR)を順守するために、訪問者のCookieトラッキングとプライバシー ポリシー バナーをカスタマイズすることができます。

プライバシーポリシーの通知により、訪問者はHubSpotアカウントでのCookieによるトラッキングを許可するかどうかを選択できます。この機能はHubSpotページだけではなく、HubSpotトラッキングコードがインストールされている全ての外部ページ上で動作します。Cookieのトラッキング設定やプライバシーポリシーの通知をカスタマイズしましょう。

この記事では、Cookieバナーを通じて訪問者のブラウザーに追加されたCookieを管理する方法について説明します。


Cookieを削除

_hsp.push ([' revokeCookieConsent ']);

GDPRに基づくHubSpotの同意バナーに組み込まれる、HubSpotトラッキングコードによって作成されたCookieを削除します。これには、訪問者のトラッキングに関連するHubSpot Cookieが含まれます。Cookieが削除されると、どの訪問者も新規の訪問者と見なされるため、次回のページ読み込み時にはCookie同意バナーが表示されます。

この機能を使用しても、HubSpot以外のバナーによって配置されたCookieは削除されません。削除の対象となるCookieの一覧をご覧ください。 

/* Example code to remove the consent banner cookies when a visitor clicks an element with the 'removeCookies' id. */ var _hsp = window._hsp = window._hsp || []; document.getElementById("removeCookies").onclick = function() { _hsp.push(['revokeCookieConsent']); };

トラッキング不可Cookieの配置

_hsq.push ([' DoNotTrack ']);

訪問者のブラウザーに__hs_do_not_trackのCookieを配置します。これにより、この訪問者に関するHubSpotトラッキングコードを使った情報送信は停止されます。

{track: true}引数を含めてもう一度関数を呼び出すことにより、Cookieを削除できます。
_hsq.push(['doNotTrack', {track: true}]);

注:この機能を使用すると、匿名化されたトラフィックやカスタムイベントのデータを含む、トラッキングコードによる全ての情報収集を停止します。

/* Example code to place the __hs_do_not_track cookie for the visitor when they click an element with the 'doNotTrack' id. */ document.getElementById("doNotTrack").onclick = function() { _hsq.push(['doNotTrack']); };

プライバシーに関する同意ステータスの取得

_hsp.push ([' addPrivacyConsentListener ', callbackFunction]);

現在の訪問者のプライバシーに関する同意ステータスを取得します。ユーザーによるきめ細かい制御を可能にするために、同意には3つのカテゴリーが提供されています。各カテゴリーに対する独自のキーは、consent.categoriesオブジェクト内にあります。

  • consent.categories.analytics
  • consent.categories.advertisement
  • consent.categories.functionality

ページの状態に応じて、callbackFunctionが呼び出されます。

  • バナーが有効になっていない場合、または訪問者が以前にバナーを表示して[承諾]か[拒否]ボタンをクリックしたことがある場合:
    • バナーコードが既に読み込まれている場合、callbackFunctionはすぐに呼び出されます。
    • トラッキングコードが読み込まれる前にcallbackFunctionが_hspに含まれると、トラッキングコードが読み込まれた後にこの関数が呼び出されます。
  • 同意バナーが有効になっている場合、訪問者が[承諾]か[拒否]ボタンをクリックするとcallbackFunctionが呼び出されます。
// Log the analytics category consent status of the current visitor to the console var _hsp = window._hsp = window._hsp || []; // analytics _hsp.push(['addPrivacyConsentListener', function(consent) { console.log(consent.categories.analytics); }]); // advertisement _hsp.push(['addPrivacyConsentListener', function(consent) { console.log(consent.categories.advertisement); }]); // functionality _hsp.push(['addPrivacyConsentListener', function(consent) { console.log(consent.categories.functionality); }]); // or it can all be done in one call _hsp.push(['addPrivacyConsentListener', function(consent) { console.log(`analytics: ${consent.categories.analytics}`); console.log(`advertisement: ${consent.categories.advertisement}`); console.log(`functionality: ${consent.categories.functionality}`); }]);

This is provided for backward compatibility with older scripts. For all new websites you should use the cookies by category method, giving more granular control over cookie activation.

_hsp.push ([' addPrivacyConsentListener ', callbackFunction]);

現在の訪問者のプライバシーに関する同意ステータスの真偽を取得できます。

ページの状態に応じて、callbackFunctionが呼び出されます。

  • バナーが有効になっていない場合、または訪問者が以前にバナーを表示して[承諾]か[拒否]ボタンをクリックしたことがある場合:
    • バナーコードが既に読み込まれている場合、callbackFunctionはすぐに呼び出されます。
    • トラッキングコードが読み込まれる前にcallbackFunctionが_hspに含まれると、トラッキングコードが読み込まれた後にこの関数が呼び出されます。
  • 同意バナーが有効になっている場合、訪問者が[承諾]か[拒否]ボタンをクリックするとcallbackFunctionが呼び出されます。
// Log the consent status of the current visitor to the console var _hsp = (window._hsp = window._hsp || []); _hsp.push(["addPrivacyConsentListener", function (consent) { if (consent.allowed) { console.log('something') } }])

CallbackFunctionは、consentオブジェクトを唯一の引数として受け入れます。

consentオブジェクトには単一のallowedプロパティーがあり、次の場合にtrueとなります。

  • プライバシーポリシーの同意バナーが有効になっていない、または通知専用モードで有効になっている場合。
  • オプトインモードが有効になっていて、訪問者がバナーで[承諾]をクリックした場合。
  • 以前オプトインモードが有効になっていた際に、訪問者がバナーで[承諾]をクリックしたことがある場合。

オプトインモードで同意バナーが有効になっているときに、訪問者が[拒否]ボタンをクリックしたか以前にクリックしたことがある場合、このプロパティーはfalseになります。

ウェブサイトの訪問者が同意設定を管理できるようにする

ShowBanner関数を呼び出してバナーを再表示し、ウェブサイトの訪問者が同意設定を変更できるようにします。例:

​​var _hsp = window._hsp = window._hsp || []; ​​_hsp.push(['showBanner']);

showBannerの動作はポリシーによって異なり、オプトインポリシーとカテゴリー別のCookieポリシーでのみ使用可能です。 

オプトインポリシーの場合、showBannerを呼び出すと、次の動画(英語)のようにバナーが再び表示されます。

HubSpot Video

 

カテゴリー別のCookieポリシーの場合、showBannerを呼び出すと、次の動画(英語)のように各カテゴリーを選択するためのモーダルが再び表示されます。

HubSpot Video

UIの例

この機能によって、訪問者はウェブサイト上のボタンやリンクを使用して、バナーを再度開いて設定を変更できるようになります。コードを表示した以下の例もご参照ください。 

ボタン

このボタンはウェブサイトのフッターによく配置されます。

<button type="button" id="hs_show_banner_button" onClick="(function(){ var _hsp = window._hsp = window._hsp || []; _hsp.push(['showBanner']); })()" > Cookie Settings </button>#hs_show_banner_button { display: inline-block; text-align: center; height: 50px; background-color: #425b76; border: 1px solid #425b76; border-radius: 3px; padding: 10px 16px; text-decoration: none; color: #fff; font-family: inherit; font-size: inherit; font-weight: normal; line-height: inherit; text-shadow: none; }
HubSpot Video

 

固定位置ボタン

このボタンは画面下部の固定位置に配置されます。ページに設置すると常時画面に表示されるため、訪問者が見逃すことはありません。

<button id='hs-hud-cookie-settings' onClick="(function(){ var _hsp = window._hsp = window._hsp || []; _hsp.push(['showBanner']); })()"> Cookie Settings </button> button#hs-hud-cookie-settings { position: fixed !important; bottom: 0px; right: 10px; color: white; background-color: #425b76; padding: 5px; border-top-right-radius: 5px; border-top-left-radius: 5px; border-width:0; appearance:none; }
HubSpot Video

 

リンク

該当テキストをハイライト表示してリンクを挿入することもできます。

<a id="hs-cookie-settings-link" onClick="(function(){ var _hsp = window._hsp = window._hsp || []; _hsp.push(['showBanner']); })()"> Cookie Settings </a>#hs-cookie-settings-link { cursor: pointer; }
HubSpot Video

 

過去のカテゴリー

バナーに追加されたプライバシー同意リスナーが、同意の変更に準拠するためにリスナーに渡される同意オブジェクトは、カテゴリーごとに以前の同意状態を格納するpreviousCategoriesフィールドを含みます。

consent = { allowed: true or false, categories: { necessary: true, analytics: true or false, advertisement: true or false, functionality: true or false, }, previousCategories: { necessary: true, analytics: true or false, # defaults to false advertisement: true or false, # defaults to false functionality: true or false, # defaults to false }, }
注:previousCategoriesは、一度ぺージを閉じると失効します。ユーザーがページを再読み込みまたは再訪するたびに、previousCategoriesはデフォルトの状態にリセットされます。

同意リスナーの場合previousCategoriesを利用して、同意がいつ変更されたかを特定し、行動を適切に調整可能です。例えばトラッキングスクリプトの場合、同意リスナーを使用して同意を受け取ったときにCookieを使用し、同意が取り消されたときにそれらのCookieを削除する可能性があります。同意に関して変更がなくアクションが必要ない場合でも、previousCategoriesフィールドからその情報がリスナーに渡されます。

以下は、previousCategoriesを使用する同意リスナーの例です。

_hsp.push(['addPrivacyConsentListener', function(consent) { const prevConsent = consent.previousCategories; const currConsent = consent.categories; const hasConsent = currConsent.analytics && currConsent.advertisement; const prevHadConsent = prevConsent.analytics && prevConsent.advertisement; const hasChanged = hasConsent !== prevHadConsent; if (hasChanged && hasConsent) { // drop cookies, execute code etc } if (hasChanged && !hasConsent) { // remove cookies, undo actions and resepect user privacy } }]);

参考になりましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。