Mintegral Pixel: Google Tag Manager를 통한 연동 가이드

Integration Guide

이 가이드는 완전 자체 구축 웹사이트, Headless Mode로 운영되는 Shopify Store, 기타 CMS 플랫폼으로 구축된 사이트를 포함한 맞춤형 웹사이트에서 Mintegral Pixel을 연동하는 방법을 설명합니다.

연동 방식은 두 가지입니다.

1. Google Tag Manager(GTM)를 사용해 스크립트와 트래킹 코드를 관리
2. 맞춤형 온라인 스토어에 Mintegral Pixel을 직접 삽입

두 방식 모두 페이지 조회, 사용자 상호작용, 전환 이벤트를 트래킹할 수 있습니다.

이 가이드에서는 방법 #1, 즉 GTM을 통한 연동을 다룹니다.

Integration via Google Tag Manager (GTM)

사용 사례: 웹사이트에서 GTM을 사용해 스크립트와 트래킹 코드를 관리하는 경우입니다.

Integration Steps

Step 1: Mintegral Pixel SDK 로드

• GTM에서 Tags → New → Custom HTML Tag로 이동합니다.
• 다음 코드를 붙여넣습니다.

<script>
(function (w, d) {
  var u = "https://cdn-static.mintegral.com/sdk/pixel.js";
  if (w.mintegralPixel) return;
  var s = (w.mintegralPixel = function () {
    s.performOperation
      ? s.performOperation.apply(s, arguments)
      : s.operationQueue.push(arguments);
  });
  s.operationQueue = [];
  var f = d.getElementsByTagName("script")[0],
    e = d.createElement("script");
  e.async = !0;
  e.src = u;
  f.parentNode.insertBefore(e, f);
})(window, document);

mintegralPixel("init", {
  setupType: 1 // 1 - self-built website
});
</script>

• 트리거를 All Pages로 설정하고 태그를 저장합니다.

⚠️ Note: 중복 이벤트를 방지하려면 페이지당 SDK를 한 번만 로드하세요.

Step 2: Mintegral 공식 이벤트 리포팅

Mintegral Event Data Structure

Mintegral로 리포트되는 모든 이벤트는 다음 표준 데이터 구조를 따라야 합니다.

다음 코드를 복사하여 붙여넣고 웹사이트에서 Data Layer를 준비합니다.

dataLayer.push({
  "event": "purchaseEvent",
  "mtg_type": "purchase",
  "mtg_data": {
    "currency": "USD",
    "value": 179.98,
    "items": [
      {
        "item_variant_id": "sku123-blue-42",
        "item_id": "sku123",
        "item_name": "Air Sneakers",
        "price": 89.99,
        "quantity": 2,
        "image_url": "https://cdn.example.com/images/sku123.jpg"
      }
    ]
  }
});

⚠️ Note:

<span data-type="text">mtg_type</span> 및 <span data-type="text">mtg_data</span>는 Mintegral 사양을 준수해야 합니다.

<span data-type="text">event</span>는 GTM 트리거에만 사용되며 SDK 리포팅에는 영향을 주지 않습니다.

GTM Configuration

• Data Layer Variables를 생성합니다.

<span data-type="text">DLV - MTG Type</span> → <span data-type="text">mtg_type</span>

<span data-type="text">DLV - MTG Data</span> → <span data-type="text">mtg_data</span>

• Custom Event Trigger를 생성합니다.

Event name: 예: purchaseEvent

• Custom HTML Tag를 생성합니다.

다음 코드를 복사하여 붙여넣고, 트리거를 지정한 뒤 설정을 게시합니다.

<script>
mintegralPixel("track", {
  "type": "{{DLV - MTG Type}}",
  "data": {{DLV - MTG Data}}
});
</script>