買い物客コンテキストによるパーソナライゼーション

Shopper Context では、買い物客の行動に基づいてサイトに配信されるプロモーション、価格設定、商品の推奨、コンテンツを調整することで、ショッピング体験をパーソナライズできます。たとえば、買い物客がモバイルデバイスからサイトにアクセスした場合、10 %割引を提示します。

useUpdateShopperContextという名前のフックは、Progressive Web App (PWA) Kitサイトで買い物客のコンテキストを設定するために使用されます。PWA Kit での買い物客コンテキストの既定の実装は、パーソナライゼーション機能のデモンストレーションです。このガイドで説明するデモの実装では、クエリパラメーターを使用して、商品一覧ページ (PLP) のコンテンツとプロモーションを変更するパーソナル化スキームをアクティブにします。カスタムコードで実装を拡張し、独自のパーソナライゼーション戦略に適合させます。

このガイドでは、Shopper Context のデモ実装と、それを構成および拡張して PWA Kit サイトのパーソナライゼーション戦略を強化する方法について説明します。このガイドで説明する機能は、ハイブリッドストアフロントではサポートされていません。

変更を本番環境にデプロイする前に、本番以外の環境でパーソナライゼーションをテストすることをお勧めします。また、ストアフロントプレビューを使用してパーソナル化をプレビューすることもできます。

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

このビデオでは、Shopper Context のデモ実装を使用してコンテンツとプロモーションをパーソナライズする方法の例を紹介します。

:: video {src = "tRLVE69bmVyFsNAWv4LSfo" title = "PWA Kitの買い物客のコンテキスト" type = "vidyard"}

Shopper Context でパーソナライゼーションを使用するには:

• 以下を使用してサイトを構築します。
  • Retail React App テンプレート
  • Retail React App バージョン 5.0.0 以降
• Business Manager 管理者の Account Manager ロールを持っている。この役割がない場合は、Account Manager 管理者に割り当てを依頼してください。Salesforce B2C Commerce ユーザーの Account Manager の管理を参照してください。
• まだ行っていない場合は、Shopper API の承認を設定します。
• 使用する個人用設定のタイプに基づいてサイトを設定します。たとえば、Business Manager で顧客グループを設定して、パーソナライズされた価格設定、商品、プロモーションにルールを適用できます。

• Shopper Login and API Access (SLAS) Admin UI で、SLAS プライベートクライアントを作成します。「SLAS クライアントの作成」を参照してください。

Business Manager で、

• 買い物客コンテキストの有効化買い物客のコンテキストの設定と取得
• これらのフックの前提条件を満たします。

shopper_context_hooksカートリッジは許可リストとして機能し、パーソナル化キャンペーンに使用するコンテキストのみをクライアントから設定できるようにします。Business Manager で、

• サイトのカートリッジパスにshopper_context_hooksを追加します。このステップでは、サイト開発チームの権限のないメンバーがすべての買い物客のコンテキスト範囲を設定できないようにすることで、サイトのセキュリティを確保します。

  • 管理 > サイト > サイトの管理の順に移動します。
  • このカートリッジを使用するサイトを選択します。サイト識別子の例: RefArch。
  • 設定タブをクリックします。
  • カートリッジフィールドに、新しいカートリッジパスshopper_context_hooksを追加します。app_storefront_baseのパスの前に新しいカートリッジのパスを追加します。 たとえば、shopper_context_hooks:app_storefront_base となります。

• カートリッジを取り付けてアップロードします。

  • Shopper Context hooks リポジトリをクローンします。最上位ディレクトリの名前はshopper_context_hooksです。

  • パッケージの依存関係をインストールするには、shopper_context_hooksディレクトリから次のコマンドを実行します。

    npm install

  • CLIENT_REGISTRYを更新してクライアント ID を構成します。cartridges/shopper_context_hooks/cartridge/scripts/config/clientRegistry.js

  • shopper_context_hooksディレクトリにdw.jsonファイルを作成します。この例の$文字列を実際の値に置き換えるか、対応する環境変数を設定します。

  • 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 で次の操作を行います。

• マーチャントツール > サイト環境設定 > カスタム環境設定 > 買い物客コンテキストフックの環境設定に移動します。
• [Client Registry] フィールドを JSON 構成で更新します。ステップ 1 で設定したクライアント ID と、クライアントが設定できるショッパーコンテキストキーを入力します。ShopperContext 型で使用可能な任意のキーを入力できます。ストアフロントプレビューで使用するクライアント IDなど、すべての買い物客のコンテキストキーを設定する許可が必要なクライアント ID の場合は、キーallを使用します。

この例では、2 つの異なるクライアント ID に Shopper Context キーを設定します。

• クライアント ID aaaaaaaa-8536-4a39-acbb-8e7f1759f901からのリクエストは、ショッパーコンテキストで指定された 3 つのキーのみを設定できます。
• クライアント ID bbbbbbbb-b5e9-efbc-42f6-584f60fd54ffからのリクエストでは、買い物客のコンテキストですべてのキーを設定できます。

• この Shopper Context スコープを SLAS Private Client に追加します: sfcc.shopper-context.rw。「SLAS クライアントの作成」を参照してください。

Shopper Context のデモでは、クエリパラメーターで設定されたsourceCodeを使用して、PLP のコンテンツ変更と、特定の顧客グループの新しいプロモーションをトリガーします。URL に&sourcecode=instagramを追加することで、PLP でデモの動作を確認できます。

このデモでは、useUpdateShopperContextフックを使用してパーソナライゼーションキャンペーンをトリガーします。プロジェクトで、app/constants.jsのSHOPPER_CONTEXT_SEARCH_PARAMS定数で買い物客コンテキストクエリパラメーターを追加または削除して、クエリパラメーターによってトリガーされる独自のパーソナライゼーションを実現します。

たとえば、クエリパラメータを使用して設定したいカスタム属性を追加した場合は、それらをカスタムクエリパラメータとしてapp/constants.jsに含めます。この例では、パラメーターdeviceTypeとstoreIdを追加します。

必要に応じて、Shopper Context のデモ実装の内容以外のパーソナライゼーションを追加できます。たとえば、買い物客の位置情報に基づいてコンテンツをパーソナライズできます。

このサンプルコードでは、買い物客の位置情報を取得します。位置情報を取得したら、選択したパーソナライゼーションを適用できます。たとえば、次のようになります。

• 米国ニューヨークの場合: レディーストップスが 20% 割引。
• 米国ボストンの場合: レディーストップスが 15% 割引。

このセクションでは、Shopper Context の使用中に発生する可能性のある一般的なエラーの解決策を提案します。

考えられる原因: Business Manager のパーソナル化が正しく構成されていない。

**推奨される解決策:**設定したコンテキストトリガーが Business Manager のパーソナル化キャンペーンに割り当てられていることを確認します。

• Shopper Context API ドキュメント
• Cookie によるパーソナライズ
• 条件付きレンダリング
• Page Designer と PWA Kit の統合