ウェブショップへのリンクアウト経由で購入ボタンを有効にする
なぜ重要なのか
Appleの特定の地域におけるポリシーの最近の更新により、開発者はアプリから外部ウェブサイトへユーザーを誘導し、仮想アイテムの支払いを受け付けることが可能になりました。
Appleの規則にも違反せず、違反による強制措置のリスクを負うことなく、ゲーム内に視認性の高いボタン、バナー、メッセージ、その他のコール・トゥ・アクションを追加することで、ユーザーを安全なブラウザベースのチェックアウト（自身のウェブショップや決済UI）へワンクリックで誘導し、アイテム購入につなげることが可能です。
ウェブショップリンク経由で購入ボタンの統合は、ブラウザベースのチェックアウトを使用して、ゲーム内からアイテム固有の購入を可能にする、迅速かつローコードな方法です。以下の利点があります：- シームレスなフロー — 購入ボタンをタップすると、特定のアイテムのウェブショップ決済画面が開き、チェックアウト後、ユーザーは自動的にゲームへ戻ることができます。
- Apple Pay経由のワンクリック決済ソリューションを含む多様な決済方法に対応しており、迅速かつ使い慣れたモバイルチェックアウトを実現します。
- 迅速なセットアップ — ウェブショップがすでに設定されている場合、ゲームにパラメータ付きのリンクを追加するだけで済みます。
- 即時オンボーディング — もしまだウェブショップをお持ちでない場合でも、すぐにウェブショップを作成し、決済リンクをゲームに追加して公開することで、迅速に開始できます。
この統合オプションにより、購入ボタンの統合だけでなく、個人用設定、紹介プログラム、ロイヤルティシステム、プロモーションコードを含む、ウェブショップ全体の機能をにアクセスできます。
サイトビルダーをベースとしないカスタムのウェブショップを使用しており、かつペイステーションをゲームに直接統合したい場合は、エクソーラモバイルSDK経由の統合をご確認ください。
どのように動作するか
- ユーザーがiOSデバイスでアプリを開きます。
- ユーザーは希望するアイテムの隣にある購入ボタンをタップします。
- アプリは、
user-id、purchase-sku、redirect-urlの各パラメータを含むウェブショップリンクを伴ってブラウザを起動します。 - ウェブショップは自動的にユーザーを認証し、選択されたアイテムの決済UIを表示します。
- ユーザーは決済方法を選択し、購入を完了します。
- ユーザーはディープリンクを介して自動的にゲームに戻されます。
- アプリはウェブフック経由で購入確認を受け取り、購入されたアイテムをユーザーに提供します。
入手方法
- ウェブショップを作成するには：
- iOSアプリに、購入リンク付きボタンを米国のユーザーにのみ表示するロジックを追加するには：
“USA”）である場合、購入リンク付きボタンをユーザーに表示する必要があります。クイックスタート
パブリッシャーアカウントに新規登録して、プロジェクトを作成します
パブリッシャーアカウントは、エクソーラの機能を構成し、アナリティクスや取引を処理するための主要なツールです。
新規登録するには、パブリッシャーアカウントにアクセスしてアカウントを作成してください。プロジェクトを作成するには、サイドメニューのプロジェクトを作成をクリックし、必要な情報を入力します。設定は後で変更できます。
統合プロセスでは、パブリッシャーアカウントでプロジェクト名の横に表示されているプロジェクトIDを入力する必要があります。
ウェブショップテンプレートのセットアップ
- パブリッシャーアカウントでプロジェクトを開きます。
- プロジェクトのメインページで、「フォーカス変更」をクリックし、「リンクアウト経由でウェブショップの購入ボタンを有効にする」を選択します。
- ウェブショップページを作成するステップで、「テンプレートを作成」をクリックします。
- ウェブショップタイプを選択します：
- シングルページショップ — すべてのセクションが1ページに配置されたサイト。
- マルチページウェブポータル — 3つのページで構成されたサイト：メインページ、アイテムカタログページ、ニュースページ。
- 「続ける」をクリックします。
- エクスプレスタブで、App Storeのゲームリンクを追加します。これにより、ゲーム用にカスタマイズされたサイトを素早く作成できます。サイト作成時に、ゲーム画像、タイトル、デベロッパー名、カラースキームが自動で追加されます。
- 「ウェブショップを作成」をクリックします。
アイテムカタログをセットアップ
エクソーラ側で、ゲーム内で販売するアイテムのカタログを作成する必要があります。カタログ設定には、次の方法のいずれかを選択できます：
- アイテムをインポートする：JSONファイルをアップロードして、カタログをパブリッシャーアカウントに簡単に追加します。
- APIコールを使用する：自動化された更新や大規模な更新に最適です。
- App Store、Google Play、またはPlayFabからカタログをインポートする：外部プラットフォームから既存のカタログを直接転送します。
- カタログを手動でセットアップする：パブリッシャーアカウントで直接アイテムを追加または編集します。
ユーザー認証を設定
ユーザーのゲーム内アカウントに購入を付与するには、ゲームのユーザーIDを介した認証を設定してください。
ユーザーが存在することを確認するために、ウェブフック処理も設定する必要があります。このウェブフックは、ウェブショップがゲームからダイレクトリンク経由で開かれた場合の追加の検証を提供し、ゲームクライアント外からウェブショップにアクセスされた場合のユーザー認証にも必須です。
認証を構成するには：
- アプリケーション側では、ユーザー認証ウェブフック処理を実装してください。
ウェブフックを受信した場合、アプリケーションは以下の処理を行う必要があります：
- ウェブフックで渡されたIDでユーザーを検索します。
- その結果に応じて、以下のいずれかのステータスコードを送信します。
- 200 HTTP - ユーザーが見つかった場合のウェブフックからの応答を含むコード
- 404 HTTP - ユーザー IDが見つからない場合のコード
- パーソナライズのためのユーザー属性を送信します。
- パブリッシャーアカウントでプロジェクトを開き、ストアフロント > ウェブサイトセクションへ移動します。
- 必要なサイトのペインで「サイトビルダーを開く」をクリックします。
- ログイン設定ブロックへ移動します。
- 「ユーザーID」オプションを選択します。
- ドロップダウンリストで、「新規ログイン」を選択します。
- ウェブフックを受け取るためのURLを入力してください。このURLは、プロジェクト設定 > ウェブフックで指定されたものと異なる場合があります。
https://で始まる必要があります。http://を使用するとエラーになります。
ユーザーに購入権を付与するために、ウェブフックを設定します。
ウェブフックは、システム内で発生するイベントに関する通知です。特定のイベントが発生すると、エクソーラはHTTPリクエストを送信し、イベントデータをあなたのゲームサーバーに伝送します。これらのウェブフックは、ゲームクライアントやサーバーが、成功または失敗した支払いおよびユーザー認証の試行に関する通知を受け取るために不可欠です。
ウェブフックを有効にする
- パブリッシャーアカウント内のプロジェクトで、プロジェクト設定 >ウェブフックセクションに移動します。
- ウェブフックサーバーフィールドに、ウェブフックを受信したいサーバーのURLを
https://example.com形式で指定します。ウェブフックテストツールで見つけたURLを指定することもできます。 - プロジェクトのウェブフックに署名するための秘密鍵は、デフォルトで生成されます。新しい秘密鍵を生成したい場合は、更新アイコンをクリックします。
- 「ウェブフックを有効にする」をクリックします。
ウェブフックのテスト
決済ソリューションとストアタブで、以下のウェブフックをテストできます：
ユーザー検証（“notification_type”:“user_validation”）：
- curl
1curl -v 'https://your.hostname/your/uri' \
2-X POST \
3-H 'Accept: application/json' \
4-H 'Content-Type: application/json' \
5-H 'Authorization: Signature 13342703ccaca5064ad33ba451d800c5e823db8f' \
6-d '{
7 "notification_type":"user_validation",
8 "settings": {
9 "project_id": 18404,
10 "merchant_id": 2340
11 },
12 "user": {
13 "ip": "127.0.0.1",
14 "phone": "18777976552",
15 "email": "email@example.com",
16 "id": "1234567",
17 "name": "John Smith",
18 "country": "US"
19 }
20}'
注文支払い完了（“notification_type”: “order_paid”）：
- curl
1curl -v 'https://your.hostname/your/uri' \
2-X POST \
3-H 'Accept: application/json' \
4-H 'Content-Type: application/json' \
5-H 'Authorization: Signature d09695066c52c1b8bdae92f2d6eb59f5b5f89843' \
6-d '{
7 "notification_type": "order_paid",
8 "items": [
9 {
10 "sku": "com.xsolla.item_1",
11 "type": "virtual_good",
12 "is_pre_order": false,
13 "quantity": 3,
14 "amount": "1000",
15 "promotions": [
16 {
17 "amount_without_discount": "6000",
18 "amount_with_discount": "5000",
19 "sequence": 1
20 },
21 {
22 "amount_without_discount": "5000",
23 "amount_with_discount": "4000",
24 "sequence": 2
25 }
26 ],
27 "custom_attributes":
28 {
29 "purchased": 0,
30 "attr": "value"
31 }
32 },
33 {
34 "sku": "com.xsolla.item_new_1",
35 "type": "bundle",
36 "is_pre_order": false,
37 "quantity": 1,
38 "amount": "1000",
39 "promotions": []
40 },
41 {
42 "sku": "com.xsolla.gold_1",
43 "type": "virtual_currency",
44 "is_pre_order": false,
45 "quantity": 1500,
46 "amount": null,
47 "promotions": []
48 }
49 ],
50 "order": {
51 "id": 1,
52 "mode": "default",
53 "currency_type": "virtual",
54 "currency": "sku_currency",
55 "amount": "2000",
56 "status": "paid",
57 "platform": "xsolla",
58 "comment": null,
59 "invoice_id": "1",
60 "promotions": [
61 {
62 "amount_without_discount": "4000",
63 "amount_with_discount": "2000",
64 "sequence": 1
65 }
66 ],
67 "promocodes": [
68 {
69 "code": "promocode_some_code",
70 "external_id": "promocode_sku"
71 }
72 ],
73 "coupons": [
74 {
75 "code": "WINTER2021",
76 "external_id": "coupon_sku"
77 }
78 ]
79 },
80 "user": {
81 "external_id": "id_xsolla_login_1",
82 "email": "gc_user@xsolla.com"
83 },
84 "billing": {
85 "notification_type": "payment",
86 "settings": {
87 "project_id": 18404,
88 "merchant_id": 2340
89 },
90 "purchase": {
91 "subscription": {
92 "plan_id": "b5dac9c8",
93 "subscription_id": "10",
94 "product_id": "Demo Product",
95 "date_create": "2014-09-22T19:25:25+04:00",
96 "date_next_charge": "2014-10-22T19:25:25+04:00",
97 "currency": "USD",
98 "amount": 9.99
99 },
100 "total": {
101 "currency": "USD",
102 "amount": 200
103 },
104 "promotions": [{
105 "technical_name": "Demo Promotion",
106 "id": 853
107 }],
108 "coupon": {
109 "coupon_code": "ICvj45S4FUOyy",
110 "campaign_code": "1507"
111 }
112 },
113 "transaction": {
114 "id": 1,
115 "external_id": 1,
116 "payment_date": "2014-09-24T20:38:16+04:00",
117 "payment_method": 1,
118 "payment_method_name": "PayPal",
119 "payment_method_order_id": 1234567890123456789,
120 "dry_run": 1,
121 "agreement": 1
122 },
123 "payment_details": {
124 "payment": {
125 "currency": "USD",
126 "amount": 230
127 },
128 "vat": {
129 "currency": "USD",
130 "amount": 0,
131 "percent": 20
132 },
133 "sales_tax": {
134 "currency": "USD",
135 "amount": 0,
136 "percent": 0
137 },
138 "direct_wht": {
139 "currency": "USD",
140 "amount": 0,
141 "percent": 0
142 },
143 "payout_currency_rate": "1",
144 "payout": {
145 "currency": "USD",
146 "amount": 200
147 },
148 "country_wht": {
149 "currency": "USD",
150 "amount": 2,
151 "percent": 10
152 },
153 "user_acquisition_fee": {
154 "currency": "USD",
155 "amount": 2,
156 "percent": 1
157 },
158 "xsolla_fee": {
159 "currency": "USD",
160 "amount": 10
161 },
162 "payment_method_fee": {
163 "currency": "USD",
164 "amount": 20
165 },
166 "repatriation_commission": {
167 "currency": "USD",
168 "amount": 10
169 }
170 }
171 }
172 ,
173 "custom_parameters": {
174 "parameter1": "value1",
175 "parameter2": "value2"
176 }
177}'
サンドボックスモードでサイトをテスト
サンドボックスモードでサイトの動作をテストするには：
- パブリッシャーアカウントでプロジェクトを開き、ストアフロント > ウェブサイトセクションに移動します。
- 対象サイトのパネルで「サイトビルダーを開」をクリックします。
- 「プレビュー」をクリックします。
- アイテムを選択して購入ボタンをクリックします。
- 決済方法グループから「カード」を選択します。
- テスト用のカードの詳細情報を入力します。残りのフィールドに任意の値を入力します。エラーを発生させるために、不正な情報（カード番号、有効期限、またはCVV）を入力することも可能です。
サイトを公開
- サイトパフォーマンスを向上させるには：
a. 「SEO設定」ブロックでは、検索エンジンやソーシャルネットワークでのページプレビューに使用されるパラメータを設定します。ファビコンをアップロードし、ストアのタイトルと説明を指定し、プレビュー画像を追加します。
b. サイトのローカリゼーションを設定します。
c. ドメインの変更を行います（任意）。これを行うには、「ストアフロント > ウェブサイト」セクションに移動し、該当サイトの画面で「設定」をクリックします。ドメインセクションで、エクソーラドメインの値を編集するか、独自ドメインを設定してください。
- 必要な変更をすべて行い、ウェブストアの準備が整ったら、「公開」をクリックします。
- ビルダーに空のセクション（赤いインジケーター）がありません。
- エクソーラとのライセンス契約が締結されました。
ゲームに購入リンク付きボタンを追加する
説明に従ってを進める前に、アイテムカタログの作成、ユーザー認証の設定、ウェブショップの公開が完了していることを確認してください。
パブリッシャーアカウントでプロジェクトのメインページを開き、「ウェブショップへのリンク経由で購入ボタンを有効にする」フォーカスを選択して関連設定を表示するか、詳細についてはウェブショップに関するドキュメントの関連セクションを参照してください。
ゲームに、ユーザーをウェブショップにリダイレクトして選択したアイテムの支払いを行うボタンを追加します。ボタンには、次の形式のリンクを含める必要があります：https://yourwebshop.xsolla.site/?user-id=<USER_ID>&purchase-sku=<ITEM_SKU>&redirect-url=<RETURN_TO_GAME_URL>。ここで：
yourwebshop.xsolla.siteは、ウェブショップサイトへのリンクです。user-idはシステム内のユーザーIDです。purchase-skuは、ウェブショップカタログからの希望するアイテムのSKUです。redirect-urlは、決済完了後にユーザーがリダイレクトされるウェブページのURLアドレス（例：https://example.com/success）またはディープリンク（例：mygame://open）を指します。ディープリンクを使用する場合は、以下を確認してください：- スキームとパス（例：
mygame://open）を含む正しい形式を使用します。スキームのみ（mygame://）では不十分です。 - ディープリンクがゲームのモバイルアプリケーション内で処理されます。
- スキームとパス（例：
アイテムのSKUを見つけるには（仮想アイテムを例として）：
- パブリッシャーアカウントでプロジェクトを開き、アイテムカタログ > 仮想アイテムセクションに移動します。
- アイテムが配置されているアイテムグループに移動します。
- 特定のアイテムの名前の下にある行からSKUをコピーします。
iOSストアフロントの検出
購入ボタンを表示できるかどうかを判断するには、インストール後の最初のアプリ起動時、または必要に応じてそれ以降の起動時に“USA”の場合、購入ボタンを表示する機能を有効にしてください。
規制条件やプラットフォームポリシーが変更される可能性があるため、将来的に追加の国に対応できるよう、実装が十分柔軟であることを確認してください。
なお、デバイス上のストアフロント値は、ユーザーがシステム設定でApple IDの地域を明示的に更新しない限り変更されません。
- swift
1let countryCode = await Storefront.current?.countryCode
2let showBuyButton = countryCode == "USA"
追加の機能
クエリパラメータをサイトURLで使用することで、ウェブショップの機能にユーザーが素早くアクセスできるようにすることができます。詳細については、クエリパラメータの使用に関する説明を参照してください。
AppsFlyerでのアドバンスドアナリティクス
ユーザーがゲームから直接ウェブ決済UIで購入できるようにリンクを使用する場合でも、AppsFlyerのようなモバイル計測パートナー（MMP）を利用して、購入状況を追跡し、顧客生涯価値（LTV）を測定できます。エクソーラは、モバイルとウェブの両プラットフォームにわたるユーザー獲得、リターゲティング、および購入アクティビティのシームレスな追跡を可能にする2種類の統合方法をサポートしています。
キャンペーンと収益の可視性を完全に保つために、お客様のセットアップに最適なタイプを選択します：
| 統合タイプ | どのように動作するか |
|---|---|
| モバイルアプリS2S統合 — アプリケーション内およびウェブショップでの購入について、完全なLTV（顧客生涯価値）とROAS（広告費用対効果）の測定を可能にします。 |
|
| Web SDK統合 — ウェブショップへのトラフィック誘導を目的とした、ユーザー獲得およびリターゲティングキャンペーンの効果測定・評価を可能にします。 |
|
誤字脱字などのテキストエラーを見つけましたか？ テキストを選択し、Ctrl+Enterを押します。
