GTMで決済ステーション分析をセットアップする方法
どのように動作するか
この説明はサードパーティウェブ分析をエクソラ決済ステーションの支払いフローに統合する場合の基本を取り上げ、イベントやパラメータから価値のあるデータを取得する方法について説明します。
お知らせ
さまざまな外的要因(スクリプトブロッカー、接続の切断、フローの中断、セッションの失効など)がウェブ分析の精度に影響する点について留意してください。
入手方法
ウェブ分析を統合するために、以下のGoogleタグマネージャー(GTM)設定を実行します:
お知らせ
すでに統合されている決済UIのウェブ解析のコンポーネントを変更した場合、変更内容を公開するだけで適用されます。他のコンポーネントの設定を調整する必要はありません。
例:カスタムHTMLタグを追加し、変数がすでに定義されている場合、そのタグに関連する変更内容のみを公開します。他のウェブ解析コンポーネントを繰り返し設定する必要はありません。
カスタムHTMLタグにスクリプトを追加
- GTMであなたのアカウントを開き、タグに移動します。
- 新規をクリックします。

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

- HTMLフィルドで、以下のコードを貼り付けて下さい。
お知らせ
サンドボックスモードでスクリプトをテストするには、
event.origin
パラメータをhttps://sandbox-secure.xsolla.com
に設定します。Copy
- 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>
- トリガーアリアをクリックします。
- すべてのページで動作を起こさせるページビュータイプのトリガーを選択します。
- 保存するをクリックします。

保存されたHTMLタグは、タグセクションに表示されます。スクリプトの実行は、決済UIが開くことをトリガーに行われます。
変数を定義
データレイヤー変数の2つのセットを定義する必要があります:
変数の追加方法:

イベント
イベント | 説明 |
---|---|
show-error-page | ページを開くとエラーが発生します。value パラメータにエラーコードが渡されます。 |
open-{state_name} | 決済インターフェースでページを開く。 |
create-invoice | Xsolla側で請求書を作成する。 |
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で開くときに、width とheight パラメータにiframeの幅と高さが渡されます。 |
status-redeem | 決済フォームでのクーポン引き換えです。 |
focus-change | 決済ステーションウィジェットの要素のフォーカスを変更します。フォーカスの状態はhasFocus パラメータに渡され、true またはfalse です。 |
status | 決済状況のページに移動します。以下のパラメータを渡すことができます:
|
external-payment-open | 決済UIから外部の決済システムまたは3-D安全性検証へのリダイレクト。 |
order-status | 注文状態をdone に変更する。このイベントは、以下のAPIコールのいずれかで注文が作成された場合、決済状況ページから送信されます: |
add_saved_account_error | 決済アカウントの保存中にエラーが発生しました。 |
cancel_save_account | ユーザーによる決済アカウントの保存のキャンセル。 |
add_saved_account | 決済アカウントの保存に成功しました。 |
パラメータ
パラメータ | 種類 | 説明 |
---|---|---|
action | string | イベント名。 |
value | string | 追加パラメータ。ユーザーの選択に応じて変化する特定のイベントパラメータを含みます。 |
state | string | アクションが実行された決済UIページ。 |
date | string | 日付と時刻をGMT形式で表示します。 |
milliseconds | number | 日付と時刻をUnix時間形式で表示します。 |
timezone | string | ユーザーのタイムゾーン。 |
session_id | string | セッションID。セッションには、30分以内、または決済UIが閉じるまでに実行されたすべてのユーザーアクションが含まれます。セッションは、支払いUIが開かれた瞬間から開始され、支払いUIのあるページがリフレッシュされた後に保存されます。 |
payment_country | string | 支払い国。 |
purchase_invoice_id | number | Xsollaシステムの支払い請求書ID。 |
purchase_external_id | string | 相手先のシステムにある支払請求書のID。 |
purchase_type | string | 購入のタイプは:virtual item 、virtual currency 、pay2play 、subscription 。 |
purchase_sum | number | 名目購入額。 |
purchase_currency | string | 通貨を購入します。 |
purchase_sku | string | 購入した商品のSKU。 |
purchase_digital_content_sku | string | 購入したゲームキーのパッケージのSKU。 |
purchase_description | string | 購入説明書。 |
virtual_currency_amount | number | 仮想通貨の金額。 |
coupon_code | string | クーポンコードです。 |
subscription_package_external_id | number | 購読ID。 |
subscription_package_name | string | 購読名。 |
subscription_package_description | string | 購読の説明。 |
total_sum | number | 購入金額の合計。全ての料金が含まれています。 |
total_sum_currency | string | 購入金額の通貨の合計。 |
user_id | string | ユーザーID(v1)。 |
user_country | string | ユーザーの国。 |
payment_instance_name | string | 決済方法の名前。 |
トリガーを追加
トリガーを追加するには、イベントの下にリストされた1つ以上のデータレイヤー変数が必要です。
例:ユーザーが支払いステータスページを訪問した後、情報をFacebookに送信したい場合。

タグの追加
この手順は使用するウェブ分析システムにより異なります。一例として、Googleアナリティクスを取り上げます。
例:ユーザーはステータスページに進みます。このイベントの情報と支払い金額と通貨をGoogleアナリティクスに送信します(通貨はGoogleアナリティクスではカスタムメトリックです)。

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

- バージョンを公開と作成タブで、バージョン名、その説明、およびパブリケイション環境を指定します。
- 公開するをクリックします。

この記事は役に立ちましたか?
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。このページを評価する
このページを評価する
答えたくない
ご意見ありがとうございました!
誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。