# Google 태그 관리자(GTM)를 통한 제품 상세 페이지(PDP) 통합

이 페이지는 Google 태그 관리자(GTM)를 사용하여 귀하의 웹사이트 제품 상세 페이지(PDP)에 Virtusize를 통합하는 방법을 안내합니다. 이 과정은 5 단계로 이루어져 있습니다:

사용자 정의 HTML 태그 만들기
플레이스홀더 추가하기

현재 여섯 종류의 위젯을 지원합니다:

인페이지 스탠다드
인페이지 미니멀
스마트 테이블
피팅룸 추천
피팅룸 디스커버리
키즈

이 위젯은 페이지의 어디에나 배치할 수 있지만, 플레이스홀더를 사용하여 배치를 지정하는 것이 좋습니다. 플레이스홀더를 추가하면 향후 Virtusize 위젯이 깨지는 것에 대해 걱정하지 않고 페이지 디자인을 자유롭게 변경할 수 있습니다.

Virtusize 값 삽입하기

이 단계에서는 Virtusize가 제대로 작동하는 데 필요한 값을 설정할 수 있는 사용자 정의 변수를 정의합니다.

Virtusize 스크립트 통합하기

이 스크립트는 위젯을 표시하는 중앙 애플리케이션을 호출하는 데 필요합니다.

검증

# 시작하기 전에

귀하의 영업 담당자에게 연락하여 API 키와 상점 이름을 받으십시오.

# 1. 사용자 정의 HTML 태그 만들기

사용자 정의 HTML 태그를 만들려면 작업 공간에서 Add a new Tag를 선택하십시오.

sample

태그 구성을 클릭하고 태그 유형으로 사용자 정의 HTML을 선택하십시오.

sample

# 2. 플레이스홀더 추가하기

귀하의 영업 담당자와 상담하여 Virtusize 태그의 최적 위치를 결정하십시오.

Virtusize 인페이지 스탠다드 위젯을 통합하는 경우, 다음 JavaScript 코드를 사용하여 inpage-target-div를 인페이지 스탠다드 위젯을 배치할 대상 요소로 바꾸십시오:

<script>
  document.querySelector("inpage-target-div").innerHTML = '<div id="vs-placeholder-inpage"></div>';
</script>

Virtusize 인페이지 미니멀 위젯을 통합하는 경우, 다음 JavaScript 코드를 사용하여 inpage-mini-target-div를 인페이지 미니멀 위젯을 배치할 대상 요소로 바꾸십시오:

<script>
  document.querySelector("inpage-mini-target-div").innerHTML = '<div id="vs-placeholder-inpage-mini"></div>';
</script>

Virtusize 스마트 테이블 (ST) 위젯을 통합하는 경우, 다음 JavaScript 코드를 사용하여 smart-table-target-div를 스마트 테이블 위젯을 배치할 대상 요소로 바꾸십시오:

<script>
  document.querySelector("smart-table-target-div").innerHTML = '<div id="vs-placeholder-smart-table"></div>';
</script>

Virtusize 피팅룸 추천 (FRR) 위젯을 통합하는 경우, 다음 JavaScript 코드를 사용하여 frr-target-div를 피팅룸 추천 위젯을 배치할 대상 요소로 바꾸십시오:

<script>
  document.querySelector("frr-target-div").innerHTML = '<div id="vs-placeholder-frr"></div>';
</script>

Virtusize 피팅룸 디스커버리 (FRD) 위젯을 통합하는 경우, 다음 JavaScript 코드를 사용하여 frd-target-div를 피팅룸 디스커버리 위젯을 배치할 대상 요소로 바꾸십시오:

<script>
  document.querySelector("frd-target-div").innerHTML = '<div id="vs-placeholder-frd"></div>';
</script>

Virtusize 키즈 위젯을 통합하는 경우, 다음 JavaScript 코드를 사용하여 kids-target-div를 키즈 위젯을 배치할 대상 요소로 바꾸십시오:

<script>
  document.querySelector("kids-target-div").innerHTML = '<div id="vs-placeholder-kids"></div>';
</script>

