온사이트 제품 추천 시작하기

학습 내용

Klaviyo 고객 허브 서랍을 넘어 Klaviyo의 온사이트 개인화를 확장할 수 있도록, 개인화된 상품 추천 블록을 상품 상세 페이지(PDP)에 직접 추가하는 방법을 알아보세요. 이 가이드에서는 삽입형 블록이 하는 일, 구성 및 디자인 방법, 시간이 지남에 따라 기능이 어떻게 단계적으로 출시되는지, 구현 방식의 기술적 트레이드오프를 다룹니다.

임베디드 제품 추천은 설계상 특정 커머스 플랫폼에 종속되지 않으며, 처음에는 PDP에 중점을 두고 최종적으로 사이트의 모든 페이지에서 호스팅할 수 있어요. 이 기능에 대한 피드백은 Klaviyo 고객 허브 제품 팀에 문의해 주세요.

시작하기 전에 알아야 할 것

• 요구 사항: 이 블록을 사용하려면 Klaviyo에서 Klaviyo 고객 허브를 활성화해야 해요.
• 플랫폼 지원: 현재 Shopify(테마 앱 블록으로), Shopify Plus(삽입 가능한 코드 조각으로), Salesforce Commerce Cloud(SFRA 지원만)에서 사용할 수 있어요. 추가 플랫폼 지원이 계획되어 있어요.
• 엔진 종속성: 추천 품질은 Klaviyo의 추천 엔진에 의해 결정돼요. 이전 시스템에서는 익명 방문자에게 맞춤 추천을 제공할 수 없었는데, 이제 차세대 추천 서비스로 추천을 제공하고 있어요. 이는 이전 시스템에서 업그레이드된 버전이에요.

참고: 온사이트 제품 추천은 이전에는 Hub 서랍에서만 사용할 수 있었고, 로그인한 사용자에게만 제공되었어요. 이 기능을 통해 추천이 Hub 서랍을 벗어나 PDP에 표시돼요.

임베드된 제품 추천으로 할 수 있는 작업

임베디드 제품 추천 블록을 사용하면 제품 상세 페이지에 관련 제품을 바로 노출할 수 있어, 알려진 방문자든 익명 방문자든 모든 방문자가 자신에게 관련된 항목을 볼 수 있어요.

• 사이트 스타일에 맞추기: 블록이 테마의 기본 요소처럼 느껴지도록 글꼴, 색상, 레이아웃, 버튼 스타일을 맞춤 설정하세요. 모든 Klaviyo 고객 허브 요소, 모든 임베드된 블록 또는 추천 블록만을 대상으로 하는 맞춤 CSS 클래스를 추가하세요. 블록 헤더(예: “추천 상품” 또는 “이 상품도 좋아하실 거예요”)를 편집하고 캐러셀 스타일 레이아웃을 선택하세요.
• 알려진 방문자에게 추천을 개인화: 추천은 Next Gen Product Recommendations(NGPRS) 서비스가 제공하는 프로필에 대한 Klaviyo의 정보를 기반으로 합니다.
• 모든 방문자에게 무언가를 보여주세요: 익명 방문자는 기본적으로 Shopify에서 가져온 일반적인 제품 추천을 보게 돼요.
• 페이지 성능을 해치지 않고 빠르게 로드: 이 블록은 추가 코드로 페이지를 무겁게 만들지 않고 처음부터 빠르게 로드되도록 설계되어, 사이트 속도를 늦추거나 성능 점수에 악영향을 주지 않아요.
• 참여 유도 및 매출 측정: 모든 클릭은 Clicked Product 이벤트로 추적되며 허브 서랍 내 상품 클릭과 동일한 방식으로 어트리뷰션되므로 조회, 클릭, 어트리뷰션된 매출을 측정할 수 있어요.
• 경험을 일관되게 유지하세요: 알려져 있거나 식별된 방문자는 Hub 서랍과 PDP에서 동일한 추천을 볼 수 있어요.
• 쇼핑객이 나중에 제품을 저장할 수 있도록 하기: 쇼핑객은 아직 구매할 준비가 되지 않았다면 카드에서 바로 추천 제품을 즐겨찾기에 추가하거나 장바구니에 담을 수 있어요.
• 장바구니에 이미 있는 상품은 추천하지 마세요: 쇼핑객의 장바구니에 이미 있는 상품은 해당 쇼핑객에게 표시되는 추천에서 제외돼요.

새 임베드형 제품 추천 블록 만들기

이것은 새 임베드형 블록이에요. 더 광범위한 임베드형 개인화 콘텐츠 블록 프레임워크를 통해서가 아니라, 즐겨찾기 및 FAQ 같은 다른 임베드형 블록과 동일한 방식으로 설정하세요.

1. 블록 라이브러리에 액세스하세요:Klaviyo의 왼쪽 탐색 메뉴에서 서비스 > Klaviyo 고객 허브 로 이동하세요. 디자인 > 온사이트 블록을 클릭하세요. 블록 라이브러리에서 상품 추천 을 찾아 상품 페이지에 추가해 주세요.
   1. Navigate to Service > Customer Hub in Klaviyo's left-hand navigation. Click Design > Onsite blocks. Find Product recommendations in the block library and add it to your product page.
