Voir Protect Privacy with a Tracking Consent Banner (Protéger la confidentialité avec une bannière de consentement au suivi). | Construire votre site | Composable Storefront

Préservez la confiance des acheteurs avec une bannière de consentement au suivi sur votre site de kit Progressive Web App (PWA). Avec la bannière, vos acheteurs peuvent activer ou désactiver le suivi d’activité par défaut inclus dans PWA Kit.

Ce guide explique les options d’implémentation et de personnalisation par défaut de la bannière de consentement au suivi.

La fonctionnalité décrite dans ce guide n’est pas prise en charge dans une boutique hybride.

Pour configurer et utiliser la bannière de consentement au suivi, créez votre site avec Retail React App version 6.0 ou ultérieure.

La bannière de consentement au suivi est disponible en template-retail-react-app/app/components/_app/index.jsx, vous pouvez donc l’afficher sur n’importe quelle page de votre site. La bannière est définie dans template-retail-react-app/app/hooks/use-dnt-notification.js.

Par défaut, la bannière ressemble à cet exemple.

Suivi du processus de consentement

Ce sont les deux valeurs qui définissent ce que l’état DNT est défini :

effectiveDnt: Est défini sur l’état DNT par défaut que vous avez configuré ou sur lequel vous avez false configuré si vous n’avez pas configuré d’état DNT par défaut. Cette valeur est définie si l’acheteur false a consenti au suivi ou true s’il a choisi de ne pas le suivre.
selectedDnt: Elle n’est pas définie tant que l’acheteur n’a pas interagi avec la bannière de consentement. Cette valeur est définie si l’acheteur false a consenti au suivi ou true s’il a choisi de ne pas le suivre.

Si un acheteur ferme la bannière ou n’effectue pas de sélection dans la bannière, l’état DNT par défaut est défini sur false (suivre l’activité). Pour modifier ce comportement, reportez-vous à la section Configurer l’état DNT par défaut. La bannière réapparaît la prochaine fois que l’acheteur visite votre site après avoir effectué l’une des actions suivantes :

Fermez le navigateur
Actualiser les données du site
Effacer leurs cookies

Ce diagramme résume le comportement de la bannière de consentement au suivi et la façon dont l’état DNT des acheteurs est défini lorsqu’ils visitent votre site.

Sauf indication contraire, toutes les étapes du diagramme s’appliquent à la fois aux acheteurs invités et aux acheteurs connus.

Suivi du processus de consentement

Si vous le souhaitez, vous pouvez spécifier un état DNT par défaut qui s’applique si un acheteur ferme la bannière de consentement au suivi ou n’effectue pas de sélection dans la bannière. Pour ce faire, définissez la defaultDNT propriété dans ce fichier de votre projet : {overridesDir}/app/components/_app-config/index.jsx.

defaultDnt={true}: Indique que l’activité des acheteurs n’est pas suivie.
defaultDnt={false}: Indique que l’activité des acheteurs fait l’objet d’un suivi.

Dans cet exemple, defaultDnt est défini sur false.

Si vous le souhaitez, vous pouvez personnaliser la bannière de consentement au suivi en modifiant certaines parties de celle-ci, telles que l’apparence ou le texte. Pour ce faire, vous avez ces deux choix.

Utilisez les API et les hooks comme décrit dans Gérer les préférences de suivi des acheteurs.

Remplacez le fichier de bannière dans le modèle de base en procédant comme suit.
- Si vous ne l’avez pas déjà fait, dans votre projet PWA Kit, créez un dossier appelé hooks dans {overridesDir}/app.
- Créez un fichier appelé use-dnt-notification.js dans le hooks dossier.
- Copiez et collez ce code dans use-dnt-notification.js. Dans cet exemple, nous l’utilisons selectedDnt pour afficher une bannière personnalisée contrôlée par le DntNotification composant. En outre, nous utilisons la fonction pour appliquer la updateDnt préférence de suivi d’un acheteur en tant que booléen. Voir Ne pas suivre les valeurs.

Si vous avez remplacé le app/components/_app/index.jsx fichier dans votre projet PWA Kit, utilisez le useDntNotification hook pour afficher votre bannière personnalisée de consentement au suivi.

Si vous le souhaitez, vous pouvez ajouter du code dans votre projet PWA Kit pour déclencher ou empêcher des actions en fonction de la préférence de suivi d’un acheteur ou de votre état DNT par défaut.

Permet effectiveDnt de déclencher ou d’empêcher des actions telles que les appels d’API. Par exemple, les appels API pour accéder à Google Analytics. Voir Ne pas suivre les valeurs.

Dans cet exemple, nous l’utilisons effectiveDnt pour déclencher un appel d’API Analytics dans le but de collecter des données basées sur les interactions d’un acheteur avec un site. Les données peuvent fournir des informations sur des facteurs tels que le comportement des acheteurs, le trafic sur le site Web ou les performances des ventes.

Si un acheteur refuse le suivi (l’état DNT est défini sur true) ou si l’état DNT n’est pas défini :
- Les événements Einstein sont supprimés. Cela signifie que l’activité d’un acheteur sur votre site n’est pas incluse dans les tableaux de bord Rapports&.
- Les mesures Active Data sont collectées si vous avez activé la fonctionnalité comme décrit dans Active Data. Cependant, toutes les données des acheteurs sont anonymisées.
PWA Kit remplace toute configuration de suivi par défaut que vous avez définie dans les préférences de confidentialité de Business Manager. Votre site PWA Kit applique l’une des configurations suivantes :
- PWA Kit La configuration de suivi par défaut ou personnalisée décrite dans ce guide.
- Shopper Login and API Access Service (SLAS) : Si vous avez personnalisé la bannière de consentement au suivi à l’aide de SLAS, votre site applique la configuration de suivi décrite dans Gérer les préférences de suivi des acheteurs.

Cette section propose une solution à une erreur courante que vous pouvez rencontrer lors de l’utilisation de la bannière de consentement au suivi.

Cause : Des problèmes CSS ou JavaScript peuvent entraver le fonctionnement ou entraîner un affichage incorrect ou incorrect de la bannière sur certains appareils ou navigateurs.

Solution suggérée : Testez la bannière dans plusieurs navigateurs et appareils pour vous assurer qu’elle fonctionne correctement. Portez une attention particulière aux navigateurs ayant des politiques de cookies plus strictes (par exemple, la prévention intelligente du suivi de Safari). Testez différentes tailles et résolutions d’écran pour vous assurer que la bannière est réactive et conviviale. Vérifiez que la bannière n’interfère pas avec les fonctionnalités du site ou les interactions avec les acheteurs.