How to set up Pay Station analytics in GTM

How it works

This instruction 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.

How to get it

To integrate web analytics, perform the following Google Tag Manager (GTM) settings:

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

Add script to the custom HTML tag

1. Open your account in GTM and go to Tags.
2. Click New.

3. Click the Tag Configuration area.
4. Choose the Custom HTML tag type from the list.

5. In the HTML field, paste the following code.

<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>

6. Click the Triggering area.
7. Select a trigger with the Page View type firing on all pages.
8. Click Save.

The saved HTML tag will be displayed in the Tags section. The script execution will be triggered by 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

Parameters

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).

Publish changes

1. Go to Overview and click Submit.

2. In the Publish and Create Version tab, indicate a version name, its description, and a publication environment.
3. Click Publish.



Was this article helpful?

Thank you!

Is there anything we can improve? Message Send

We’re sorry to hear that

Please explain why this article wasn’t helpful to you. Message Send

Thank you for your feedback!

We’ll review your message and use it to help us improve your experience.
Rate this page


Rate this page

Is there anything we can improve? Send

Don’t want to answer

Thank you for your feedback!

Last updated: March 21, 2023

Found a typo or other text error? Select the text and press Ctrl+Enter.