使用 Cookie 進行個人化

在本教學中，您將學習如何使用伺服器端 Cookie 進行個人化設定。例如，您可以根據購物者是新購物者還是回頭客顯示不同的內容，像是向新購物者顯示歡迎優惠橫幅，向回頭客顯示促銷優惠橫幅。

建議在非 Production 環境中測試這些步驟，然後再將變更部署到生產 Production 環境。

在執行本教學的命令之前，請以實際值取代預留位置。預留位置的格式為：$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 相關的邏輯不一致或分散。