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

작동 방식

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

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

획득 방법

웹 분석을 통합하려면, 다음 Google Tag Manager (GTM) 설정을 수행합니다:

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

Note

결제 UI를 위해 이미 통합된 웹 분석의 구성 요소를 변경하려면, 변경 사항 게시에서 적용하면 됩니다. 다른 구성 요소의 설정을 조정할 필요가 없습니다.

예: 사용자 정의 HTML 태그를 추가하고 변수가 이미 정의된 경우, 태그와 관련된 변경 사항만 게시합니다. 다른 웹 분석 구성 요소를 반복하여 설정할 필요가 없습니다.

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

  1. GTM에서 계정을 열고 태그로 이동합니다.
  2. 신규를 클릭합니다.

  1. 태그 구성 영역을 클릭합니다.
  2. 목록에서 사용자 정의 HTML 태그 유형을 선택합니다.

  1. HTML 필드에서 다음 코드를 붙여 넣습니다.

Note
샌드박스 모드에서 스크립트를 테스트하려면 event.origin 매개변수를 https://sandbox-secure.xsolla.com으로 설정하세요.
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>

  1. 트리거 영역을 클릭합니다.
  2. 모든 페이지에서 실행되는 페이지 보기 유형과 함께 트리거를 선택합니다.
  3. 저장을 클릭합니다.

저장된 HTML 태그가 태그 섹션에 표시됩니다. 결제 UI가 열리면 스크립트 실행이 트리거됩니다.

변수 정의

정의해야 하는 두 가지 데이터 레이어 변수:

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

변수 추가 방법:

이벤트

이벤트설명
show-error-page오류 표시. 오류 텍스트가 value에서 전달됩니다.
open-{state_name}결제 UI에서 페이지 열기.
create-invoice엑솔라에서 인보이스 생성.
close-widget결제 UI 닫기.
click-email-submit상태 페이지에서 이메일 전송.
click-custom-package-continue임의이 게임머니 금액을 구매할 때 계속 버튼을 클릭.
click-comment버튼을 클릭하여 의견 게시.
click-buy-package게임머니 패키지를 구매할 때 패키지 구매 버튼을 클릭.
click-buy-gift-package선물하기 위해 게임머니 패키지를 구매할 때 버튼을 클릭.
click-buy-gift-custom-package선물하기 위해 임의의 게임머니 금액을 구매할 때 버튼을 클릭.
click-btn-share버튼을 클릭하여 SNS를 통해 공유. SNS 이름은 value에서 전달됩니다.
click-btn-pay청구 데이터 입력 양식에서 지금 지불 버튼 클릭.
click-btn-continue버튼을 클릭하여 정기결제 구매.
click-btn-apply쿠폰을 사용할 때 적용 버튼을 클릭.
click-btn-activate게임 키를 활성화할 때 활성화 버튼을 클릭.
click-btn-accept버튼을 클릭하여 디지털 콘텐츠 구매.
choose-payment-widget결제 방식 위젯 선택. 위젯 이름이 value에서 전달됩니다.
choose-method결제 방식 선택. 결제 방식 이름이 value에서 전달됩니다.
change-status결제 상태 변경. 사용자가 결제 UI를 닫거나 페이지를 떠나면 상태가 변경되며 이벤트 메시지는 전송되지 않습니다.
external-link-open외부 리소스로 리디렉션. 리디렉션이 일어나는 주소는 url 매개 변수에서 전달됩니다.
dimensionsiframe에서 페이 스테이션이 열릴 때 iframe 너비와 높이는 widthheight 매개 변수에서 전달됩니다.
status-redeem결제 양식에서 쿠폰 사용.
focus-change페이 스테이션 위젯 요소의 포커스 변경. 포커스 상태가 hasFocus 매개 변수에서 전달되며 true 또는 false일 수 있습니다.
status결제 상태 페이지로 이동. 전달될 수 있는 매개 변수:
  • status — 결제 상태
  • email — 사용자 이메일
  • invoice — 트랜잭션 ID
  • virtualCurrencyAmount — 구매된 인게임 재화 금액
  • userId — 사용자 ID
  • discount — 결제에 적용된 할인
external-payment-opened결제 UI에서 외부 결제 시스템 또는 3-D Secure 인증으로 리디렉션합니다.
return결제 시스템 페이지에서 결제한 후 다음 단계로 이동. 사용자가 페이 스테이션으로 반환되면 단계 이름이 nextState 매개 변수에서 전달됩니다. 사용자가 외부 리소스로 리디렉션되는 경우 페이지 주소가 redirectUrl 매개 변수에서 전달됩니다.
add_saved_account_error결제 계정 저장 중 오류가 발생했습니다.
cancel_save_account결제 계정 저장을 사용자가 취소했습니다.
add_saved_account결제 계정 저장에 성공했습니다.

매개 변수

매개변수유형설명
actionstring이벤트 이름.
valuestring추가 매개변수. 사용자의 선택에 따라 달라지는 특정 이벤트 매개변수 포함.
statestring작업이 수행된 결제 UI 페이지.
datestringGMT 형식의 날짜와 시간.
millisecondsnumberUnix 시간 형식의 날짜와 시간.
timezonestring사용자 시간대.
session_idstring세션 ID. 세션에는 30분 이내 또는 결제 UI가 닫히기 전까지의 모든 사용자 작업이 포함됩니다. 세션은 결제 UI가 실행되는 순간부터 시작되며, 결제 UI가 있는 페이지를 새로고침하면 세션이 저장됩니다.
payment_countrystring결제 국가.
purchase_invoice_idnumber엑솔라 시스템의 결제 인보이스 ID.
purchase_external_idstring파트너 시스템의 결제 인보이스 ID.
purchase_typestring구매 유형. 가능한 유형: virtual item, virtual currency, pay2play, subscription.
purchase_sumnumber명목상 구매 금액.
purchase_currencystring게임머니 구매.
purchase_skustring구매한 아이템의 SKU.
purchase_digital_content_skustring구입한 게임 키 패키지의 SKU.
purchase_descriptionstring구매 설명.
virtual_currency_amountnumber게임머니 금액.
coupon_codestring쿠폰 코드.
subscription_package_external_idnumber정기결제 ID입니다.
subscription_package_namestring정기결제 이름.
subscription_package_descriptionstring정기결제 설명.
total_sumnumber총 구매 금액. 모든 비용이 포함되어 있습니다.
total_sum_currencystring총 구매 금액 통화.
user_idstring사용자 ID (v1).
user_countrystring사용자 국가.
payment_instance_namestring결제 방식 이름.

트리거 추가

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

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

태그 추가

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

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

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

변경 사항 게시

  1. 개요로 이동하여 제출을 클릭합니다.

  1. 게시 및 생성 버전 탭에서, 버전 이름, 설명, 발행 환경을 지정합니다.
  2. 게시를 클릭합니다.
  3. 이 기사가 도움이 되었나요?
    감사합니다!
    개선해야 할 점이 있을까요? 메시지
    유감입니다
    이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
    의견을 보내 주셔서 감사드립니다!
    메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.
    이 페이지 평가
    이 페이지 평가
    개선해야 할 점이 있을까요?

    답하기 원하지 않습니다

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

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

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