How to set up Pay Station analytics in GTM

How it works

This recipe covers the basic integration of third-party web analytics into the Xsolla Pay Station payment flow and explains how to get valuable data from events and parameters.

Note:
Keep in mind that various external factors (script-blockers, disconnects, flow drop, or session expiration) affect the accuracy of any web analytics.

Who can use it

Partners who have Pay Station integrated.

How to get it

To integrate web analytics, perform the following GTM settings:

  1. Add script to the custom HTML tag.
  2. Define variables.
  3. Add triggers.
  4. Add tags.

Add script to the custom HTML tag

Create a custom HTML tag and copy/paste the following code:

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>
The script should trigger upon the payment UI opening.

Define variables

There are two sets of Data Layer variables you need to define, including:
  • Events — used to create triggers and have predefined values
  • Parameters — used to feed information to an analytics system and can return any values

How to add a variable:

Events

NameDescription
statusPayment status in the system, which can only be updated while the payment interface is open. This means that as long as a user keeps the browser window open, an event can be set based on status change. Available statuses: 'created', 'processing', 'done', 'cancel', 'xsollaRefund', 'held', 'error'.
choosePaymentMethodA user has chosen a payment method. Available statuses: 'true'.
clickPayButtonA user clicked the confirmation button after submitting their payment data. Available statuses: 'true'.
changeStateTrack a user’s step in the payment flow. See the full list here. Available statuses: 'list' — list of payment methods page, 'payment' — payment submission page, 'status' — payment status page.

Key parameters

NameDescription
payment_instance_namePayment method name.
actionEvent name.
dateDate and time in the GMT format.
purchase_currencyPurchase currency.
purchase_invoice_idPayment invoice ID in the Xsolla system.
purchase_skuSKU of the purchased item.
purchase_digital_content_skuSKU of the purchased game keys package.
purchase_sumNominal purchase amount.
user_idUser ID (v1).
virtual_currency_amountVirtual currency amount.

A full list of parameters is available here.

Add triggers

To add a trigger, you need one or more Data Layer variables listed under events.

EXAMPLE: We want to send information to Facebook after a user visited the payment status page.

Add tags

This step depends on the web analytics system you use. As an example, we’ll review Google Analytics.

EXAMPLE: A user goes to the status page. We want to transfer this event information, as well as the payment amount and currency, to Google Analytics (currency is a custom metric in our Google Analytics).

Note:
For purchase events, we strongly recommend user payment confirmation — clickPayButton — as any further event requires a user to keep the browser window open; it’s not always the case that transaction confirmation gets postMessage initiation before a user closes the tab.