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 でパーソナライゼーションを使用するには:
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ファイルを作成します。この例の$文字列を実際の値に置き換えるか、対応する環境変数を設定します。
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) のコードのアップロード」を参照してください。
カスタム・サイト環境設定を追加して、クライアント・レジストリーを構成します。これを行うには、Business Manager でsystem-objecttype-extensions.xmlをインポートします。
meta/meta に移動します。system-objecttype-extensions.xml。system-objecttype-extensions.xmlを選択して、次へをクリックします。構成を更新するには、Business Manager で次の操作を行います。
allを使用します。この例では、2 つの異なるクライアント ID に Shopper Context キーを設定します。
aaaaaaaa-8536-4a39-acbb-8e7f1759f901からのリクエストは、ショッパーコンテキストで指定された 3 つのキーのみを設定できます。bbbbbbbb-b5e9-efbc-42f6-584f60fd54ffからのリクエストでは、買い物客のコンテキストですべてのキーを設定できます。1{
2 "aaaaaaaa-8536-4a39-acbb-8e7f1759f901": ["sourceCode", "geoLocation", "deviceType"],
3 "bbbbbbbb-b5e9-efbc-42f6-584f60fd54ff": ["all"]
4}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を追加します。
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 のデモ実装の内容以外のパーソナライゼーションを追加できます。たとえば、買い物客の位置情報に基づいてコンテンツをパーソナライズできます。
このサンプルコードでは、買い物客の位置情報を取得します。位置情報を取得したら、選択したパーソナライゼーションを適用できます。たとえば、次のようになります。
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 のパーソナル化キャンペーンに割り当てられていることを確認します。
j