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

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.

Note

Prérequis

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.

Mise en œuvre du consentement au suivi par défaut

Interface utilisateur de Banner

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

Ne pas suivre les valeurs

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.

Flux de travail des bannières et des DNT

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

Configurer l’état DNT par défaut

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.

1// More code here...
2
3<CommerceApiProvider
4  shortCode={commerceApiConfig.parameters.shortCode}
5  clientId={commerceApiConfig.parameters.clientId}
6  organizationId={commerceApiConfig.parameters.organizationId}
7  siteId={locals.site?.id}
8  locale={locals.locale?.id}
9  currency={locals.locale?.preferredCurrency}
10  redirectURI={`${appOrigin}/callback`}
11  proxy={`${appOrigin}${commerceApiConfig.proxyPath}`}
12  headers={headers}
13  // Add your chosen default DNT state.
14  defaultDnt={false}
15  // Uncomment 'enablePWAKitPrivateClient' to use SLAS private client login flows.
16  // Make sure to also enable useSLASPrivateClient in ssr.js when enabling this setting.
17  // enablePWAKitPrivateClient={true}
18  logger={createLogger({packageName: 'commerce-sdk-react'})}
19>
20  <MultiSiteProvider site={locals.site} locale={locals.locale} buildUrl={locals.buildUrl}>
21    <ChakraProvider theme={theme}>{children}</ChakraProvider>
22  </MultiSiteProvider>
23  <ReactQueryDevtools />
24</CommerceApiProvider>
25
26// More code here...

Personnaliser la bannière de consentement au suivi

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.

1import React, {useEffect} from 'react'
2import PropTypes from 'prop-types'
3import {FormattedMessage, useIntl} from 'react-intl'
4import {
5  Button,
6  Modal,
7  ModalContent,
8  ModalBody,
9  ModalCloseButton,
10  useDisclosure,
11  Heading,
12  Stack,
13  Text,
14  Flex
15} from '@salesforce/retail-react-app/app/components/shared/ui'
16import {useDNT} from '@salesforce/commerce-sdk-react'
17import {useLocation} from 'react-router-dom'
18
19export const DntNotification = ({isOpen, onOpen, onClose}) => {
20  const {selectedDnt, updateDNT} = useDNT()
21  const {formatMessage} = useIntl()
22  const location = useLocation()
23
24  useEffect(() => {
25    if (selectedDnt === undefined) {
26      onOpen()
27    } else {
28      onClose()
29    }
30  }, [location, selectedDnt])
31
32  const onCloseNotification = () => {
33    updateDNT(null)
34    onClose()
35  }
36
37  return (
38    <Modal
39      size="sm"
40      data-testid="sf-dnt-notification"
41      blockScrollOnMount={false}
42      closeOnOverlayClick={false}
43      trapFocus={false}
44      isOpen={isOpen}
45      onOpen={onOpen}
46      onClose={onCloseNotification}
47    >
48      <ModalContent
49        position="fixed"
50        bottom="4"
51        right="4"
52        maxW="400px"
53        pointerEvents="all"
54        containerProps={{
55          pointerEvents: 'none'
56        }}
57        border="2px solid"
58      >
59        <ModalCloseButton
60          aria-label={formatMessage({
61            id: 'dnt_notification.button.assistive_msg.close',
62            defaultMessage: 'Close consent tracking form'
63          })}
64        />
65        <ModalBody pb={8} bg="white" marginTop={4}>
66          <Heading as="h3" fontSize={25} width="100%" marginBottom={5}>
67            <FormattedMessage
68              defaultMessage="Your Privacy Matters to Us"
69              id="dnt_notification.title"
70            />
71          </Heading>
72          <Flex direction="column">
73            <Text>
74              <FormattedMessage
75                defaultMessage="We collect data to improve your experience, deliver personalized content or ads, and better understand how our site is used. By selecting 'Accept,' you agree to our use of tracking technologies. "
76                id="dnt_notification.description"
77              />
78            </Text>
79            <Stack direction="column" spacing={4} mt={4} align="flex-end">
80              <>
81                <Button
82                  onClick={() => {
83                    updateDNT(true)
84                    onClose()
85                  }}
86                  width="100%"
87                >
88                  <FormattedMessage defaultMessage="Decline" id="dnt_notification.button.decline" />
89                </Button>
90                <Button
91                  onClick={() => {
92                    updateDNT(false)
93                    onClose()
94                  }}
95                  width="100%"
96                >
97                  <FormattedMessage defaultMessage="Accept" id="dnt_notification.button.accept" />
98                </Button>
99              </>
100            </Stack>
101          </Flex>
102        </ModalBody>
103      </ModalContent>
104    </Modal>
105  )
106}
107
108DntNotification.propTypes = {
109  isOpen: PropTypes.bool.isRequired,
110  onOpen: PropTypes.func.isRequired,
111  onClose: PropTypes.func.isRequired
112}
113
114/**
115 *
116 * @returns {Object} - Object props to be passed into the DntNotification component
117 */
118export const useDntNotification = () => {
119  const {isOpen, onOpen, onClose} = useDisclosure()
120
121  return {
122    isOpen,
123    onOpen,
124    onClose
125  }
126}

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.

1import {
2    DntNotification,
3    useDntNotification
4} from '{overridesDir}/app/hooks/use-dnt-notification'
5
6const App = (props) => {
7   ...
8   const dntNotification = useDntNotification()
9   ...
10
11   return (
12        ...
13        // Put the consent tracking banner in your chosen location in your code by adding the dntNotification component.
14        <DntNotification {...dntNotification} />
15        ...
16   )
17}

Supprimer le suivi en fonction de l’état du DNT

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.

1import {useDNT} from '@salesforce/commerce-sdk-react'
2function reportClickTracking() {
3  const {effectiveDnt} = useDNT()
4  if (effectiveDnt) {
5    return
6  }
7  return fetch('https://tracking.example.com/collect')
8}

Considérations

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.

Résoudre les problèmes liés au consentement au suivi

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

La bannière ne s’affiche pas ou le comportement est inattendu

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.