Protect Privacy with a Tracking Consent Banner (追跡同意バナーによるプライバシーの保護) を参照してください。

Progressive Web App (PWA) Kitのサイトに追跡同意バナーを表示して、買い物客の信頼を維持します。バナーを使用すると、買い物客は PWA Kit に含まれるデフォルトのアクティビティ追跡をオプトインまたはオプトアウトできます。

このガイドでは、トラッキング同意バナーのデフォルトの実装とカスタマイズオプションについて説明します。

このガイドで説明する機能は、ハイブリッドストアフロントではサポートされていません。

追跡同意バナーを構成して使用するには、Retail React Appバージョン 6.0 以降でサイトを構築します。

トラッキング同意バナーはtemplate-retail-react-app/app/components/_app/index.jsxで利用できるため、サイトのどのページにも表示できます。バナーはtemplate-retail-react-app/app/hooks/use-dnt-notification.jsで定義されます。

既定では、バナーは次の例のようになります。

同意プロセスの追跡

これらは、DNT 状態の設定を定義する 2 つの値です。

  • effectiveDnt:設定したデフォルトの DNT 状態に設定されるか、デフォルトの DNT 状態を設定しなかった場合はfalseに設定されます。この値は、買い物客が追跡に同意した場合はfalseに設定され、買い物客が追跡をオプトアウトした場合はtrueに設定されます。
  • selectedDnt:買い物客が同意バナーを操作するまで未定義です。この値は、買い物客が追跡に同意した場合はfalseに設定され、買い物客が追跡をオプトアウトした場合はtrueに設定されます。

買い物客がバナーを閉じた場合、またはバナーで選択を行わなかった場合、デフォルトの DNT 状態はfalse (アクティビティの追跡) に設定されます。この動作を変更するには、デフォルトの DNT 状態の設定を参照してください。このバナーは、買い物客が以下のいずれかの操作を行った後に次回サイトを訪問したときに再表示されます。

  • ブラウザを閉じます
  • サイトデータの更新
  • Cookie を消去する

以下の図は、追跡同意バナーの動作と、買い物客がサイトを訪問したときの DNT 状態の設定方法をまとめたものです。

特に明記されていない限り、この図のすべてのステップは、ゲスト買い物客と既知の買い物客の両方に適用されます。

同意プロセスの追跡

必要に応じて、買い物客が追跡同意バナーを閉じた場合、またはバナーで選択を行わなかった場合に適用されるデフォルトの DNT 状態を指定できます。これを行うには、プロジェクトのこのファイルのdefaultDNTプロパティ{overridesDir}/app/components/_app-config/index.jsxを設定します。

  • defaultDnt={true}:買い物客のアクティビティが追跡されないことを示します。
  • defaultDnt={false}:買い物客のアクティビティが追跡されることを示します。

この例では、defaultDntはfalseに設定されています。

必要に応じて、追跡同意バナーの外観やテキストなどの一部を変更することでカスタマイズできます。そのためには、次の 2 つの選択肢があります。

  1. 「買い物客の追跡環境設定の管理」の説明に従って API とフックを使用します。

または

  1. 基本テンプレートのバナー ファイルを上書きするには、次の手順を実行します。

    • まだ行っていない場合は、PWA Kit プロジェクトにhooks in {overridesDir}/appというフォルダーを作成します。
    • hooksフォルダーにuse-dnt-notification.jsというファイルを作成します。
    • このコードをコピーしてuse-dnt-notification.jsに貼り付けます。この例では、selectedDntを使用して、DntNotificationコンポーネントによって制御されるカスタマイズされたバナーをレンダリングします。また、updateDnt関数を使用して、買い物客の追跡設定をブール値として適用します。「Do Not Track値」を参照してください。
  • PWA Kit プロジェクトでapp/components/_app/index.jsxファイルを上書きした場合は、useDntNotificationフックを使用して、カスタマイズした追跡同意バナーを表示します。

必要に応じて、PWA Kit プロジェクトにコードを追加し、買い物客の追跡環境設定やデフォルトの DNT 状態に基づいてアクションをトリガーまたは防止できます。

effectiveDntを使用して、API 呼び出しなどのアクションをトリガーまたは防止します。たとえば、Google アナリティクスにアクセスするための API 呼び出しなどです。「Do Not Track値」を参照してください。

この例では、effectiveDntを使用して、買い物客のサイトとのインタラクションに基づいてデータを収集することを目的とした分析 API 呼び出しをトリガーします。このデータは、買い物客の行動、Web サイトのトラフィック、販売実績などの要因に関する分析情報を提供できます。

  • 買い物客が追跡をオプトアウトした場合 (DNT 状態がtrueに設定されている場合)、または DNT 状態が設定されていない場合:

    • Einstein イベントは抑制されます。つまり、サイトでの買い物客のアクティビティはReports & Dashboardsには含まれません。
    • アクティブデータのメトリクスは、アクティブデータの説明に従って機能を有効にした場合に収集されます。ただし、買い物客のデータはすべて匿名化されます。

  • PWA Kit は、Business Manager のプライバシー環境設定で設定したデフォルトの追跡構成を上書きします。PWA Kit サイトでは、次のいずれかの構成が適用されます。

    • PWA Kitこのガイドで説明するデフォルトまたはカスタムのトラッキング設定。
    • Shopper Login and API Access Service (SLAS) の概要 SLAS を使用して追跡同意バナーをカスタマイズした場合、サイトでは「買い物客の追跡環境設定の管理」に記載されている追跡構成が適用されます。

このセクションでは、追跡同意バナーの使用中に発生する可能性のある一般的なエラーの解決策を提案します。

原因: CSS や JavaScript の問題により、特定のデバイスやブラウザーで機能が妨げられたり、バナーが正しく表示されなかったり、まったく表示されなかったりすることがあります。

**推奨される解決策:**バナーを複数のブラウザーとデバイスでテストして、機能に一貫性があることを確認します。より厳格なCookieポリシー(Safariのインテリジェントトラッキング防止など)を備えたブラウザには特に注意してください。さまざまな画面サイズと解像度をテストして、バナーが応答性が高く、ユーザーフレンドリーであることを確認します。バナーがサイトの機能や買い物客のインタラクションの妨げにならないことを確認します。