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

이 페이지는 Google 태그 관리자(GTM)를 사용하여 귀하의 웹사이트 주문 확인 페이지(OCP)에 Virtusize를 통합하는 방법을 안내합니다. 이 과정은 4 단계로 이루어져 있습니다:

주문 객체 생성하기

이 단계에서는 주문 객체를 생성하는 방법을 설명합니다.

사용자 정의 트리거 만들기

이 단계에서는 GTM 작업 공간에 사용자 정의 트리거를 추가하는 방법을 설명합니다.

Virtusize 스크립트 통합하기

이 스크립트는 주문을 전송하는 중앙 애플리케이션을 호출하는 데 필요합니다.

검증

이 단계는 Virtusize 스크립트와 주문이 버츄사이즈 데이터베이스에서 올바르게 확인되도록 하는 데 필요합니다.

GTM의 주문 확인 페이지에서 Virtusize가 고객에게 최근 구매한 항목을 구매 내역의 일부로 보여줄 수 있도록 하는 스크립트를 추가하십시오. 고객은 이러한 항목을 사용하여 새로 구매하고자 하는 항목과 비교할 수 있습니다.

원하신다면, 제품 상세 페이지(PDP) 스크립트를 GTM에 통합하기 전에 주문 확인 페이지 스크립트를 GTM에 통합할 수 있습니다. 이렇게 하면 고객은 제품 페이지에 Virtusize를 통합하는 즉시 혜택을 받을 수 있으며, 이전 구매의 구매 내역이 이미 설정되어 있는 상태가 됩니다.

# 시작하기 전에

귀하의 영업 담당자에게 연락하여 API 키와 상점 이름을 받으십시오. 또한 Google 태그 관리자에서 전자상거래가 활성화된 작업 공간이 설정되어 있는지 확인하십시오. 이를 통해 구매 데이터를 포함한 내장 변수 ecommerce에 접근할 수 있으며, 사용자의 관련 데이터를 가져오기 위해 웹 페이지의 데이터 레이어에 저장된 특정 값을 참조하는 Data Layer Value(DLV)를 사용할 수 있습니다.

# 1. 주문 객체 생성하기

주문 객체는 하나의 주문 객체와 여러 개의 아이템 객체로 구성되어 여러 아이템 구매가 있는 주문을 처리합니다.

# `주문 객체`는 다음을 요구합니다:

파라미터 이름	데이터 구조	예시	비고
orderId	String	"A00001"	발급된 주문 ID.
items	Array	(아래 표 참조)	배열의 각 항목은 주문에서 구매한 각 제품에 해당하는 `아이템 객체`입니다. (예: 사용자가 셔츠 2개와 바지 1개를 구매한 경우, items 배열에는 3개의 `아이템 객체`가 포함됩니다.)

각 아이템 객체는 다음을 요구합니다:

파라미터	데이터 구조	예시	참고사항
productId	String	"A00001"	제품 ID. 제품 페이지에 설정된 제품 ID와 동일해야 합니다.
size	String	"S", "M", 등.	사이즈 문자열. 상세 페이지에 설정된 동일한 사이즈를 사용해야 합니다.
imageUrl	String	"http://example.com/coat.jpg"	항목의 이미지 URL. Virtusize와 공유할 이미지의 절대 경로를 제공하십시오.
currency	String	"JPY"	통화 코드
url	String	"http://example.com/coat.html"	제품 상세 페이지의 URL. 사용자가 접근할 수 있는 URL이어야 합니다.
unitPrice	Float	1234123과 같은 정수를 입력해 주세요. 문자는 지원되지 않음	세금 제외 가격을 나열하십시오.
quantity	Integer	1 또는 5와 같은 정수를 입력해 주세요. 문자는 지원되지 않음	구매한 항목 수
variantId	String	"A00001-001-002"	제품 SKU, 색상, 사이즈 등에 설정된 ID.
color	String	"Red", etc.	제품 색상
gender	String	"W", "Womens", etc.	성별

다음 아이템 객체 파라미터는 선택 사항이지만 강력히 권장됩니다:

Parameter Name	Data Structure	Example	Notes
gender	String	"W", "Womens"	성별

// 예시
const orderObject = {
  orderId: "A00001",
  items: [
    {
      productId: "P00001",
      size:      "L",
      variantId: "P001_SIZEL_RED",
      url:       "https://example.com/products/P001",
      imageUrl: "https://images.example.com/products/P001/red/image1xl.jpg",
      color:     "Red",
      unitPrice: 5100,
      quantity:  1,
      currency:  "JPY",
      gender: "W"
    }
    // 주문에서 구매한 각 항목에 대한 객체를 생성하십시오.
  ]
}

