upfall
본문으로 바로가기
문서 목록

설치 전 사이트 준비

위젯이 상품을 인식하고 지식을 수집하기 위해 사이트에 갖춰져 있어야 하는 조건과 확인 방법을 설명합니다.

위젯은 어떤 사이트에든 붙습니다. 다만 "붙는다"와 "상품을 인식한다"는 다른 문제입니다. 캐릭터가 뜨고 대화가 되는데 상품 카드만 나오지 않거나 지식 수집이 실패하는 경우는 대부분 사이트 쪽 조건에서 갈립니다.

설치 전에 아래 항목을 확인합니다. 전부 만족하지 않아도 설치는 됩니다. 다만 해당 항목에 걸린 기능은 동작하지 않습니다.


사전 확인 목록

항목확인 방법충족하지 않으면
HTML 삽입 권한공통 레이아웃이나 푸터를 편집할 수 있는지 확인호스팅 서비스의 "사용자 정의 코드" 메뉴를 찾거나 개발 담당자에게 코드를 전달
도메인 일치키를 발급한 주소와 방문자가 실제로 여는 주소를 비교도메인마다 키를 따로 발급
상품 카드의 링크상품 목록에서 카드 하나를 골라 개발자 도구로 <a href> 확인아래 상품 인식 네 순위 중 하나를 충족
상품 상세 주소상세 페이지 주소에 /product, product_no= 같은 표시가 있는지 확인마커 속성을 붙이거나 초기화 옵션으로 주소 규칙을 지정
공개 페이지시크릿 창에서 그 주소가 로그인 없이 열리는지 확인회원 전용 페이지는 수집되지 않으므로 텍스트 직접 입력으로 등록
크롤러 접근방화벽·봇 차단에서 자동화 도구 접근이 거부(403)되는지 확인차단이 풀리기 전까지 수집이 실패

도메인은 정확히 일치해야 합니다

위젯 키는 도메인 단위로 발급되고 위젯은 그 도메인에서만 뜹니다. www.example.com으로 받은 키를 example.com에 붙이면 동작하지 않습니다. 쇼핑몰과 브랜드 소개 사이트를 다른 도메인으로 운영한다면 각각 발급합니다.

같은 이유로 개발 서버(localhost)에서는 위젯이 뜨지 않습니다. 동작 확인은 실제 도메인에서 합니다.


상품 인식 네 순위

방문자가 상품을 길게 누르거나 상품 위에 커서를 올릴 때, 위젯은 서버에 묻지 않고 페이지 안에서 상품 여부를 판정합니다. 아래 순서로 확인하고 먼저 맞는 것을 씁니다.

1. 마커 속성

가장 확실한 방법입니다. 상품 카드 요소에 data-voidx-product를 붙이고 값으로 상품명을 넣습니다.

HTML
<div class="card" data-voidx-product="베이직 캐시미어 머플러">…</div>

주소·가격·이미지까지 지정하려면 보조 속성을 함께 씁니다.

HTML
<div
  data-voidx-product
  data-voidx-product-name="베이직 캐시미어 머플러"
  data-voidx-product-url="/products/muffler-basic"
  data-voidx-product-price="59,000원"
  data-voidx-product-image="/images/muffler.jpg">
  …
</div>

값 없이 data-voidx-product만 붙이면 위젯이 그 요소 안에서 itemprop="name", 제목 태그(h1~h6), 이미지 alt, 링크 텍스트 순으로 상품명을 찾습니다.

2. 상품 상세 링크

마커가 없으면 상품 카드를 감싼 링크를 봅니다. 링크가 같은 도메인을 가리키고 주소에 아래 표시 중 하나가 있으면 상품으로 판정합니다. 대소문자는 구분하지 않습니다.

경로쿼리
/productproduct_no=
/products/product_cd=
/p/goodsno=
/goodsitemid=
/itemsku=
/prdproduct_id=
detail.htmlproductid=

주소 규칙이 목록과 다르면 초기화 옵션 productPress.urlPattern에 정규식을 넘겨 직접 지정할 수 있습니다.

링크에서 위로 최대 4단계까지 올라가며 카드 범위를 잡고, 그 사이에 다른 상품 링크가 섞이면 직전에서 멈춥니다. 상품명은 눌린 링크 안의 제목, 같은 링크의 텍스트, 카드 범위의 제목, 이미지 alt, title 속성 순으로 찾습니다. 가격은 ₩·KRW·$·€·¥·£ 접두 형태나 12,000원 형태를 읽습니다.

3. 마이크로데이터

itemtype="https://schema.org/Product"를 가진 itemscope 요소도 상품으로 판정합니다. 구조화 데이터를 이미 갖춘 사이트라면 별도 작업 없이 여기서 잡힙니다.

4. 상품 상세 페이지 자체

열려 있는 페이지 주소가 2번의 규칙에 맞으면 페이지 전체를 상품 하나로 봅니다. 이때는 JSON-LD의 Product를 먼저 읽고, 없으면 OpenGraph를 읽습니다. OpenGraph는 og:type이 정확히 product여야 하며 product.group은 목록 페이지로 봅니다.

상품 링크가 다른 도메인을 가리키면 상품으로 인식되지 않습니다. 소개 사이트에서 외부 쇼핑몰로 보내는 구조나 스토어프론트가 별도 도메인에 있는 구조가 여기에 해당합니다. 그런 사이트에서는 마커 속성으로 직접 지정합니다.


대화 안 상품 카드는 별개 조건입니다

위 판정은 방문자가 페이지에서 상품을 고를 때의 규칙입니다. 답변 아래에 붙는 상품 카드는 답변 본문에서 만들어집니다. 목록 항목에 굵은 제목이나 가격이 있으면서 자사 사이트로 가는 링크가 있을 때 최대 3개까지 카드가 됩니다.


지식 수집이 읽는 페이지

지식 등록에서 "사이트 전체 수집"이나 "URL 단건"을 고르면 위젯이 아니라 수집기가 사이트를 읽습니다. 수집기는 로그인하지 않은 방문자와 같은 조건으로 페이지를 엽니다.

조건내용
주소https로 시작하는 공개 주소. 아이디·비밀번호가 들어간 주소나 표준 포트(80/443)가 아닌 주소는 등록되지 않습니다
사이트 전체 수집최대 1,000페이지, 최대 15분. 먼저 닿는 쪽에서 종료
URL 단건페이지당 400KiB
횟수오늘 수집 횟수 차감. 실패해도 차감

봇 차단이나 방화벽이 수집기 접근을 거부하면 소스 상태가 "실패"가 됩니다. 이전 수집분이 있으면 그 내용으로 답변은 계속되고 최신 반영만 되지 않습니다. 소스 상세의 "실패 원인"에서 거부 사유를 확인합니다.


다음 단계

다음 단계

SDK 레퍼런스스크립트 주소, 초기화 옵션, 런타임 API, 이벤트, React 래퍼 속성을 한 곳에 모은 참조 문서입니다.