개요

숍라인 1.0의 TikTok Pixel 전환 추적 설정을 위한 가이드입니다.

Google Tag Manager(GTM)를 사용하여 구매 전환 이벤트를 추적하고, TikTok 광고 캠페인의 성과를 측정할 수 있습니다.

적용 사례: obge.tw

• obge.tw 숍라인 1.0 스토어에 본 전환 추적 구조를 실제 적용했습니다.
• GTM을 활용해 주문 완료 페이지에서 상품별 구매 정보를 추출하여
  TikTok Pixel Purchase 이벤트에 전달되도록 설정했습니다.
• 숍라인 1.0 환경이라면 유사 방식으로 적용 가능합니다.

마케터용 안내

사전 준비 사항

• TikTok Ads Manager 계정에 Pixel 등록 완료
• Pixel ID 확보 (예: C1234567890ABCDEF)
• 통화 설정 확인 (예: KRW, TWD 등)
• 테스트용 상품 준비 또는 결제 가능한 환경 구성
• GTM 컨테이너가 숍라인에 정상 연동되어 있어야 함

확인 방법

• TikTok Ads Manager → Assets → Events에서 데이터 수신 확인
• Google Tag Assistant 또는 GTM Preview로 태그 작동 여부 확인
• 전환이 안 잡히는 경우 개발파트에 문의하여 로그 확인 요청

개발 담당자용 안내

Google Tag Manager를 통한 TikTok Pixel 전환 추적 코드 적용 방법을 안내합니다.
주문 완료 페이지에서 상품별 구매 정보를 추출하여 TikTok Pixel Purchase 이벤트로 전송하는 코드를 설정합니다.

트리거 설정 (GTM)

• 이름: purchase
• 트리거 유형: 페이지 뷰
• 조건:
  • Page URL → 포함: /confirm

태그 설정 (맞춤 HTML)

<script>
  var exchangeRate = 43.5;  // TWD → KRW 환율 (정기적 수동 갱신 필요)
  var cartItems = document.querySelectorAll('.cart-item');
  var contents = [];
  var totalValueTWD = 0;

  for (var i = 0; i < cartItems.length; i++) {
    var item = cartItems[i];
    var productId = item.getAttribute('product-id');
    var priceText = item.querySelector('.item-price .price-label').textContent.trim();
    var quantityText = item.querySelector('.item-quantity').textContent.trim();

    var priceTWD = parseFloat(priceText.replace(/[^\d\.]/g, ''));
    var quantity = parseInt(quantityText.replace(/[^\d]/g, ''), 10);

    if (!isNaN(priceTWD) && !isNaN(quantity)) {
      totalValueTWD += priceTWD * quantity;

      contents.push({
        content_id: productId,
        content_type: "product",
        quantity: quantity
      });
    }
  }

  var totalValueKRW = Math.round(totalValueTWD * exchangeRate);

  if (!isNaN(totalValueKRW) && totalValueKRW > 0 && typeof ttq !== 'undefined') {
    console.log("TikTok Purchase Event Debug:", {
      value: totalValueKRW,
      currency: "KRW",
      contents: contents
    });

    ttq.track('Purchase', {
      contents: contents,
      value: totalValueKRW,
      currency: "KRW"
    });
  }
</script>

테스트 체크리스트

• 테스트용 결제 진행 (실 주문으로 확인 필요)
• Google Tag Assistant 또는 GTM Preview에서 태그 발동 확인
• TikTok Ads Manager에서 Events 리포트 수신 여부 확인
• 브라우저 콘솔에서 TikTok Purchase Event Debug: 로그로 데이터 구조 확인

문제 해결

전환이 잡히지 않을 경우

전환 추적이 예상대로 작동하지 않거나, TikTok Ads Manager에 데이터가 나타나지 않는 경우
아래 항목을 순서대로 점검해 보시기 바랍니다.

점검 항목