추천 상품 연동 방법이란?연동 항목을 페이지에서 읽는 방법

CSS Selector (권장)

페이지 HTML에 <a id="product_no">PerfittShoe</a> 같은 태그가 있으면 CSS Selector로 #product_no를 적습니다. 펄핏은 그 요소의 글자를 읽고, <input>은 값을, <img>는 이미지 주소를 읽습니다. 셀렉터를 쉼표로 여러 개 적으면 먼저 찾아지는 것을 씁니다.

셀렉터 쓰는 법은 MDN CSS 선택자를 참고하세요.

JSON-LD (schema.org)

검색 엔진용으로 페이지에 <script type="application/ld+json">을 넣는 몰이 많습니다. 그 안의 최상위 키 이름(sku, name, image 등)을 적으면 펄핏이 값을 읽습니다. 페이지 디자인이 바뀌어도 잘 안 깨집니다.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "sku": "PerfittShoe",
  "name": "퍼펙트 핏 니트 부스트 원",
  "image": "https://shop.example.com/images/perfitt-shoe.jpg"
}
</script>

자바스크립트 변수·함수 (window)

페이지 스크립트가 전역 변수에 상품 정보를 두면 변수 이름과 그 안의 키를 적습니다. 아래 예라면 productInfo와 id입니다. 값이 변수에 바로 들어 있으면 변수 이름만 적습니다.

전역 함수가 값을 돌려주는 경우(예: window.getProductId())는 함수 이름을 적습니다. 돌려준 값은 문자열로 바꿔 씁니다.

window.productInfo = {
  id: 'PerfittShoe',
  brand: 'PERFITT',
  name: '퍼펙트 핏 니트 부스트 원',
};

URL 쿼리

페이지 주소가 https://shop.example.com/product?product_no=PerfittShoe이면 키 이름으로 product_no를 적습니다.

브라우저 저장소 (localStorage · sessionStorage · 쿠키)

페이지가 브라우저 저장소에 값을 넣어 두면 그 키 이름을 적습니다. 저장된 값이 JSON이면 안쪽 키까지 적어 한 단계 아래 값을 읽을 수 있습니다. 쿠키는 쿠키 이름을 적습니다. 개발자 도구의 Application 탭에서 아래처럼 보입니다.

고정값 (VALUE)

페이지에서 읽어 올 수 없는 항목은 고정값으로 넣습니다. 예를 들어 단일 브랜드 쇼핑몰은 상품 페이지에 브랜드명이 따로 없으므로, brand 항목을 PERFITT처럼 고정값으로 지정합니다.