Protect Privacy with a Tracking Consent Banner

Preserve shopper trust with a tracking consent banner on your Progressive Web App (PWA) Kit site. With the banner, your shoppers can opt in or out of the default activity tracking included in PWA Kit.

This guide explains the default implementation and customization options for the tracking consent banner.

The functionality described in this guide isn’t supported in a hybrid storefront.

To configure and use the tracking consent banner, build your site with Retail React App version 6.0 or later.

The tracking consent banner is available in template-retail-react-app/app/components/_app/index.jsx, so you can display it on any page on your site. The banner is defined in template-retail-react-app/app/hooks/use-dnt-notification.js.

By default, the banner looks similar to this example.

Tracking Consent Process

These are the two values that define what the DNT state is set to:

  • effectiveDnt: Is set to the default DNT state that you configured or is set to false if you didn't configure a default DNT state. This value is set to false if the shopper consented to tracking or true if the shopper opted out of tracking.
  • selectedDnt: Is undefined until the shopper interacts with the consent banner. This value is set to false if the shopper consented to tracking or true if the shopper opted out of tracking.

If a shopper closes the banner or doesn’t make a selection in the banner, the default DNT state is set to false (track activity). To change that behavior, see Configure the Default DNT State. The banner reappears the next time the shopper visits your site after they take any of these actions:

  • Close the browser
  • Refresh site data
  • Clear their cookies

This diagram summarizes the behavior of the tracking consent banner and how shoppers’ DNT state is set when they visit your site.

Unless otherwise stated, all of the steps in the diagram apply to both guest shoppers and known shoppers.

Tracking Consent Process

Optionally, you can specify a default DNT state that applies if a shopper closes the tracking consent banner or doesn’t make a selection in the banner. To do so, set the defaultDNT property in this file in your project: {overridesDir}/app/components/_app-config/index.jsx.

  • defaultDnt={true}: Indicates that shopper activity isn’t tracked.
  • defaultDnt={false}: Indicates that shopper activity is tracked.

In this example, defaultDnt is set to false.

Optionally, you can customize the tracking consent banner by changing parts of it such as the appearance or text. To do so, you have these two choices.

  1. Use APIs and hooks as described in Manage Shopper Tracking Preferences.

or

  1. Override the banner file in the base template by completing these steps.

    • If you haven’t done so already, in your PWA Kit project, create a folder called hooks in {overridesDir}/app.
    • Create a file called use-dnt-notification.js in the hooks folder.
    • Copy and paste this code into use-dnt-notification.js. In this example, we use selectedDnt to render a customized banner that's controlled by the DntNotification component. Also, we use the updateDnt function to apply a shopper's tracking preference as a boolean. See Do Not Track Values.
  • If you overrode the app/components/_app/index.jsx file in your PWA Kit project, utilize the useDntNotification hook to display your customized tracking consent banner.

Optionally, you can add code in your PWA Kit project to trigger or prevent actions based on a shopper's tracking preference or your default DNT state.

Use effectiveDnt to trigger or prevent actions such as API calls. For example, API calls to access Google Analytics. See Do Not Track Values.

In this example, we use effectiveDnt to trigger an analytics API call with the goal of gathering data based on a shopper's interactions with a site. The data can provide insights about factors such as shopper behavior, website traffic, or sales performance.

  • If a shopper opts out of tracking (the DNT state is set to true) or the DNT state isn’t set:

    • Einstein events are suppressed. This means that a shopper’s activity on your site isn’t included in Reports & Dashboards.
    • Active Data metrics are collected if you enabled the feature as described in Active Data. However, all shopper data is anonymized.

  • PWA Kit overrides any default tracking configuration that you set under privacy preferences in Business Manager. Your PWA Kit site applies either of these configurations:

    • PWA Kit: The default or custom tracking configuration described in this guide.
    • Shopper Login and API Access Service(SLAS): If you customized the tracking consent banner using SLAS, your site applies the tracking configuration described in Manage Shopper Tracking Preferences.

This section provides a suggested solution for a common error that you can encounter while using the tracking consent banner.

Cause: CSS or JavaScript issues can hamper functionality or cause the banner to display incorrectly or not at all on certain devices or browsers.

Suggested Solution: Test the banner in multiple browsers and devices to ensure consistent functionality. Pay particular attention to browsers with stricter cookie policies (for example, Safari’s Intelligent Tracking Prevention). Test different screen sizes and resolutions to ensure that the banner is responsive and user-friendly. Confirm that the banner doesn’t interfere with any site functionality or shopper interactions.