Cookieバナー

// translate-ignore ‘Cookie同意バナーを使用すると、ユーザー設定に基づいてさまざまな分析スクリプトを有効または無効にできます。’; スーパー管理者と、ウェブサイト設定の編集権限を持つユーザーは、EUのCookie法および一般データ保護規則（GDPR）を順守する目的で、訪問者のCookieのトラッキングおよび同意バナーをカスタマイズすることができます。 Cookie同意バナーにより、訪問者はHubSpotアカウントでのCookieによるトラッキングを許可するかどうかを選択できます。この機能はHubSpotページだけでなく、HubSpotのトラッキングコードがインストールされている全ての外部ページ上で動作します。Cookieのトラッキング設定とCookieの同意バナーのカスタマイズこの記事では、Cookie同意バナーを通じて訪問者のブラウザーに追加されたCookieを管理する方法について説明します。また、サードパーティーCookie同意バナーを使用して同意を配布する方法、同意の収集を無効にする方法、およびHubSpot内の機能を管理する方法についても説明します。

Cookieを削除

_hsp.push(['revokeCookieConsent']); GDPRに基づく同意バナーに組み込まれる、HubSpotトラッキングコードによって作成されたCookieを削除します。これには、訪問者のトラッキングに関連するHubSpot Cookieが含まれます。Cookieが削除されると、どの訪問者も新規の訪問者と見なされるため、次回のページ読み込み時にはCookie同意バナーが表示されます。この機能を使用しても、HubSpot以外のバナーによって配置されたCookieは削除されません。削除の対象となるCookieの一覧をご覧ください。 Cookieのブロックが有効な場合、この機能によって同意が取り消されるため、今後のウェブサイト訪問時にサードパーティーCookieの更新やドロップは行われません。以下のコードブロックは、ユーザーがremoveCookiesというidを持つ要素（ボタンなど）をクリックしたときに、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_trackCookieを配置します。これにより、この訪問者に関するHubSpotトラッキングコードを使った情報送信は停止されます。 {track: true}引数を含めてもう1度関数を呼び出すことにより、Cookieを削除できます（例：_hsq.push(['doNotTrack', {track: true}]);）。以下のコードブロックは、ユーザーがremoveCookiesというidを持つ要素（ボタンなど）をクリックしたときに、Cookieを削除するイベントハンドラーを定義する例です。

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」はすぐに呼び出されます。_ _
- _hspにプッシュされたcallbackFunctionは、トラッキングコードが読み込まれる前にプッシュされた場合に限り、トラッキングコード読み込み後に呼び出されます。_ _
同意バナーが有効になっている場合、訪問者が［承諾］か［拒否］ボタンをクリックするとコールバック関数が呼び出されます。

