如何在GTM中设置支付中心分析功能

目录

运行机制

本说明介绍将第三方Web分析集成到艾克索拉支付中心的基本方法，并介绍如何从事件和参数获取有价值的数据。

注：
请注意，有许多外部因素（脚本拦截器、网络断开、流量中断或会话过期等）会影响Web分析的准确性。

如何获取

要集成Web分析，请完成以下Google跟踪代码管理器(GTM)操作：

  1. 添加脚本至自定义HTML代码。
  2. 定义变量。
  3. 添加触发。
  4. 添加代码。
  5. 发布更改。

注：

如果更改了支付UI已集成的Web分析的组件，只需要发布更改来使更改生效。无需调整其他组件的设置。

例如：如果添加了自定义HTML代码且已定义变量，只需要发布与该代码相关的更改，无需重复设置其他Web分析组件。

添加脚本至HTML标记

  1. 在GTM中打开您的帐号，然后前往代码。
  2. 单击新建。

  1. 单击代码配置部分。
  2. 在列表中选择自定义HTML代码类型。

  1. 在HTML字段中，粘贴以下代码。

注：
要在沙盒模式下测试脚本，请将event.origin参数设置为https://sandbox-secure.xsolla.com。
Copy
Full screen
Small screen
  • js
<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在艾克索拉侧创建发票。
widget-close关闭支付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单击分享到社交网络的按钮。社交网络名称包含在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参数中传递。
dimensions在iframe中打开支付中心时，iframe的宽度和高度在width和height参数中传递。
status-redeem在支付表单中兑换优惠券。
focus-change更改支付中心小组件的焦点元素。焦点状态在hasFocus参数中传递，可以是true或false。
status前往支付状态页。可传入以下参数：
  • status — 支付状态
  • email — 用户邮箱
  • invoice — 交易ID
  • virtualCurrencyAmount — 所购虚拟货币数量
  • userId — 用户ID
  • discount — 付款应用的折扣
external-payment-open从支付UI重定向至外部支付系统或3-D Secure验证。
return在支付系统页面中付款后前往下一步。如果让用户返回支付中心，在该步骤的名称在nextState参数中传递。如果将用户重定向到外部资源，则页面地址在redirectUrl参数中传递。
order-status将订单状态更改为done。如通过以下API调用之一创建了订单，则从支付状态页面发送该事件：
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发送信息。

添加标记

此步骤具体取决于您所用的Web分析系统。此处以Google Analytics（分析）为例。

示例：用户进入了状态页面。我们希望将此事件信息以及付款金额和货币种类发送给Google Analytics（分析）。货币种类是我们在Google Analytics（分析）中的自定义统计项。

注：
对于购买事件，强烈建议使用用户支付确认事件（clickPayButton），因为接下来的事件需要用户保持浏览器窗口打开，而有时候用户关闭浏览器标签页时，交易确认的postMessage还没有发起。

发布更改

  1. 前往概览，然后单击提交。

  1. 在发布及创建版本选项卡中，指定版本名称、描述及发布环境。
  2. 单击发布。

    3. 本文对您的有帮助吗？
    谢谢！
    我们还有其他可改进之处吗？ 留言
    非常抱歉
    请说明为何本文没有帮助到您。 留言
    感谢您的反馈！
    我们会查看您的留言并运用它改进用户体验。
    为此页面评分
    为此页面评分
    我们还有其他可改进之处吗？

    不想回答

    感谢您的反馈！
    上次更新时间: 2022年8月8日

    发现了错别字或其他内容错误？ 请选择文本，然后按Ctrl+Enter。

报告问题
我们非常重视内容质量。您的反馈将帮助我们做得更好。
请留下邮箱以便我们后续跟进
感谢您的反馈！