제품 페이지 통합

HTML 태그과 Virtusize 스크립트를 추가하면 모든 업데이트된 Virtusize 제품을 활용할 수 있습니다.

동작환경

데스크톱: Microsoft Edge, Safari, Chrome, Firefox, Opera와 같은 모던 브라우저 모바일: iOS 14.0+, Android 7.0+

시작하기 전에

API 키 및 상점 이름을 받기 위해 버츄사이즈의 통합 담당자에게 문의해주세요

구현하기

1. Virtusize 태그의 최적 위치, 디자인 문구 등 선택하기 위해 버츄사이즈의 통합 담당자와 상담해주세요

#Virtusize inpage 애플리케이션을 통합하는 경우 나타나기를 원하는 위치에 아래의 HTML 태그를 추가해주세요

<div class="vs-placeholder-inpage"></div>

#Virtusize inpage 미니 애플리케이션을 통합하는 경우 나타나기를 원하는 위치에 아래의 HTML 태그를 추가해주세요

<div class="vs-placeholder-inpage-mini"></div>

#Virtusize 스마트 테이블 애플리케이션을 통합하는 경우 나타나기를 원하는 위치에 아래의 HTML 태그를 추가해주세요

<div class="vs-placeholder-smart-table"></div>

#Virtusize 피팅 룸 추천 애플리케이션을 통합하는 경우 나타나기를 원하는 위치에 아래의 HTML 태그를 추가해주세요

<div class="vs-placeholder-frr"></div>

#Virtusize 키즈 애플리케이션을 통합하는 경우 나타나기를 원하는 위치에 아래의 HTML 태그를 추가해주세요

<div class="vs-placeholder-kids"></div>

2. 아래의 4개의 입력 태그에 각각의 값을 설정하여 추가해주세요

한 페이지에서 여러 inpage 애플리케이션을 사용하여 각각 다른 제품에 대한 권장 크기를 표시하는 경우 vs-product-id 및 vs-product-image-url 태그를 추가할 필요가 없습니다

총 4가지 input태그를 넣으실 필요가 있습니다.

no	id 명	설명
1	vs-user-id	사용자가 웹 사이트에 로그인할 때 식별하는 값으로 미리 MD5, SHA-1 등 해쉬 값으로 변환한값을 사용해주세요.
2	vs-product-id	상품페이지의 URL에 포함되는 상품의 고유 ID 값을 설정해주세요
3	vs-product-version	상품 버전입니다. 보통 제품 출시 때의 타임스탬프(예: 202202162028)로 설정합니다. 알 수없는 경우 1로 설정하십시오. 상품의 사이즈 값이 변경될 때 버전 값을 갱신하면 제품 정보가 자동으로 다시 파싱됩니다.
4	vs-product-image-url	상품에 대한 .jpg 또는 .png 이미지 URL입니다. 이것은 Virtusize 사이징 플랫폼에서 제품에 사용되는 주 이미지입니다.

• example

<input type="hidden" id="vs-product-id" value="product-id-1234">
<input type="hidden" id="vs-user-id" value="user-id-1234">
<input type="hidden" id="vs-product-version" value="1">
<input type="hidden" id="vs-product-image-url" value="https://via.placeholder.com/400x400.jpg">

3. Virtusize 스크립트 통합

스크립트는 스크립트의 각 환경에 대한 변수를 설정하여 쉽게 통합할 수 있습니다. 다음 스크립트를

태그를 닫기 직전에 놓고 YOUR_STORE_NAME, YOUR_ENVIRONMENT 및 YOUR_DEVICE_TYPE을 아래 표에 따라 올바른 값으로 설정해주세요:

<script type="text/javascript">
var vsStoreName = "스토어명";
var vsEnv = "환경";
var vsDeviceType = "장치 유형";

(function(d) {
var s = d.createElement("script"); s.type = "text/javascript"; s.charset="utf-8"; s.async = true;
s.src =

 ("https:" == d.location.protocol ? "https://" : "http://") + "integration.virtusize.kr/" + vsEnv + "/" + vsStoreName + "/" + vsDeviceType + ".source.js";
var s1 = d.getElementsByTagName("script")[0]; s1.parentNode.insertBefore(s, s1);
})(document);
</script>

값	설명
스토어명	버츄사이즈 통합 담당자로부터 받은 스토어명입니다.
환경	통합 중인 환경에 따라 staging 또는 production 중 하나를 지정해주세요.
장치 유형	페이지에 액세스하는 장치 유형에 따라 desktop 또는 mobile를 지정해주세요. 사이트가 리스폰시브일 경우(데스크톱 및 모바일 기기에 동일한 리소스를 제공하는 경우) desktop으로 설정해주세요.

4. 확인

통합을 마치고 나면 URL을 판매 버츄사이즈 담당자에게 공유해주세요.