使用購物者情況進行個人化

借助 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 中設置客戶組，以應用個人化定價、產品或促銷的規則。

配置購物者上下文

1. 建立 SLAS 私人用戶端

在購物者登錄和 API 訪問（SLAS）管理 UI 中，創建 SLAS 專用用戶端。請參閱創建 SLAS 用戶端。

2. 啟用購物者上下文和鉤子

在 Business Manager 中：

啟用購物者情況請參閱設置和檢索購物者上下文。
完成這些 Hooks 先決條件。

3. 上傳 shopper_context_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 創建一個檔。將此範例中的字串替換 $ 為實際值或設置相應的環境變數。
1{ 2 "hostname": "$HOST.demandware.net", 3 "username": "$USERNAME", 4 "password": "$PASSWORD", 5 "code-version": "$VERSION" 6}
- 從目錄中 shopper_context_hooks ，運行：
  
  npm run uploadCartridge

有關上傳外掛程式的更多資訊，請參閱 Storefront Reference Architecture （SFRA）的上傳代碼。

4. 設定自訂網站喜好設定。

通過添加自定義網站首選項來配置客戶機註冊表。為此，請在 Business Manager 中匯入 system-objecttype-extensions.xml 。

前往管理 >網站開發 > 導入 & 匯出。
在「導入&導出檔」下，按兩下上傳。
按兩下選擇檔案”
前往 meta/meta。
選擇 system-objecttype-extensions.xml
點擊上傳。
上傳檔後，按兩下返回。
在「元數據」下，按兩下「導入」。
選擇 system-objecttype-extensions.xml 並按下一步。
驗證檔後，按兩下匯入。

5. shopper_context_hooks 從網站首選項更新外掛程式 CLIENT_REGISTRY

要更新配置，請在 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 中設置所有鍵。

1{
2  "aaaaaaaa-8536-4a39-acbb-8e7f1759f901": ["sourceCode", "geoLocation", "deviceType"],
3  "bbbbbbbb-b5e9-efbc-42f6-584f60fd54ff": ["all"]
4}

6. 添加購物者上下文範圍

將此購物者上下文範圍添加到 SLAS 專用用戶端： sfcc.shopper-context.rw。請參閱創建 SLAS 用戶端。

Shopper Context 的演示實現

我們的 Shopper Context 演示通過查詢參數使用 sourceCode 該集來觸發 PLP 上的內容更改和特定客戶組的新促銷。您可以通過添加到 &sourcecode=instagram URL 來查看演示在 PLP 上的運行情況。

在我們的演示中，我們利用 useUpdateShopperContext 鉤子來觸發個人化活動。在您的專案中，在常量 in app/constants.js 中 SHOPPER_CONTEXT_SEARCH_PARAMS 添加或刪除 Shopper Context 查詢參數，以實現由查詢參數觸發的您自己的個人化。

例如，如果添加了要使用查詢參數設置的自定義屬性，請將它們作為自定義查詢參數包含在中 app/constants.js。在這裡示例中，我們添加以下參數： deviceType 和 storeId。

1export const SHOPPER_CONTEXT_SEARCH_PARAMS = {
2   // These are the default query parameters.
3    sourceCode: {paramName: 'sourceCode'},
4    geoLocation: {
5        city: {paramName: 'city'},
6        country: {paramName: 'country'},
7        countryCode: {paramName: 'countryCode'},
8        latitude: {paramName: 'latitude', type: SHOPPER_CONTEXT_FIELD_TYPES.DOUBLE},
9        longitude: {paramName: 'longitude', type: SHOPPER_CONTEXT_FIELD_TYPES.DOUBLE},
10        metroCode: {paramName: 'metroCode'},
11        postalCode: {paramName: 'postalCode'},
12        region: {paramName: 'region'},
13        regionCode: {paramName: 'regionCode'}
14    },
15    // These are examples of custom query parameters that you can optionally add.
16    customQualifiers: {
17        deviceType: {paramName: 'deviceType'}
18    },
19    assignmentQualifiers: {
20        storeId: {paramName: 'storeId'}
21    }
22}, // More code here...

擴展購物者上下文

（可選）您可以在 Shopper Context 的演示實現之外添加個人化。例如，您可以根據購物者的地理位置個人化內容。

在此示例代碼中，我們獲取購物者的地理位置。獲得地理位置后，可以應用所選的個人化設置。舉例來說：

對於美國紐約：女式上衣 20% 折扣。
對於美國波士頓：女式上衣 15% 折扣。

1// ... Default imports in the hook
2import {useEffect, useState} from 'react'
3
4export const useUpdateShopperContext = () => {
5    // ... Default code in the hook
6    const [location, setLocation] = useState({latitude: null, longitude: null})
7
8     // Get the latitude and longitude of the shopper's geolocation using the browser's navigator.geolocation API.
9    const fetchLocation = () => {
10        if (typeof navigator !== 'undefined' && navigator.geolocation) {
11            navigator.geolocation.getCurrentPosition(
12                (position) => {
13                    setLocation({
14                        latitude: position.coords.latitude,
15                        longitude: position.coords.longitude
16                    })
17                },
18                (err) => {
19                    console.error(err.message) // Handle errors gracefully
20                },
21                {
22                    enableHighAccuracy: true, // Try to get the most accurate location
23                    timeout: 10000, // Time in milliseconds before timing out
24                    maximumAge: 60000 // Cache the location for 1 minute
25                }
26            )
27        } else {
28            console.error('Geolocation is not supported by this browser.')
29        }
30    }
31
32    fetchLocation()
33
34    // Update the Shopper Context when the latitude and/or longitude changes.
35    useEffect(() => {
36        if (location.latitude && location.longitude) {
37            const newShopperContext = {
38                geoLocation: {
39                    latitude: location.latitude,
40                    longitude: location.longitude
41                }
42            }
43            handleShopperContextUpdate(shopperContext, newShopperContext)
44        }
45    }, [location.latitude, location.longitude])
46}

購物者上下文疑難解答

本部分針對您在使用 Shopper Context 時可能遇到的常見錯誤提供建議的解決方案。

個人化設置不正確或缺失

潛在原因： Business Manager 中的個人化配置不正確。

建議的解決方案： 確保將您設置的上下文觸發器分配給 Business Manager 中的個人化活動。