Cookie によるパーソナライズ

このチュートリアルでは、サーバー側の Cookie を使用してパーソナライゼーションを行う方法を学習します。たとえば、新規買い物客にはウェルカムオファーバナーを、リピート買い物客にはプロモーションオファーバナーを表示するなど、買い物客が新規か再訪問かによって異なるコンテンツを表示できます。

変更を本番環境にデプロイする前に、非本番環境で手順をテストすることをお勧めします。

このチュートリアルのコマンドを実行する前に、プレースホルダーを実際の値に置き換えてください。プレースホルダーは $PLACEHOLDER の形式になっています。

前提条件

このチュートリアルを完了するには、まず次の操作を行う必要があります。

PWA Kit バージョン 3.1.0 以降を使用します。
ローカルマシンで、次のいずれかの手順を実行して、サーバー側の Cookie を有効にします。
- 環境変数 MRT_ALLOW_COOKIES=true を設定します。
  
  または
- ssr.js の runtime.CreateHandler のオプションに localAllowCookies渡します。
目的の環境で、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 に個人情報を保存する前に、必ず買い物客の同意を得てください。
パーソナライゼーションのためのアプローチが、EU 一般データ保護規則 (GDPR) やカリフォルニア州消費者プライバシー法 (CCPA) などの関連するデータプライバシー規制に準拠していることを確認します。
パーソナライゼーションがさまざまな買い物客セグメントに与える影響を慎重に評価し、意図しない結果を回避します。
クライアント側の JavaScript アクセスを防止する HttpOnly フラグや、HTTPS 接続の Secure フラグなど、適切なセキュリティ属性を Cookie に設定します。
必要に応じて、妥当な有効期限を Cookie に設定します。isNewShopper には、長い有効期限が適しています。たとえば、1 年です。

一般的なエラーのトラブルシューティング

このセクションでは、サーバー側の Cookie の使用中に発生する可能性のある一般的なエラーに対して推奨される解決策を示します。

予期しない結果

サーバー側の Cookie を含むコードをデプロイした後で、期待したサイト動作が得られませんでした。

原因: サーバー側の Cookie を有効にしていません。

推奨される解決策: 前提条件の説明に従って、サーバー側の Cookie を有効にします。

Cookie の有効期限切れまたは削除

ユーザーセッションまたは環境設定に中断があります。

原因: Cookie の有効期限が切れたか、途中で削除されました。

推奨される解決策:

Cookie の有効期限設定を確認し、必要に応じて調整して、目的のセッションまたは永続性の要件に合わせます。
期限切れまたは削除された Cookie を適切に検出して処理するメカニズムを実装します。たとえば、買い物客を再度認証したり、環境設定を再度行うように促したりするなどです。
買い物客のフィードバックと行動をモニタリングして、Cookie の期限切れや削除に関連するパターンや問題を特定し、プロアクティブに対処します。

ページ間で一貫性のない Cookie の動作

Cookie は、サイトのページやコンポーネントによって動作が異なることがあり、買い物客の体験に一貫性がなくなることがあります。

原因: Cookie 関連のロジックに一貫性がない、または分散化されています。