상품 상세 페이지에 구현하기

이 작업은 상품 상세 페이지에 위젯버튼, 인페이지 등 버츄사이즈의 기능을 사용하능하게 하기 위한 것입니다. 총 4종류의 페이지에 설치하실 수 있습니다.

1. 스테이징, 모바일용 페이지
2. 스테이징, 데스크탑용 페이지
3. 운영환경, 모바일용 페이지
4. 운영환경, 데스크탑용 페이지

스테이징 환경이 따로 없으실 경우 1과 2에 대한 구현이 필요 없으며, 모바일용 페이지가 따로 없이 반응형 페이지일 경우는 1과 3에 대한 구현이 필요 없습니다.

동작환경

• PC: Internet Explorer 10+ 및 Safari, Chrome, Firefox, Opera 등의 모던 브라우저
• 스마트폰: iOS 14.0+ 및 Android 7.0+

구현하기

1. 스토어명과 API키 취득하기

담당자에게 스토어명과 API키를 얻으시기 바랍니다.

2. Virtusize 기능이 표시될 위치에 div태그 넣기

Virtusize 기능이 표시될 위치에 아래의 코드를 삽입해 주십시오

<div id="vs-placeholder-cart"></div>

만약 1군데 이상의 위치에 표시되기를 원하시면 관리자에게 연락 바랍니다.

3. input태그에 파라미터 넣기

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

no	id 명	설명
1	vs-user-id	유저가 로그인한 경우, 유저ID를 셋팅. 로그인하지 않은 경우는 셋팅하지 않아도 됨. MD5나SHA-1로 변환하여 세팅
2	vs-product-id	상품의 고유번호
3	vs-product-version	상품의 버전, 날짜 문자열 혹은 고정값 '1'을 셋팅
4	vs-product-image-url	JPG혹은 PNG파일의 URL.상품 이미지로 등록됩니다.

• 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">

• Google Analytics에 여러개의 추적기 (trackers)를 사용하시는 경우, Google Analytics 이벤트 송부에 사용하길 희망하는 추적기의 이름 혹은 ID를 알려주세요. 만일 추적기 관련 정보를 보내주시지 않을 경우, 저희 측에서 처음으로 확인된 추적기 이름을 사용하겠습니다. 아래 내용을 포함하여 작성해주시기 바랍니다.

no	id 명	설명
1	vs-ga-tracker	추적기 이름 혹은 추적기ID 중 택1

• 예시

// 옵션 1 (추적기 이름 설정)
<input type="hidden" id="vs-ga-tracker" value="gtm1" />

// 옵션 2 (추적기 ID 설정) 
<input type="hidden" id="vs-ga-tracker" value="UA-000000-1" />

4. 설치용 script 넣기

설치용 스크립트는, 공통 스크립트에 각 환경용 변수를 설정함으로써 간단히 구현 가능합니다. 아래의 스크립트를 Body태그를 닫기 직전에 설치해 주십시오.

• 공통 스크립트

(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);

1. 스테이징용 모바일용

<script type="text/javascript">
var vsStoreName = '{관리자에게서 얻은 스토어명}';
var vsEnv = 'staging';
var vsDeviceType = 'mobile';

{공통 스크립트 복사}
</script>

2. 스테이징 데스크탑용

<script type="text/javascript">
var vsStoreName = '{관리자에게서 얻은 스토어명}';
var vsEnv = 'staging';
var vsDeviceType = 'desktop';

{공통 스크립트 복사}
</script>

3. 운영환경 모바일용

<script type="text/javascript">
var vsStoreName = '{관리자에게서 얻은 스토어명}';
var vsEnv = 'production';
var vsDeviceType = 'mobile';

{공통 스크립트 복사}
</script>

4. 운영환경 데스크탑용

<script type="text/javascript">
var vsStoreName = '{관리자에게서 얻은 스토어명}';
var vsEnv = 'production';
var vsDeviceType = 'desktop';

{공통 스크립트 복사}
</script>

5.확인하기

위의 태그및 스크립트를 설치후 관리자에게 연락 바랍니다. 관리자가 상품의 등록을 확인한 후 연락드리겠습니다. 그 후 Virtusize 기능이 표시되는 것을 확인하실 수 있습니다.