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>

スクリプトは決済UIが開くようトリガーします。

変数を定義

データレイヤー変数の2つのセットを定義する必要があります:

  • イベント-トリガーを作成するために使用され、事前定義された値があります
  • パラメータ-情報を分析システムに送るために使用され、任意の値を返すことができます

変数の追加方法:

イベント

名前説明
status支払いインターフェースが開いている間のみ更新できるシステム内の支払いステータス。これは、ユーザーがブラウザウィンドウを開いた状態にしておく限り、ステータスの変更に基づきイベントを設定できます。利用可能なステータス:'created'、'processing'、'done'、'cancel'、'xsollaRefund'、'held'、'error'。
choosePaymentMethodユーザーは支払い方法を選択しました。利用可能なステータス:'true'。
clickPayButtonユーザーは支払いデータを送信した後で確認ボタンをクリックしました。利用可能なステータス:'true'。
changeState支払いフローでのユーザーの手順を追跡。完全なリストはここで参照。利用可能なステータス:'list'-支払い方法のリストのページ'payment'-支払い送信ページ 'status'-支払いステータスページ。

キーパラメータ

名前説明
payment_instance_name決済方法の名前。
actionイベントの名前。
dateGMT時間の日付と時間。
purchase_currency購入通貨。
purchase_invoice_idエクソラシステム側の支払い請求ID。
purchase_sku購入アイテムのSKU。
purchase_digital_content_sku購入したゲームキーパッケージのSKU。
purchase_sum額面購入価格。
user_idユーザーID(v1)。
virtual_currency_amount仮想通貨の量。

パラメータの完全なリストはここから利用できます。

トリガーを追加

トリガーを追加するには、イベントの下にリストされた1つ以上のデータレイヤー変数が必要です。

:ユーザーが支払いステータスページを訪問した後、情報をFacebookに送信したい場合。

タグの追加

この手順は使用するウェブ分析システムにより異なります。一例として、Googleアナリティクスを取り上げます。

:ユーザーはステータスページに進みます。このイベントの情報と支払い金額と通貨をGoogleアナリティクスに送信します(通貨はGoogleアナリティクスではカスタムメトリックです)。

Note:
購入イベントに関しては、ユーザーの支払い確認-clickPayButton-が強く推奨されます。その理由は、その後に続くイベントのすべてでユーザーはブラウザのウィンドウを開いておく必要があるためです。ユーザーがタブを閉じる前に、必ずしも取引の確認に postMessage イニシエーションが実行されるとは限らないためです。