使用 Cookie 进行个性化设置

在本教程中，您将学习如何使用服务器端 Cookie 进行个性化设置。例如，您可以根据购物者是新购物者还是回头客显示不同的内容，例如向新购物者提供欢迎优惠横幅，向回头客提供促销优惠横幅。

建议在非生产环境中测试这些步骤，然后再将更改部署到生产环境。

在运行本教程中的命令之前，请将所有占位符替换为实际值。占位符的格式如 $PLACEHOLDER。

前提条件

要完成本教程，请执行以下操作：

使用 PWA Kit 版本 3.1.0 或更高版本。
在本地计算机上，通过完成以下任一步骤来启用服务器端 Cookie：
- 设置环境变量 MRT_ALLOW_COOKIES=true。
  
  或
- 传递 localAllowCookies 给 ssr.js 中的选项 runtime.CreateHandler。
对于所选环境，请使用 Managed Runtime (MRT) API 或 Runtime Admin 启用服务器端 Cookie：
- **MRT API：**调用 projects_target_partial_update API 端点并将 allow_cookies 设置为 true。
- Runtime Admin：在环境设置中启用 Cookie。
在 app/pages/home/index.jsx 中，为新购物者和回头客创建您选择的内容。或者创建适用于不同类别购物者的其他内容。

向新顾客或回头客展示不同的内容

将此 JavaScript 代码添加到项目 app/pages/home/index.jsx 的主页文件中：

1import React, { useState, useEffect } from 'react';
2import Cookies from 'js-cookie'
3
4const Home = () => {
5    const [isNewShopper, setIsNewShopper] = useState();
6
7    useEffect(() => {
8
9        // Find out if the site visitor is a new shopper by checking for the isNewShopper cookie.
10        const isNewShopperCookie = Cookies.get('isNewShopper');
11
12        // If the cookie isn't found, set it on the server and treat the site visitor as a new shopper.
13        setIsNewShopper(isNewShopperCookie != null ? isNewShopperCookie === 'true' : true);
14    }, []);
15
16    return (
17        {isNewShopper ? (
18
19        // Show this message to a new shopper.
20            <h1>Welcome! We're glad you're here.</h1>
21        ) : (
22
23        // Show this message to a returning shopper.
24            <h1>Welcome back!</h1>
25        )}
26
27        // ... Code for the rest of your homepage
28    )
29}

部署您的捆绑包。

最佳实践

在不同的浏览器和设备上彻底测试 Cookie 功能。
在将任何个人信息存储在服务器端 Cookie 中之前，请务必征得购物者的同意。
确保您的个性化方法符合相关的数据隐私法规，例如《通用数据保护条例》(GDPR) 或《加州消费者隐私法案》(CCPA)。
仔细评估个性化对不同购物者群的影响，以避免意外后果。
为 Cookie 设置适当的安全属性，例如用于阻止客户端 JavaScript 访问的 HttpOnly 标志和用于 HTTPS 连接的 Secure 标志。
根据您的需要为 Cookie 设置合理的到期时间。对于 isNewShopper，较长的有效期是合适的。例如，一年。

常见错误疑难解答

本节针对使用服务器端 Cookie 时可能遇到的常见错误提供建议的解决方案。

意外结果

部署涉及服务器端 Cookie 的代码后，您没有得到预期的站点行为。

**原因：**您没有启用服务器端 Cookie。

**建议的解决方案：**启用服务器端 Cookie，如前提条件中所述。

Cookie 过期或删除

用户会话或偏好中断。

**原因：**Cookie 过期或过早删除。

建议的解决方案：

查看 Cookie 的过期设置，并根据需要进行调整，以符合所需的会话或持久性要求。
实施各种机制来检测和处理过期或删除的 Cookie，例如重新验证购物者身份或提示他们重新建立偏好。
监控购物者的反馈和行为，以识别与 Cookie 过期或删除相关的任何模式或问题，并主动解决这些问题。

跨页面的 Cookie 行为不一致

有时，Cookie 在您网站的不同页面或组件中的行为不同，从而导致购物者体验不一致。

**原因：**与 Cookie 相关的逻辑不一致或分散。