2. 추천 소스를 구성하세요:방문자 상태에 따라 추천이 채워지고 필터링되는 방식을 선택하세요:로그인 및 식별된 방문자: Klaviyo(기본값) 또는 Shopify.익명 방문자: Shopify(기본값이며, 현재 사용할 수 있는 유일한 옵션이에요). 이 소스는 익명 방문자를 위한 허브 드로어 추천에도 사용돼요.품절 상품 필터링: 켜기/끄기를 전환하세요.쇼퍼의 장바구니에 이미 담긴 제품 필터링: 켜기/끄기를 전환해요.
   1. Choose how recommendations will be populated and filtered based on the visitor state:
      1. Logged-in and identified visitors: Klaviyo (default) or Shopify.
      2. Anonymous visitors: Shopify (default, and currently the only option). This source also powers Hub drawer recommendations for anonymous visitors.
      3. Filter out-of-stock products: Toggle On / Off.
      4. Filter products already in the shopper's cart: Toggle On / Off.
3. 디자인 및 맞춤 설정:블록이 사이트에 자연스럽게 어울리도록 시각적 설정을 조정해 주세요:요소: 가격(기본적으로 표시), 즐겨찾기 버튼(기본적으로 표시), 장바구니 추가 버튼(기본적으로 숨김), 제품 같은 이메일의 다른 버전(기본적으로 숨김)을 표시하거나 숨겨요.버튼: 스타일(둥근, 각진, 곡선형), 색상, 텍스트 색상, 텍스트 대소문자를 선택하세요.레이아웃: 최대 너비, 최대 제품 수(1~10, 기본값 4), 패딩(상단, 왼쪽, 오른쪽, 하단), 그리고 여백(제목과 제품 행 사이, 제품 간)을 설정하세요. 이미지 크기(너비, 높이)와 맞춤(덮기, 포함, 채우기)을 구성하세요.글꼴: 헤더 글꼴, 제품명 글꼴, 가격 글꼴, 같은 이메일의 다른 버전 글꼴의 글꼴 패밀리와 크기를 선택해 주세요.맞춤 CSS: 모든 Klaviyo 고객 허브 요소, 모든 임베드된 블록 또는 추천 블록을 구체적으로 타겟팅할 수 있도록 클래스를 추가하세요.
   1. Adjust the visual settings so the block feels native to your site:
      1. Elements: Show or hide price (shown by default), favorite buttons (shown by default), add-to-cart buttons (hidden by default), and product variant (hidden by default).
      2. Buttons: Choose a style (rounded, square, curved), color, text color, and text case.
      3. Layout: Set the max width, max products (1–10, default 4), padding (top, left, right, bottom), and margins (between the title and the product row, and between products). Configure image size (width, height) and fit (cover, contain, fill).
      4. Fonts: Select families and sizes for the header font, product name font, price font, and variant font.
      5. Custom CSS: Add classes to target all Customer Hub elements, all embedded blocks, or the recommendations block specifically.

4. 전체 플랫폼 설정 완료:이커머스 플랫폼의 프런트엔드에 블록을 설치하세요:Shopify: 테마 편집기를 통해 앱 블록으로 추가해 주세요.Shopify Plus: 테마 수준에서 제어가 필요한 판매자를 위해 코드 조각(div)으로 추가해 주세요.
   1. Install the block on your e-commerce platform's frontend:
      1. Shopify: Add as an app block through the theme editor.
      2. Shopify Plus: Add as a code snippet (div) for merchants who need theme-level control.
5. 게시:변경 사항을 저장하고 게시하세요. 이 블록은 구성한 소스, 필터, 디자인 설정에 따라 라이브 PDP에 표시돼요.
   1. Save and publish your changes. The block will appear on your live PDP according to the source, filters, and design settings you've configured.

기여 및 분석

• 추천 제품을 클릭할 때마다 클릭한 제품 이벤트로 추적되며, 소스는 “임베디드 제품 추천 블록.”으로 기록돼요.
• 클릭은 Hub 서랍 내부의 제품을 클릭한 것과 동일한 방식으로 어트리뷰션돼요.
• Klaviyo는 조회수와 클릭을 기록하므로 도입 (라이브 추천 블록이 1개 이상인 계정), 참여 유도 (클릭률, 클릭 후 장바구니 추가율, 즐겨찾기), 매출 (블록 노출 수 1,000회당 어트리뷰션 가능한 매출, 추천 지원 클릭 경로가 있는 주문 비중)을 추적할 수 있어요.

스타일 매칭

기존 테마와 일치시키려면, 가장 이상적인 방법은 Shopify가 Klaviyo를 대신해 제품 블록을 렌더링하도록 하는 거예요. 다만 Shopify는 제품 컨텍스트로 Klaviyo 앱 확장 프로그램 안의 블록을 렌더링하지 않기 때문에, 대신 제품 블록을 렌더링하는 새 섹션 블록을 만들어요.