Shopper Context를 사용하면 구매자 행동에 따라 사이트에 제공되는 프로모션, 가격, 제품 추천 및 콘텐츠를 맞춤화하여 쇼핑 경험을 개인화할 수 있습니다. 예를 들어 구매자가 모바일 기기에서 사이트를 방문하는 경우 10 %할인을 제공합니다.
이름이 지정된useUpdateShopperContext후크는PWA(Progressive Web App) Kit사이트에서 구매자 컨텍스트를 설정하는 데 사용됩니다. PWA Kit에서 Shopper Context의 기본 구현은 개인화 기능의 데모입니다. 이 안내서에 설명된데모 구현에서는 쿼리 매개 변수를 사용하여 PLP(제품 목록 페이지) 콘텐츠 및 프로모션을 변경하는 개인화 체계를 활성화합니다. 사용자 지정 코드로 구현을 확장하여 자신의 개인화 전략에 맞게 조정하십시오.
이 가이드에서는 Shopper Context의 데모 구현과 이를 구성 및 확장하여 PWA Kit 사이트에 대한 개인화 전략을 강화하는 방법에 대해 설명합니다. 이 가이드에서 설명하는 기능은하이브리드 스토어프런트에서 지원되지 않습니다.
변경 사항을 프로덕션에 배포하기 전에 비프로덕션 환경에서 개인화를 테스트하는 것이 좋습니다. Storefront Preview를 사용하여 개인화를 미리 볼 수도 있습니다.
이 가이드의 명령을 실행하기 전에 Placeholder를 실제 값으로 바꿉니다. 자리 표시자는 $PLACEHOLDER와 같은 형식입니다.
이 비디오는 Shopper Context의 데모 구현을 통해 컨텐츠와 프로모션을 개인화하는 방법의 예를 보여줍니다.
:: video {src = “tRLVE69bmVyFsNAWv4LSfo”제목= “PWA Kit의 구매자 컨텍스트”유형= “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 후크 저장소를 복제합니다. 최상위 디렉토리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)용 코드 업로드를 참조하십시오.
사용자 지정 사이트 기본 설정을 추가하여 클라이언트 레지스트리를 구성합니다. 이렇게 하려면 Business Manager에서system-objecttype-extensions.xml를 가져옵니다.
meta/meta으로 이동합니다.system-objecttype-extensions.xml.system-objecttype-extensions.xml클릭합니다 .구성을 업데이트하려면 Business Manager에서 다음을 수행합니다.
all사용합니다.이 예에서는 두 개의 서로 다른 클라이언트 ID에 대해 구매자 컨텍스트 키를 설정합니다.
aaaaaaaa-8536-4a39-acbb-8e7f1759f901의 요청은 구매자 컨텍스트에서 지정된 3개의 키만 설정할 수 있습니다.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}sfcc.shopper-context.rw에 추가합니다. SLAS 클라이언트 만들기를참조하십시오.Shopper Context 데모에서는 쿼리 매개변수를 통해 세트를 사용하여sourceCode특정 고객 그룹에 대한 PLP 및 새로운 프로모션에 대한 컨텐츠 변경을 트리거합니다. URL에 추가하여&sourcecode=instagram PLP에서 데모가 작동하는 것을 볼 수 있습니다.
데모에서는 후크를useUpdateShopperContext사용하여 개인화 캠페인을 트리거합니다. 프로젝트에서 Shopper Context 쿼리 매개 변수를 상수 in 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