GTM에서 페이 스테이션 분석 설정 방법

작동 방식

여기에서는 엑솔라 페이 스테이션 결제 과정에 타사의 웹 분석 도구를 통합하는 기본 방법과 이벤트 및 매개변수에서 중요한 데이터를 얻는 방법을 설명합니다.

Note:
스크립트 차단기, 연결 끊김, 중도 포기, 세션 만료 등 다양한 외부 요인에 웹 분석의 정확성에 영향을 미칩니다.

사용자

페이 스테이션을 통합하고 있는 파트너.

획득 방법

웹 분석을 통합하려면, 다음 GTM 설정을 수행합니다.

  1. 사용자 정의 HTML 태그에 스크립트 추가.
  2. 변수 정의.
  3. 트리거 추가.
  4. 태그 추가.

사용자 정의 HTML 태그에 스크립트 추가

사용자 정의 HTML 태그 생성 및 다음 코드 복사/붙여넣기:

Copy
Full screen
Small screen
<script>
window.onmessage = function payStationStatus(event) {
  if (event.origin === "https://secure.xsolla.com") {
    try {
      var data = JSON.parse(event.data).data;           

      if (data.action === 'change-status') {
          dataLayer.push({'event': 'status', 'changeStatus': true, 'status': data.value})
      }

      if (data.action === 'choose-method' && data.value) {
        dataLayer.push({'event': 'choosePaymentMethod', 'choosePaymentMethod': true, 'paymentMethod': data.value})       
      }

      if (data.action === 'click-btn-pay') {
          dataLayer.push({'event': 'clickPayButton', 'clickPayButton': true})
      }

      if (data.action === 'close-widget') {       
          dataLayer.push({'event': 'closeWidget', 'closeWidget': true})
      }

      if (data.action === 'create-invoice') {
          dataLayer.push({
    'event': 'invoiceCreated',
            'invoiceCreated': true,
            'action': data.action,
    'coupon_code': data.coupon_code,
    'date': data.date,
    'milliseconds': data.milliseconds,
    'payment_country': data.payment_country,
    'purchase_currency': data.purchase_currency,
    'purchase_description': data.purchase_description,
    'purchase_external_id': data.purchase_external_id,
    'purchase_invoice_id': data.purchase_invoice_id,
    'purchase_sku': data.purchase_sku,
    'purchase_digital_content_sku': data.purchase_digital_content_sku,
    'purchase_sum': data.purchase_sum,
    'purchase_type': data.purchase_type,
    'session_id': data.session_id,
    'state': data.state,
    'timezone': data.timezone,
    'user_country': data.user_country,
    'user_id': data.user_id,
    'value': data.value,
    'virtual_currency_amount': data.virtual_currency_amount
          });
      }

      if (data.state) {
          dataLayer.push({'event': 'changeState', 'changeState': true, 'state': data.state});
      }
    } catch (e) {
      return;
    }
  }
};
</script>
결제 UI가 열릴 때 스크립트가 실행됩니다.

변수 정의

정의해야 하는 두 가지 데이터 레이어 변수:
  • 이벤트 — 트리거를 생성하여 사전에 정의한 값을 갖는 데 사용
  • 매개 변수 — 분석 시스템에 정보를 제공하고 값을 반환

변수 추가 방법:

이벤트

이름설명
status결제 인터페이스가 실행되고 있는 동안에만 업데이트할 수 있는 시스템 결제 상태입니다. 사용자가 브라우저 창을 열고 있을 때만 상태 변경에 따라 이벤트를 설정할 수 있습니다. 사용 가능한 상태: 'created', 'processing', 'done', 'cancel', 'xsollaRefund', 'held', 'error'.
choosePaymentMethod사용자가 결제 방식을 선택했습니다. 사용 가능한 상태: 'true'.
clickPayButton사용자가 결제 데이터를 제출한 후 확인 버튼을 클릭했습니다 .사용 가능한 상태: 'true'.
changeState사용자를 결제 과정별로 추적합니다. 여기에서 전체 목록을 확인할 수 있습니다. 사용 가능한 상태: 'list' — 결제 방식 페이지 목록, 'payment' — 결제 제출 페이지, 'status' — 결제 상태 페이지.

키 매개 변수

이름설명
payment_instance_name결제 방식 이름.
action이벤트 이름.
dateGMT 형식의 날짜와 시간.
purchase_currency게임머니 구매.
purchase_invoice_id엑솔라 시스템의 결제 인보이스 ID.
purchase_sku구매한 아이템의 SKU.
purchase_digital_content_sku구입한 게임 키 패키지의 SKU.
purchase_sum명목상 구매 금액.
user_id사용자 ID (v1).
virtual_currency_amount게임머니 금액.

전체 매개 변수 목록은 여기에서 확인할 수 있습니다.

트리거 추가

트리거를 추가하려면 이벤트 아래에 하나 이상의 데이터 레이어 변수가 있어야 합니다.

: 사용자가 결제 상태 페이지에 방문한 후에 Facebook으로 정보를 보내고 싶습니다.

태그 추가

이 단계는 사용하는 웹 분석 시스템에 따라 다를 수 있습니다. 여기서는 Google Analytics를 사용합니다.

: 사용자가 상태 페이지로 이동합니다. 이 이벤트 정보와 결제 금액 및 통화를 Google Analytics(통화는 Google Analytics에서 사용자 정의한 메트릭 사용)로 전송하려고 합니다.

Note:
구매 이벤트의 경우, 사용자가 브라우저 창을 열어 두어야 하는 다른 이벤트가 있기 때문에 사용자 구매 확인 — clickPayButton — 을 강력하게 권장합니다. 사용자가 탭을 닫기 전까지 거래 확인에서 postMessage 시작을 받는 경우는 거의 없습니다.