작업이 완료되면 태그가 실행될 트리거를 선택하십시오. 예를 들어 "모든 제품 페이지" 또는 특정 페이지를 선택할 수 있습니다.

# 3. Virtusize 값 삽입하기

GTM에서 Virtusize 통합에 사용할 수 있는 기본 변수가 있습니다. 필요한 변수가 없으면 변수 메뉴를 클릭하고 사용자 정의 변수 섹션에서 새로 만들기 New를 선택하여 새 사용자 정의 변수를 만들 수 있습니다.

sample

변수 유형으로 데이터 레이어 변수를 선택합니다.
변수 이름을 지정합니다(예: vs-product-id).
데이터 레이어 변수 이름 필드에 캡처하려는 값이 포함된 데이터 레이어 키의 이름을 입력합니다. 이 경우, 우리는 전자상거래 객체 아래의 제품 ID를 가져옵니다(예: ecommerce.detail.products.0.id).
변수를 저장합니다.

sample

# 4. Virtusize 스크립트 통합하기

이제 사용자 정의 HTML 내부에서 변수를 설정할 수 있습니다. GTM에서 제공하는 기본 변수를 사용하거나 필요한 다른 데이터를 가져오기 위해 새 변수를 만들 수 있습니다. 아래 예에서는 vs-user-id, vs-product-id 및 vs-product-version 변수를 생성하고 사용자 정의 HTML 내부에서 사용했습니다.

<script type="text/javascript">
const vsObject = {
  storeName: "STORE_NAME",
  env: "ENVIRONMENT",
  deviceType: "DEVICE_TYPE",
  userId: "{{vs-user-id}}",
  product: { id: "{{vs-product-id}}", version: "{{vs-product-version}}" },
  page: "pdp"
};

(function() {
  window.vs = !window.hasOwnProperty("vs")
    ? vsObject
    : Object.assign(window.vs, vsObject);

  const { storeName, env, deviceType } = vsObject;
  const script = document.createElement("script");
  const firstScript = document.getElementsByTagName("script")[0];
  const protocol = document.location.protocol ? 'https' : 'http';

  Object.assign(script, {
    async: true,
    src: `${protocol}://integration.virtusize.kr/${env}/${storeName}/${deviceType}.source.js`,
  });

  firstScript.parentNode.insertBefore(script, firstScript);
})();
</script>

값	설명
STORE_NAME	이것은 귀하의 영업 담당자로부터 받은 `스토어 이름`입니다.
ENVIRONMENT	이것은 통합 중인 환경에 따라 `staging` 또는 `production` 일 수 있습니다.
DEVICE_TYPE	이것은 페이지에 접근하는 장치 유형에 따라 `desktop` 또는 `mobile`일 수 있습니다. 사이트가 반응형일 경우(데스크톱과 모바일 장치에 동일한 리소스를 제공하는 경우) `desktop`으로 설정하십시오.
vs-user-id	- 사용자가 로그인하지 않은 경우 빈 문자열(`''`)로 설정합니다. - 사용자가 로그인한 경우 사용자 ID를 해시 함수(MD5, SHA-1 등)를 사용하여 설정합니다.
vs-product-id	제품 ID입니다.
vs-product-version	제품 버전은 일반적으로 제품 출시 날짜(YYYYMMDD)로 설정되어야 합니다. 버전을 알 수 없는 경우 `1`로 설정하십시오. 제품 버전이 변경되면 제품 정보가 자동으로 다시 파싱됩니다.

작업이 완료되면 태그가 실행될 트리거를 선택하십시오. 예를 들어 "모든 제품 페이지" 또는 특정 페이지를 선택할 수 있습니다.

이 예에서는 특정 페이지에서만 스크립트를 실행하도록 트리거를 설정하려고 합니다. sample

# 5. 검증

통합을 완료한 후, 제품 상세 페이지 URL을 귀하의 영업 담당자와 공유하십시오.

이를 위해 추가 작업을 클릭하고 미리보기 공유를 선택하여 공유할 버전을 찾으십시오.

← 주문 확인 페이지 (OCP) 통합 Google 태그 관리자(GTM)를 통한 주문 확인 페이지(OCP) 통합 →