GTMで決済ステーション分析をセットアップする方法

どのように動作するか

この説明はサードパーティウェブ分析をエクソラ決済ステーションの支払いフローに統合する場合の基本を取り上げ、イベントやパラメータから価値のあるデータを取得する方法について説明します。

お知らせ
さまざまな外的要因(スクリプトブロッカー、接続の切断、フローの中断、セッションの失効など)がウェブ分析の精度に影響する点について留意してください。

入手方法

ウェブ分析を統合するために、以下のGoogleタグマネージャー(GTM)設定を実行します:

  1. カスタムHTMLタグにスクリプトを追加します。
  2. 変数を定義します。
  3. トリガーを追加します。
  4. タグを追加します。
  5. 変更内容を公開します。

お知らせ

すでに統合されている決済UIのウェブ解析のコンポーネントを変更した場合、変更内容を公開するだけで適用されます。他のコンポーネントの設定を調整する必要はありません。

例:カスタムHTMLタグを追加し、変数がすでに定義されている場合、そのタグに関連する変更内容のみを公開します。他のウェブ解析コンポーネントを繰り返し設定する必要はありません。

カスタムHTMLタグにスクリプトを追加

  1. GTMであなたのアカウントを開き、タグに移動します。
  2. 新規をクリックします。

  1. タグ構成エリアをクリックします。
  2. リストからカスタムHTMLタグタイプを選択します。

  1. HTMLフィルドで、以下のコードを貼り付けて下さい。

お知らせ
サンドボックスモードでスクリプトをテストするには、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タグは、タグセクションに表示されます。スクリプトの実行は、決済UIが開くことをトリガーに行われます。

変数を定義

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

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

変数の追加方法:

イベント

イベント説明
show-error-pageページを開くとエラーが発生します。valueパラメータにエラーコードが渡されます。
open-{state_name}決済インターフェースでページを開く。
create-invoiceXsolla側で請求書を作成する。
widget-close決済インターフェースを閉じる。
click-email-submitステータスページからメールを送信する。
click-custom-package-continue続けるボタンをクリックして任意の量の仮想通貨を購入する。
click-commentボタンをクリックしてコメントを投稿する。
click-buy-packageパッケージの購入ボタンをクリックして、仮想通貨のパッケージを購入する。
click-buy-gift-packageボタンをクリックして、仮想通貨のパッケージをギフト用に購入する。
click-buy-gift-custom-packageボタンをクリックして、任意の量の仮想通貨をギフト用に購入する。
click-btn-shareボタンをクリックしてSNSで共有する。SNSの名前が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で開くときに、widthheightパラメータにiframeの幅と高さが渡されます。
status-redeem決済フォームでのクーポン引き換えです。
focus-change決済ステーションウィジェットの要素のフォーカスを変更します。フォーカスの状態はhasFocusパラメータに渡され、trueまたはfalseです。
status決済状況のページに移動します。以下のパラメータを渡すことができます:
  • status — 決済状況
  • email — ユーザーのメール
  • invoice — トランザクションID
  • virtualCurrencyAmount — 購入した仮想通貨の金額
  • userId — ユーザーID
  • discount — 決済に適用される割引
external-payment-open決済UIから外部の決済システムまたは3-D安全性検証へのリダイレクト。
order-status注文状態をdoneに変更する。このイベントは、以下のAPIコールのいずれかで注文が作成された場合、決済状況ページから送信されます:
add_saved_account_error決済アカウントの保存中にエラーが発生しました。
cancel_save_accountユーザーによる決済アカウントの保存のキャンセル。
add_saved_account決済アカウントの保存に成功しました。

パラメータ

パラメータ種類説明
actionstringイベント名。
valuestring追加パラメータ。ユーザーの選択に応じて変化する特定のイベントパラメータを含みます。
statestringアクションが実行された決済UIページ。
datestring日付と時刻をGMT形式で表示します。
millisecondsnumber日付と時刻をUnix時間形式で表示します。
timezonestringユーザーのタイムゾーン。
session_idstringセッションID。セッションには、30分以内、または決済UIが閉じるまでに実行されたすべてのユーザーアクションが含まれます。セッションは、支払いUIが開かれた瞬間から開始され、支払いUIのあるページがリフレッシュされた後に保存されます。
payment_countrystring支払い国。
purchase_invoice_idnumberXsollaシステムの支払い請求書ID。
purchase_external_idstring相手先のシステムにある支払請求書のID。
purchase_typestring購入のタイプは:virtual itemvirtual currencypay2playsubscription
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決済方法の名前。

トリガーを追加

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

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

タグの追加

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

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

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

変更内容を公開する

  1. 概要に移動し、提出するをクリックします。

  1. バージョンを公開と作成タブで、バージョン名、その説明、およびパブリケイション環境を指定します。
  2. 公開するをクリックします。
  3. この記事は役に立ちましたか?
    ありがとうございます!
    改善できることはありますか? メッセージ
    申し訳ありません
    この記事が参考にならなかった理由を説明してください。 メッセージ
    ご意見ありがとうございました!
    あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
    このページを評価する
    このページを評価する
    改善できることはありますか?

    答えたくない

    ご意見ありがとうございました!
    最終更新日: 2023年3月21日

    誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。

問題を報告する
当社は常にコンテンツを見直しています。お客様のご意見は改善に役立ちます。
フォローアップ用のメールをご提供してください
ご意見ありがとうございました!