以下のコードブロックは、現在の訪問者のさまざまなカテゴリの同意ステータスをコンソールにログとして出力する方法を示しています。

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}`);
  },
]);

カテゴリー別ではないCookie

_hsp.push(['addPrivacyConsentListener', callbackFunction]); 現在の訪問者のプライバシーに関する同意ステータスの真偽を取得できます。_ __ _ ページの状態に応じて、「callbackFunction」が呼び出されます。_ _

バナーが有効になっていない場合、または訪問者が以前にバナーを表示して［承諾］か［拒否］ボタンをクリックしたことがある場合：
- バナーコードが既に読み込まれている場合、「callbackFunction」はすぐに呼び出されます。_ _
- _hspにプッシュされたcallbackFunctionは、トラッキングコードが読み込まれる前にプッシュされた場合に限り、トラッキングコード読み込み後に呼び出されます。_ _
同意バナーが有効になっている場合、訪問者が［承諾］か［拒否］ボタンをクリックするとコールバック関数が呼び出されます。

以下のコードブロックは、現在の訪問者の同意ステータスをコンソールにログとして出力する方法を示しています。

var _hsp = (window._hsp = window._hsp || []);
_hsp.push([
  "addPrivacyConsentListener",
  function (consent) {
    if (consent.allowed) {
      console.log("something");
    }
  },
]);

callbackFunctionは、consentオブジェクトを唯一の引数として受け入れます。 consentオブジェクトには単一のallowedプロパティーがあり、次の場合にtrueになります。

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

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

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

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

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

showBannerの動作はポリシーによって異なり、オプトインポリシーとカテゴリー別のCookieポリシーでのみ使用可能です。_ __ _ オプトインポリシーの場合、showBannerを呼び出すと、次の動画のようにバナーが再び表示されます。_ _ カテゴリー別のCookieポリシーの場合、showBannerを呼び出すと、次の動画のように各カテゴリーを選択するためのモーダルが再び表示されます。

UIの例

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

ボタン

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

HTML
CSS

<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;
}

固定位置ボタン

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

HTML
CSS

<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;
}

リンク

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

HTML
CSS

<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;
}

サードパーティーCookieを手動でブロックする

HubSpot同意バナーは、サードパーティーのトラッキングテクノロジーとCookieの手動処理をサポートしています。複雑なウェブサイトを運用している場合や専任のウェブ開発者がいる場合は、手動処理を使用することをお勧めします。サイトで自動ブロックが機能しない場合は、手動でのブロックを利用できます。手動でのブロックは、以下のセクションで説明されているCookieバナー同意リスナーAPIを介して実装されます。このAPIは、同意が得られるまではトラッキングテクノロジーが実行されないようにするために使用されます。

全般的な変更

訪問者にターゲティング広告を表示するためのトラッキングスクリプトをウェブサイトにインストールする場合は、次のようなコードを使用できます。 <script src=”https://my.advertisement.script.com/ads”></script> このスクリプトをウェブサイトのページのヘッダーHTMLに貼り付けると、同意ステータスに関係なく、誰かがそのページにアクセスするたびにこのスクリプトが実行されます。訪問者の同意なしに、訪問者のブラウザーにCookieが配置されます。同意なしにスクリプトが実行されないようにするには、HubSpotのCookieバナー同意リスナーAPIを使用して、訪問者がCookieに同意したときにスクリプトをインストールします。同意リスナーは、訪問者が同意を送信するたびに実行される関数です。この機能を使用するには、訪問者が広告Cookieに同意したときにスクリプトをページに追加する同意リスナーを作成する必要があります。

<script>
 var _hsp = window._hsp = window._hsp || [];
_hsp.push(['addPrivacyConsentListener', (consent) => {
if (consent.categories.advertisement) {
const script = document.createElement('script');
        	script.src = "https://my.advertisement.script.com/ads";
        	document.head.appendChild(script)
}
}])
</script>

このスクリプトは、同意リスナーをCookieバナーに登録します。Cookieへの同意が送信されると、同意リスナーが実行され、ページにHubSpotのサードパーティー広告スクリプトが追加されます。

例：Google タグ

Google タグまたはgtag.jsを使用して、Google アナリティクスを追加できます。以下に例を示します。

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){window.dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID');
</script>

アナリティクスの同意が得られたときにGoogle アナリティクスを読み込むには、同意が与えられたときにgtagスクリプトを追加する必要があります。

<!-- Google tag (gtag.js) -->
<script>
     var _hsp = window._hsp = window._hsp || [];
    _hsp.push(['addPrivacyConsentListener', (consent) => {
    if (consent.categories.analytics) {
        const script = document.createElement('script');
          script.src = "https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID";
          script.async = 'true'
          document.head.appendChild(script)
      }
    }])
</script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_TRACKING_ID');
</script>

例：HotJar

アナリティクストラッキングのもう1つの例がHotJarです。以下に例を示します。

<!-- Hotjar Tracking Code -->
<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:HOT_JAR_ID,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

アナリティクスの同意が得られたときにHotjarが実行されるようにするには、同意リスナーを追加します。

<!-- Hotjar Tracking Code -->
<script>
var _hsp = window._hsp = window._hsp || [];
_hsp.push(['addPrivacyConsentListener', (consent) => {
	if (consent.categories.analytics){
(function(h,o,t,j,a,r){
        		h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        		h._hjSettings={hjid:HOT_JAR_ID,hjsv:6};
        		a=o.getElementsByTagName('head')[0];
        		r=o.createElement('script');r.async=1;
        		r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        		a.appendChild(r);
    		})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
}

}])
</script>

サードパーティーのCookie同意

以下のセクションでは、サードパーティーのCookie同意バナーを使用して次のことを行う方法について説明します。

同意を配布する
同意の収集を無効にする
HubSpot内の機能を管理する

HubSpotのCookieバナーを無効にする

HubSpotのCookieバナーの表示を無効にするには、ページのヘッダーhtmlの先頭付近にあるスクリプトに以下のコードを含めます。また、これによって同意管理が無効になります。

window.disableHubSpotCookieBanner = true;

HubSpotのCookieバナーの同意状態を設定する

HubSpotのCookieバナーと連携する全てのHubSpot製品、サードパーティー製品、またはカスタム製品の同意値を設定します。この関数は、訪問者の同意状態を指定するオブジェクトを受け取り、その値を現在の同意状態として保存し、同意リスナーがアタッチされている全てのスクリプトにその同意を配布します。この値は、Cookieバナーによって管理される同意Cookieには保存されません。セッション間での同意状態の保持は、この関数の呼び出し元が行います。この関数は、次のフィールドからなる同意オブジェクトを受け入れます。

フィールド名	型	説明
`analytics`	ブール値	Cookieを使用してウェブサイトの訪問者から分析データを収集することに同意します。
`advertisement`	ブール値	パーソナライズされた広告を訪問者に表示するためにCookieを使用することに同意します。
`functionality`	ブール値	ウェブサイトが機能するために必要な機能（認証など）にCookieを使用することに同意します。

以下のサンプルコードは、全ての同意値をtrueに初期化する例です。

window._hsp = window._hsp || [];
window._hsp.push([
  "setHubSpotConsent",
  {
    analytics: true,
    advertisement: true,
    functionality: true,
  },
]);

例：サードパーティーのCookieバナーを使用したHubSpot Cookieの制御 次のコードスニペットとスクリプトは、同意状態が変更されるたびにカスタムイベントを送信する方法の例を示しています。特定のユースケースに実装する機能は、以下のサンプルコードとは異なる場合があることに注意してください。ウェブサイトのニーズに合わせて動作を調整する方法の詳細については、サードパーティーのドキュメント（Google のユーザー同意管理の概要など）を参照してください。

CustomEvent("thirdPartyConsentEvent", {
  detail: {
    analytics: true,
    advertisement: true,
    functionality: true,
  },
});

次のスクリプトは、ページのヘッダーhtmlの先頭に配置する必要があります。

<script>
  // disable the hubspot cookie banner window.disableHubSpotCookieBanner = true // listen for the third party consent
  event and send consent to HubSpot window._hsp = window._hsp || []; document.addEventListener("thirdPartyConsentEvent",
  (e) =>{" "}
  {window._hsp.push([
    "setHubSpotConsent",
    {
      analytics: e.detail.analytics,
      advertisement: e.detail.advertisement,
      functionality: e.detail.functionality,
    },
  ])}
  )
</script>;

Cookieへの同意

CTA

グローバルフォームイベント

Cookieを削除

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

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

カテゴリー別ではないCookie

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

UIの例

ボタン

固定位置ボタン

リンク

サードパーティーCookieを手動でブロックする

全般的な変更

例：Google タグ

例：HotJar

サードパーティーのCookie同意

HubSpotのCookieバナーを無効にする

HubSpotのCookieバナーの同意状態を設定する

Cookieへの同意

CTA

グローバル フォーム イベント

​Cookieを削除

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

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

​カテゴリー別ではないCookie

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

​UIの例

​ボタン

​固定位置ボタン

​リンク

​サードパーティーCookieを手動でブロックする

​全般的な変更

​例：Google タグ

​例：HotJar

​サードパーティーのCookie同意

​HubSpotのCookieバナーを無効にする

​HubSpotのCookieバナーの同意状態を設定する

グローバルフォームイベント

Cookieを削除

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

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

カテゴリー別ではないCookie

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

UIの例

ボタン

固定位置ボタン

リンク

サードパーティーCookieを手動でブロックする

全般的な変更

例：Google タグ

例：HotJar

サードパーティーのCookie同意

HubSpotのCookieバナーを無効にする

HubSpotのCookieバナーの同意状態を設定する