Как настроить аналитику для платежного интерфейса в GTM

Как это работает

В инструкции описана базовая интеграция сторонних сервисов веб-аналитики с платежным интерфейсом Иксоллы, включая получение данных из событий и параметров.

Note
Из-за различных внешних факторов точность данных веб-аналитики может снижаться. К таким факторам относятся: блокировщики скриптов, разрывы соединений, прерывание сценария, время жизни сессии и т. д.

Как настроить

Для интеграции веб-аналитики выполните в Google Tag Manager (GTM) следующие действия:

  1. Добавьте скрипт в пользовательский тег HTML.
  2. Определите переменные.
  3. Добавьте триггеры.
  4. Добавьте теги.
  5. Опубликуйте изменения.

Note

Если вы вносите изменения в компонент уже настроенной веб-аналитики для продукта Платежи, чтобы они вступили в силу, вам необходимо только опубликовать их, не изменяя настройки других компонентов.

Пример: Если вы добавляете только пользовательский тег HTML при опубликованных ранее переменных, опубликуйте только изменения тега. Повторно настраивать другие компоненты веб-аналитики не нужно.

Добавление скрипта в пользовательский тег HTML

  1. Перейдите в ваш аккаунт GTM в раздел Теги.
  2. Нажмите Создать.

  1. Нажмите на область блока Конфигурация тега.
  2. Выберите в списке тип тега Пользовательский HTML.

  1. В поле HTML вставьте скрипт.

Note
Если вы хотите проверить скрипт в тестовом окружении (sandbox-режиме), для параметра 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 отобразится в разделе Теги. Скрипт активируется триггером при открытии платежного интерфейса.

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

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

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

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

События

СобытиеОписание
show-error-pageВывод ошибки. В value передается текст ошибки.
open-{state_name}Открытие страницы платежного интерфейса.
create-invoiceСоздание заявки на оплату на стороне Иксоллы.
close-widgetЗакрытие платежного интерфейса.
click-email-submitОтправка email со страницы статуса.
click-custom-package-continueНажатие на кнопку Далее при покупке произвольного количества виртуальной валюты.
click-commentНажатие на кнопку для отправки комментария.
click-buy-packageНажатие на кнопку Купить при покупке пакета виртуальной валюты.
click-buy-gift-packageНажатие на кнопку при покупке пакета виртуальной валюты в подарок.
click-buy-gift-custom-packageНажатие на кнопку при покупке произвольного количества виртуальной валюты в подарок.
click-btn-shareНажатие на кнопку для шаринга в социальной сети. В 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Смена статуса платежа. Если пользователь закрывает страницу или платежный интерфейс и статус меняется после закрытия, сообщение о событии не отправляется.
external-link-openПереход на внешний ресурс. В параметре url передается адрес, по которому происходит переход.
dimensionsОткрытие платежного интерфейса в iframe. В параметрах width и height передается ширина и высота iframe.
status-redeemПогашение купона на платежной форме.
focus-changeИзменение фокуса на элементах виджета платежного интерфейса. Состояние фокуса передается в параметре hasFocus, может принимать значение true или false.
statusПереход на страницу статуса платежа. Могут передаваться следующие параметры:
  • status — статус платежа;
  • email — email-адрес пользователя;
  • invoice — идентификатор транзакции;
  • virtualCurrencyAmount — количество приобретенной виртуальной валюты;
  • userId — идентификатор пользователя;
  • discount — примененная к платежу скидка.
external-payment-openedПереход из платежного интерфейса на внешнюю платежную систему или верификацию 3-D Secure.
returnПереход на следующий шаг после совершения платежа на странице платежной системы. Если пользователь возвращается в платежный интерфейс, название шага передается в параметре nextState. Если пользователь перенаправляется на внешний ресурс, адрес страницы передается в параметре redirectUrl.
add_saved_account_errorОшибка при сохранении платежного аккаунта.
cancel_save_accountОтмена пользователем сохранения платежного аккаунта.
add_saved_accountУспешное сохранение платежного аккаунта.

Параметры

ПараметрТипОписание
actionstringИмя события.
valuestringДополнительный параметр, содержит специфические параметры события, которые меняются в зависимости от выбора пользователя.
statestringСтраница платежного интерфейса, на которой совершено действие.
datestringДата и время в формате GMT.
millisecondsnumberДата и время в формате Unix time.
timezonestringЧасовой пояс пользователя.
session_idstringИдентификатор сессии. К сессии относятся действия пользователя на протяжении 30 минут или до момента закрытия платежного интерфейса. Сессия начинается с момента открытия платежного интерфейса и сохраняется при перезагрузке страницы, на которой открыт платежный интерфейс.
payment_countrystringСтрана платежа.
purchase_invoice_idnumberИдентификатор заявки на оплату в системе Иксоллы.
purchase_external_idstringИдентификатор заявки на оплату в системе партнера.
purchase_typestringТип покупки. Может принимать значение: virtual item, virtual currency, pay2play, subscription.
purchase_sumnumberНоминальная сумма покупки.
purchase_currencystringВалюта покупки.
purchase_skustringАртикул товара в покупке.
purchase_digital_content_skustringАртикул пакета игровых ключей в покупке.
purchase_descriptionstringОписание покупки.
virtual_currency_amountnumberКоличество виртуальной валюты.
coupon_codestringКод купона.
subscription_package_external_idnumberID подписки.
subscription_package_namestringИдентификатор подписки.
subscription_package_descriptionstringОписание подписки.
total_sumnumberИтоговая сумма покупки с учетом всех комиссий.
total_sum_currencystringВалюта итоговой суммы покупки.
user_idstringID пользователя (v1).
user_countrystringСтрана пользователя.
payment_instance_namestringНазвание способа оплаты.

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

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

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

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

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

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

Note
Для отслеживания событий, связанных с покупкой, рекомендуется использовать подтверждение платежа пользователем — clickPayButton — так как любое последующее событие происходит в открытом окне браузера. Подтверждение платежа не всегда отправляется через postMessage до того, как пользователь закрыл вкладку.

Публикация изменений

  1. Перейдите в раздел Обзор и нажмите Отправить.

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

    В другой раз

    Спасибо за обратную связь!
    Последнее обновление: 16 мая 2022

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

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