根据购物者情况进行个性化

借助 Shopper Context，您可以根据购物者行为定制促销、定价、产品推荐和交付到您网站的内容，从而个性化购物体验。例如，如果购物者通过移动设备访问您的网站，请为他们提供 10% 折。

命名 useUpdateShopperContext 的钩子用于在 Progressive Web App （PWA） Kit 站点中设置购物者上下文。PWA Kit 中购物者上下文的默认实现是个性化功能的演示。在本指南中描述的 演示实现 中，我们使用查询参数来激活更改产品列表页面 （PLP） 内容和促销的个性化方案。使用自定义代码扩展我们的实施，以匹配您自己的个性化策略。

本指南介绍了购物者上下文的演示实现，以及如何配置和扩展它以支持 PWA Kit 站点的个性化策略。混合网店不支持本指南中描述的功能。

我们建议在非生产环境中测试个性化，然后再将更改部署到生产环境。您还可以使用 Storefront Preview 预览您的个性化设置。

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

此视频展示了如何使用 Shopper Context 的演示实现个性化内容和促销的示例。

::视频{src=“tRLVE69bmVyFsNAWv4LSfo”标题=“Shopper Context in PWA Kit”类型=“vidyard”}

要将个性化与 Shopper Context 结合使用：

• 使用以下命令构建站点：
  • Retail React App 模板
  • Retail React App 版本 5.0.0 或更高版本
• 具有 Business Manager 管理员的 Account Manager 角色。如果您没有此角色，请让您的 Account Manager 管理员将其分配给您。请参阅为 Salesforce B2C Commerce 用户管理 Account Manager。
• 如果尚未这样做，请 为购物者 API 设置授权。
• 根据要使用的个性化类型设置站点。例如，在 Business Manager 中设置 客户组 ，以应用个性化定价、产品或促销的规则。

• 在购物者登录和 API 访问 （SLAS） 管理 UI 中，创建 SLAS 专用客户端。请参阅 创建 SLAS 客户端。

在 Business Manager 中：

• 启用购物者情况请参阅 设置和检索购物者上下文。
• 完成这些 Hooks 先决条件。

该 shopper_context_hooks 插件充当允许列表，以确保只能从客户端设置要用于个性化活动的上下文。在 Business Manager 中：

• 添加到 shopper_context_hooks 站点的插件路径。此步骤通过防止站点开发团队中未经授权的成员设置所有购物者上下文范围来确保站点安全。

  • 前往 管理 > 站点 > 管理站点 。
  • 选择要使用此插件的站点。站点标识符示例： RefArch。
  • 单击设置选项卡。
  • 在“墨盒”字段中，添加新的墨盒路径 shopper_context_hooks。在 的路径 app_storefront_base之前添加新的插件路径。 例如：shopper_context_hooks:app_storefront_base

• 安装并上传插件。

  • 克隆 Shopper Context 挂钩存储库。顶级目录 shopper_context_hooks的名称是 。

  • 若要安装包依赖项，请从 shopper_context_hooks 目录中运行：

    npm install

  • 通过更新 CLIENT_REGISTRY 来配置客户端 ID cartridges/shopper_context_hooks/cartridge/scripts/config/clientRegistry.js

  • dw.json 在目录中 shopper_context_hooks 创建一个文件。将此示例中的字符串替换 $ 为实际值或设置相应的环境变量。

  • 从目录中 shopper_context_hooks ，运行：

    npm run uploadCartridge

有关上传插件的更多信息，请参阅 Storefront Reference Architecture （SFRA） 的上传代码。

通过添加自定义站点首选项来配置客户机注册表。为此，请在 Business Manager 中导入 system-objecttype-extensions.xml 。

• 前往 管理 > 站点开发 > 导入 & 导出。
• 在**“导入与导出文件”项下，单击上传**。
• 点击选择文件。
• 前往 meta/meta。
• 选择 system-objecttype-extensions.xml。
• 点击上传。
• 上传文件后，单击“返回 ”。
• 在**“元数据”项下，单击导入**。
• 选择 system-objecttype-extensions.xml 并单击 下一步。
• 验证文件后，单击 “导入”。

要更新配置，请在 Business Manager 中：

• 前往 商家工具 > 站点首选项 > 自定义首选项 > 购物者上下文挂钩首选项 首选项。
• 使用 JSON 配置更新“客户端注册表”字段。输入在步骤 1 中设置的客户端 ID 和客户端可以设置的 Shopper Context 键。可以输入 ShopperContext 类型中可用的任何键。对于需要设置所有 Shopper Context 键的权限的客户端 ID，例如 用于 Storefront Preview 的客户端 ID ，请使用密钥 all。

在此示例中，我们为两个不同的客户端 ID 设置 Shopper Context 键。

• 来自客户端 ID aaaaaaaa-8536-4a39-acbb-8e7f1759f901 的请求只能在购物者上下文中设置 3 个指定的键。
• 来自客户端 ID bbbbbbbb-b5e9-efbc-42f6-584f60fd54ff 的请求可以在 Shopper Context 中设置所有键。

• 将此购物者上下文范围添加到 SLAS 专用客户端： sfcc.shopper-context.rw。请参阅 创建 SLAS 客户端。

我们的 Shopper Context 演示通过查询参数使用 sourceCode 该集来触发 PLP 上的内容更改和特定客户组的新促销。您可以通过添加到 &sourcecode=instagram URL 来查看演示在 PLP 上的运行情况。

在我们的演示中，我们利用 useUpdateShopperContext 钩子来触发个性化活动。在您的项目中，在常量 in app/constants.js 中 SHOPPER_CONTEXT_SEARCH_PARAMS 添加或删除 Shopper Context 查询参数，以实现由查询参数触发的您自己的个性化。

例如，如果添加了要使用查询参数设置的 自定义属性 ，请将它们作为自定义查询参数包含在 中 app/constants.js。在此示例中，我们添加以下参数： deviceType 和 storeId。

（可选）您可以在 Shopper Context 的演示实现之外添加个性化。例如，您可以根据购物者的地理位置个性化内容。

在此示例代码中，我们获取购物者的地理位置。获得地理位置后，可以应用所选的个性化设置。例如：

• 对于美国纽约：女式上衣 20% 折扣。
• 对于美国波士顿：女式上衣 15% 折扣。

本部分针对您在使用 Shopper Context 时可能遇到的常见错误提供建议的解决方案。

潜在原因： Business Manager 中的个性化配置不正确。

建议的解决方案： 确保将您设置的上下文触发器分配给 Business Manager 中的个性化活动。

• Shopper Context API 文档
• 使用 Cookie 进行个性化设置
• 条件渲染
• 将 Page Designer 与 PWA Kit 集成