Как настроить аналитику для платежного интерфейса в 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>

Скрипт должен активироваться триггером при открытии платежного интерфейса.

Определение переменных

Необходимо определить два набора переменных уровня данных:

  • события — используются для создания триггеров и имеют предустановленные значения;
  • параметры — используются для отправки данных в систему аналитики и могут возвращать любые значения.

Как добавить переменную:

События

НазваниеОписание
statusСтатус платежа. Обновляется, пока открыт платежный интерфейс. События о смене статуса отправляются, пока пользователь не закрыл окно браузера. Возможные значения: created, processing, done, cancel, xsollaRefund, held, error.
choosePaymentMethodВыбор пользователем способа оплаты. Возможные значения: true.
clickPayButtonНажатие пользователем кнопки подтверждения платежа после ввода платежных реквизитов. Возможные значения: true.
changeStateПереход пользователя по страницам платежного интерфейса. Полный список доступен здесь. Возможные значения: list — список способов оплаты, payment — форма оплаты, status — страница статуса.

Ключевые параметры

НазваниеОписание
payment_instance_nameНазвание способа оплаты.
actionИмя события.
dateДата и время в формате GMT.
purchase_currencyВалюта покупки.
purchase_invoice_idИдентификатор заявки на оплату в системе Иксоллы.
purchase_skuАртикул товара в покупке.
purchase_digital_content_skuАртикул пакета игровых ключей в покупке.
purchase_sumНоминальная сумма покупки.
user_idID пользователя (v1).
virtual_currency_amountКоличество виртуальной валюты.

Полный список параметров доступен здесь.

Добавление триггеров

Чтобы добавить триггер, необходимо определить одну или несколько переменных уровня данных для событий.

ПРИМЕР: Вы хотите отправлять в Facebook информацию о переходе пользователя на страницу статуса.

Добавление тегов

Настройка этого шага зависит от системы аналитики, которую вы используете. Ниже приведен пример из Google Аналитики.

ПРИМЕР: Пользователь перешел на страницу статуса. Вы хотите отправить информацию об этом событии, а также сумму и валюту платежа, в Google Аналитику (валюта добавлена в Google Аналитику как пользовательская метрика).

Note
Для отслеживания событий, связанных с покупкой, рекомендуется использовать подтверждение платежа пользователем — clickPayButton — так как любое последующее событие происходит в открытом окне браузера. Подтверждение платежа не всегда отправляется через postMessage до того, как пользователь закрыл вкладку.
Была ли статья полезна?
Спасибо!
Что может сделать страницу еще лучше? Сообщение
Жаль, что так произошло
Расскажите, почему статья не была полезна. Сообщение
Спасибо за обратную связь!
Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.
Оценить страницу
Оценить страницу
Что может сделать страницу еще лучше?

В другой раз

Спасибо за обратную связь!
Последнее обновление: 24 августа 2021

Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.

Сообщите о проблеме
Мы постоянно улучшаем качество нашей документации. Ваш отзыв поможет нам в этом.
Укажите email-адрес, чтобы мы могли связаться с вами
Спасибо за обратную связь!