구매자 컨텍스트를 사용한 개인화

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 관리자의 Account Manager 역할이 있어야 합니다. 이 역할이 없는 경우 Account Manager 관리자에게 이 역할을 할당해 달라고 요청하세요. Salesforce B2C Commerce 사용자의 Account Manager 관리를 참조하십시오.
  • 아직 승인하지 않았다면구매자 승인 API를설정합니다.
  • 사용할 개인화 유형에 따라 사이트를 설정합니다. 예를 들어 Business Manager에서고객 그룹을설정하여 개인화된 가격 책정, 제품 또는 프로모션에 대한 규칙을 적용할 수 있습니다.
  • 구매자 로그인 및 API 액세스(SLAS) 관리 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 후크 저장소를 복제합니다. 최상위 디렉토리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파일을 만듭니다. 이 예제의 문자열을$실제 값으로 바꾸거나 해당 환경 변수를 설정합니다.

    • 디렉터리에서shopper_context_hooks다음을 실행합니다.

      npm run uploadCartridge

카트리지 업로드에 대한 자세한 내용은Storefront Reference Architecture(SFRA)용 코드 업로드를 참조하십시오.

사용자 지정 사이트 기본 설정을 추가하여 클라이언트 레지스트리를 구성합니다. 이렇게 하려면 Business Manager에서system-objecttype-extensions.xml를 가져옵니다.

  • 관리**** > 사이트 개발 > ****가져오기 & 내보내기로이동합니다.
  • Import Export Files(내보내기 파일 가져오기)에서** Upload(업로드** )를 클릭합니다** .& **
  • 파일 선택을 클릭하십시오.
  • meta/meta으로 이동합니다.
  • 선택합니다 system-objecttype-extensions.xml.
  • 업로드를 클릭하십시오.
  • 파일이 업로드되면 뒤로를 클릭합니다 .
  • 메타데이터(Meta Data ** )에서 가져오기(Import ** )를 클릭합니다 .
  • 다음을선택하고system-objecttype-extensions.xml클릭합니다 .
  • 파일의 유효성을 검사한 후 가져오기를 클릭합니다 .

구성을 업데이트하려면 Business Manager에서 다음을 수행합니다.

  • 판매자 도구** > 사이트 기본 설정** > 맞춤 설정 > ****구매자 컨텍스트 후크 기본 설정으로이동합니다.
  • Client Registry(클라이언트 레지스트리) 필드를 JSON 구성으로 업데이트합니다. 1단계에서 설정한 클라이언트 ID와 클라이언트가 설정할 수 있는 구매자 컨텍스트 키를 입력합니다. ShopperContext 유형에서 사용할 수 있는 키를 입력할 수 있습니다. 스토어프런트 미리 보기에 사용되는 클라이언트 ID와 같이 모든 구매자 컨텍스트 키를 설정할 수 있는 권한이 필요한 클라이언트 ID의 경우 키를all사용합니다.

이 예에서는 두 개의 서로 다른 클라이언트 ID에 대해 구매자 컨텍스트 키를 설정합니다.

  • 클라이언트 ID aaaaaaaa-8536-4a39-acbb-8e7f1759f901의 요청은 구매자 컨텍스트에서 지정된 3개의 키만 설정할 수 있습니다.
  • 클라이언트 ID bbbbbbbb-b5e9-efbc-42f6-584f60fd54ff의 요청은 Shopper Context의 모든 키를 설정할 수 있습니다.

Shopper Context 데모에서는 쿼리 매개변수를 통해 세트를 사용하여sourceCode특정 고객 그룹에 대한 PLP 및 새로운 프로모션에 대한 컨텐츠 변경을 트리거합니다. URL에 추가하여&sourcecode=instagram PLP에서 데모가 작동하는 것을 볼 수 있습니다.

데모에서는 후크를useUpdateShopperContext사용하여 개인화 캠페인을 트리거합니다. 프로젝트에서 Shopper Context 쿼리 매개 변수를 상수 in app/constants.js에SHOPPER_CONTEXT_SEARCH_PARAMS추가하거나 제거하여 쿼리 매개 변수에 의해 트리거되는 고유한 개인화를 달성합니다.

예를 들어 쿼리 매개 변수를 사용하여 설정하려는사용자 지정 특성을추가한 경우 해당 특성을 에 사용자 지정 쿼리 매개 변수app/constants.js로 포함합니다. 이 예제에서는 매개 변수deviceType및storeId를 추가합니다.

선택적으로, Shopper Context의 데모 구현에 있는 것 이상의 개인화를 추가할 수 있습니다. 예를 들어 구매자의 지리적 위치를 기반으로 콘텐츠를 개인화할 수 있습니다.

이 샘플 코드에서는 구매자의 지리적 위치를 가져옵니다. 위치 정보를 얻은 후 선택한 개인화를 적용할 수 있습니다. 예:

  • 미국 뉴욕의 경우: 여성복 20 %할인.
  • 미국 보스턴의 경우: 여성용 상의 15 %할인.

이 섹션에서는 Shopper Context를 사용하는 동안 발생할 수 있는 일반적인 오류에 대해 제안된 솔루션을 제공합니다.

잠재적 원인: Business Manager의 개인화가 올바르게 구성되지 않았습니다.

**제안된 솔루션:**설정한 컨텍스트 트리거가 Business Manager의 개인화 캠페인에 할당되었는지 확인합니다.