请参阅使用追踪同意横幅保护隐私。

通过 Progressive Web App （PWA）工具包站点上的跟踪同意横幅来维护购物者的信任。通过横幅，您的购物者可以选择加入或退出 PWA Kit 中包含的默认活动跟踪。

本指南介绍了跟踪同意横幅的默认实施和自定义选项。

混合网店不支持本指南中描述的功能。

Note

前提条件

若要配置和使用跟踪同意横幅，请使用 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 状态设置为的两个值：

effectiveDnt:设置为您配置的默认 DNT 状态，如果未配置默认 DNT 状态，则设置为 false 此。如果购物者同意跟踪或 true 购物者选择退出跟踪，则此值将设置为 false。
selectedDnt:在购物者与同意横幅交互之前未定义。如果购物者同意跟踪或 true 购物者选择退出跟踪，则此值将设置为 false。

横幅和 DNT 工作流程

如果购物者关闭横幅或未在横幅中做出选择，则默认 DNT 状态设置为 false （跟踪活动）。若要更改该行为，请参阅配置默认 DNT 状态。当购物者执行以下任一作后，下次访问您的网站时，横幅会重新出现：

关闭浏览器
刷新站点数据
清除他们的 cookie

此图总结了跟踪同意横幅的行为，以及购物者访问您的网站时如何设置 DNT 状态。

除非另有说明，否则图中的所有步骤都适用于访客购物者和已知购物者。

跟踪同意流程

配置默认 DNT 状态

或者，您可以指定默认的 DNT 状态，当购物者关闭跟踪同意横幅或未在横幅中进行选择时，该状态将适用。为此，请在项目中设置此文件中的 defaultDNT 属性： {overridesDir}/app/components/_app-config/index.jsx。

defaultDnt={true}:表示未跟踪购物者活动。
defaultDnt={false}:表示正在跟踪购物者活动。

在本例中， defaultDnt 设置为 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...

自定义跟踪同意横幅

或者，您可以通过更改部分内容（例如外观或文本）来自定义跟踪同意横幅。为此，您有这两个选择。

使用管理购物者跟踪首选项中所述的 API 和钩子。

或

通过完成这些步骤，覆盖基本模板中的横幅文件。
- 如果尚未执行此作，请在 PWA Kit 项目中创建一个名为 hooks. {overridesDir}/app
- 创建一个在文件夹中 hooks 调用 use-dnt-notification.js 的文件。
- 将此代码复制并粘贴到 use-dnt-notification.js中。在此示例中，我们用于 selectedDnt 呈现由组件控制的 DntNotification 自定义横幅。此外，我们还使用该 updateDnt 函数将购物者的跟踪首选项作为布尔值应用。请参阅 “不跟踪值”。

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}

如果重写 app/components/_app/index.jsx PWA Kit 项目中的文件，请利用 useDntNotification 挂钩显示自定义的跟踪同意横幅。

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}

根据 DNT 状态抑制跟踪

（可选）可以在 PWA Kit 项目中添加代码，以根据购物者的跟踪首选项或默认 DNT 状态触发或阻止作。

用于 effectiveDnt 触发或阻止 API 调用等作。例如，用于访问 Google Analytics 的 API 调用。请参阅 “不跟踪值”。

在此示例中，我们用于 effectiveDnt 触发分析 API 调用，目的是根据购物者与网站的交互收集数据。这些数据可以提供有关购物者行为、网站流量或销售业绩等因素的见解。

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

注意事项

如果购物者选择退出跟踪（DNT 状态设置为 true ）或未设置 DNT 状态：
- Einstein 事件被抑制。这意味着购物者在您网站上的活动不包括在报告 & 仪表板中。
- 如果您按照活动数据中所述启用了该功能，则会收集活动数据指标。但是，所有购物者数据都是匿名的。
PWA Kit 将覆盖您在 Business Manager 的隐私首选项下设置的任何默认跟踪配置。PWA Kit 站点应用以下任一配置：
- PWA Kit 本指南中描述的默认或自定义跟踪配置。
- Shopper Login and API Access Service（SLAS）： 如果您使用 SLAS 自定义了跟踪同意横幅，则您的站点将应用管理购物者跟踪首选项中描述的跟踪配置。

跟踪许可疑难解答

本部分针对您在使用跟踪同意横幅时可能遇到的常见错误提供建议的解决方案。

横幅未显示或行为意外

原因： CSS 或 JavaScript 问题可能会妨碍功能，或导致横幅在某些设备或浏览器上无法正确显示或根本无法显示。

建议的解决方案： 在多个浏览器和设备中测试横幅，以确保功能一致。请特别注意具有更严格 Cookie 政策的浏览器（例如，Safari 的智能跟踪预防）。测试不同的屏幕尺寸和分辨率，以确保横幅广告具有响应性和用户友好性。确认横幅不会干扰任何网站功能或购物者互动。

另请参阅

管理购物者跟踪首选项
Salesforce 帮助：