# 제품 항목 객체 생성하기

위와 같이 items를 구성하려면 buildOrderItems라는 함수를 생성하여 제품 항목 배열을 생성하고 이를 orderObject에 할당할 수 있습니다. 각 항목의 값은 DLV 및 전자상거래 변수를 사용하여 설정할 수 있습니다.

// name: CJS - Virtusize - orderItems

function buildOrderItems() {
  const orderItems = []

  for (let i = 0; i < {{DLV - ecommerce.purchase.products}}.length; i++) {
      let item = {};
      item.productId = {{DLV - ecommerce.purchase.products}}[i].id;
      item.size = {{DLV - ecommerce.purchase.products}}[i].dimension3;
      item.imageUrl = "";
      item.currency = {{DLV - ecommerce.currencyCode}};
      item.variantId = {{DLV - ecommerce.purchase.products}}[i].dimension16;
      item.url = "";
      item.unitPrice = parseFloat({{DLV - ecommerce.purchase.products}}[i].price);
      item.quantity = parseInt({{DLV - ecommerce.purchase.products}}[i].quantity);
      item.color = {{DLV - ecommerce.purchase.products}}[i].dimension4
      item.gender = {{DLV - ecommerce.purchase.products}}[i].category
      orderItems.push(item)
  }

  return orderItems
}

# 주문 객체 생성하기

DLV에 있는 값을 사용하여 주문 객체를 생성하고, buildOrderItems 함수를 실행하기 위해 참조 이름 CJS - Virtusize - orderItems를 사용하십시오.

// 예시
const orderObject = {
  orderId: {{DLV - ecommerce.purchase.actionField.id}},
  items: {{CJS - Virtusize - orderItems}}
}

# 2. 사용자 정의 트리거 만들기

새 태그 이름(예: virtusize-order-confirmation-page)을 Custom HTML 유형으로 생성하고 <script> 섹션을 추가하십시오.

이 태그는 purchase 또는 new transaction success 이벤트에서만 트리거되어야 합니다. 사용자가 성공적으로 구매를 완료한 후에만 이 스크립트를 실행하고 사용자 구매 정보를 전송해야 합니다.

트리거를 설정하려면 GTM 작업 공간에 사용자 정의 트리거를 추가하고 이름에 따라 트리거를 선택하십시오.

# 3. Integrating the Virtusize script

스크립트는 각 환경에 대한 변수를 설정하여 쉽게 통합할 수 있습니다. 아래 스크립트를 <script> 태그 내부에 추가하고, STORE_NAME, ENVIRONMENT, DEVICE_TYPE, USER_ID, ORDER_OBJECT를 올바른 값으로 대체하십시오.

const vsObject = {
  storeName: "STORE_NAME",
  env: "ENVIRONMENT",
  deviceType: "DEVICE_TYPE",
  userId: "USER_ID",
  orderObject: "ORDER_OBJECT",
  page: "ocp"
};

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

값	설명
STORE_NAME	이것은 귀하의 영업 담당자로부터 받은 `스토어 이름` 입니다.
ENVIRONMENT	이것은 통합 중인 환경에 따라 `staging` 또는 `production` 일 수 있습니다.
DEVICE_TYPE	이것은 페이지에 접근하는 장치 유형에 따라 `desktop` or `mobile`일 수 있습니다. 사이트가 반응형일 경우(데스크톱과 모바일 장치에 동일한 리소스를 제공하는 경우) `desktop` 으로 설정하십시오.
USER_ID	- 사용자가 로그인하지 않은 경우 빈 문자열(`''`)로 설정합니다. - 사용자가 로그인한 경우 사용자 ID를 해시 함수(MD5, SHA-1 등)를 사용하여 설정합니다.
ORDER_OBJECT	이것은 1단계에서 생성된 주문 객체입니다.

# 4. 검증

통합을 완료한 후, 아래 단계를 따르기 전에 캐시, 쿠키 및 로컬 저장소

를 지우십시오:

Virtusize를 사용하여 비교 없이 아이템을 구매합니다.
Virtusize를 사용하여 비교 후 아이템을 구매합니다.
위에서 구매한 항목의 orderId 및 productId를 가지고 영업 담당자에게 연락합니다.
영업 담당자와 함께 Virtusize의 기여도를 확인합니다.

← Google 태그 관리자(GTM)를 통한 제품 상세 페이지(PDP) 통합 구매내역 CSV 만들기 →