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 시작을 받는 경우는 거의 없습니다.
이 기사가 도움이 되었나요?
감사합니다!
개선해야 할 점이 있을까요? 메시지
유감입니다
이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.
이 페이지 평가
이 페이지 평가
개선해야 할 점이 있을까요?

답하기 원하지 않습니다

의견을 보내 주셔서 감사드립니다!
마지막 업데이트: 2021년 8월 24일

오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누릅니다.

문제 보고
콘텐츠를 항상 검토합니다. 여러분의 피드백은 콘텐츠를 개선에 도움이 됩니다.
후속 조치를 위해 이메일을 제공해 주세요
의견을 보내 주셔서 감사드립니다!