웹샵 솔루션으로의 외부 구매 연결을 통해 Buy Button 활성화
중요한 이유
최근 특정 지역 내 Apple 정책의 업데이트에 따라, 이제 개발자는 사용자가 앱에서 외부 웹 사이트로 이동하여 가상 아이템을 결제하도록 유도할 수 있습니다.
Apple의 규정 위반이나 단속 위험 없이 클릭 한 번으로 사용자를 게임에서 안전 브라우저 기반의 체크아웃(웹샵 솔루션 또는 결제 UI)으로 바로 이동시켜 아이템을 구매할 수 있게 돕는 버튼, 배너, 메시지 및 기타 콜 투 액션을 추가할 수 있습니다.
웹 상점 링크를 통한 구매 버튼 통합은 브라우저 기반 결제를 사용하여 게임 내 특정 아이템을 구매할 수 있도록 빠르고 적은 코드로 구현하는 방법입니다. 이 방법은 다음과 같은 장점을 제공합니다.- 원활한 흐름 - 구매 버튼을 탭하면 특정 아이템 구매를 위한 웹 상점 결제 페이지가 열려, 결제에 성공하면 사용자가 자동으로 게임으로 돌아갈 수 있습니다.
- 신속하고 친숙한 모바일 결제를 위해 Apple Pay를 통한 원클릭 결제를 포함하여 다양한 결제 방법을 지원합니다.
- 신속한 설정 - 웹 상점이 이미 설정되어 있다면, 게임에 매개 변수가 포함된 링크를 추가하기만 하면 됩니다.
- 즉시 참여 - 웹 상점이 아직 없다면, 즉시 웹 상점을 만들고 게임에 결제 링크를 추가하여 빠르게 시작하고 서비스를 출시할 수 있습니다.
이 통합 옵션으로 구매 버튼 통합뿐만 아니라 개인화, 추천 프로그램, 로열티 시스템, 프로모션 코드 등과 같은 기능을 포함한 웹 상점의 모든 기능을 사용할 수 있습니다.
웹 사이트 빌더 기반으로 하지 않는 맞춤형 웹 상점을 사용 중이며 페이 스테이션을 직접 게임에 통합하려고 할 경우 엑솔라 모바일 SDK를 통한 통합을 확인하세요.
작동 방식
- 사용자가 iOS에서 앱을 엽니다.
- 사용자가 원하는 아이템 옆에 있는
Buy Button 을 누릅니다. - 앱이 웹샵 솔루션 링크가 있는 브라우저를 실행하며 이 링크는
user-id,purchase-sku및redirect-url매개 변수를 포함합니다. - 웹샵 솔루션은 자동으로 사용자를 인증하고 선택한 아이템에 대한 결제 UI를 표시합니다.
- 사용자가 결제 방법을 선택하고 구매를 완료합니다.
- 사용자는 딥 링크를 통해 자동으로 게임으로 다시 리디렉션됩니다.
- 앱은 웹훅을 통해 구매 확인을 수신하고 구매한 아이템을 배송합니다.
획득 방법
- 웹 상점 생성:
- 구매 링크 버튼을 미국 사용자만 볼 수 있도록 설정하려면 iOS 앱에 논리를 추가하세요.
“USA”)인 경우, 사용자에게 구매 링크 버튼이 표시되어야 합니다.빠른 시작
관리자 페이지 가입 및 프로젝트 생성
관리자 페이지는 엑솔라 기능을 구성하고 분석과 트랜잭션 작업에 사용하는 기본 도구입니다.
가입하려면 관리자 페이지로 이동하여 계정을 생성합니다. 프로젝트를 만들려면 사이드 메뉴에서 프로젝트 생성을 클릭하고 필요한 정보를 입력합니다. 설정은 나중에 수정할 수 있습니다.
연동을 처리하는 동안 프로젝트 이름 옆의 관리자 페이지에서 확인할 수 있는 프로젝트 ID를 제공해야 합니다.
웹 상점 템플릿 설정
- 프로젝트를 관리자 페이지에서 엽니다.
- 프로젝트 메인 페이지에서 포커스 변경을 클릭하고 웹 상점으로의 외부 구매 연결을 통해 구매 버튼 활성화를 선택합니다.
- 웹 상점 페이지 생성 단계에서 템플릿 생성을 클릭합니다.
- 웹 상점 유형 선택:
- 단일 페이지 상점 - 모든 섹션이 단일 페이지에 배치된 사이트.
- 다중 페이지 웹 포털 - 메인 페이지, 아이템 카탈로그 페이지, 뉴스 페이지 등 세 개의 독립된 페이지로 구성된 사이트.
- 계속을 클릭합니다.
- Express 탭에서 앱 스토어의 게임 링크를 추가합니다. 이렇게 하면 게임 이미지, 타이틀, 개발자 이름, 색 구성표가 사이트 생성 중에 자동으로 추가되므로 게임에 맞게 맞춤화된 사이트를 신속하게 생성할 수 있습니다.
- 웹샵 솔루션 생성을 클릭합니다.
아이템 카탈로그 설정
엑솔라 측에서는 게임에서 판매하는 아이템의 카탈로그를 생성해야 합니다. 다음 방법 중 하나를 선택하여 카탈로그를 설정할 수 있습니다:
- 아이템 가져오기: JSON 파일을 업로드하여 관리자 페이지에 카탈로그를 빠르게 추가할 수 있습니다.
- API 호출 사용 – 자동 또는 대규모 업데이트에 이상적입니다.
- 앱스토어, Google Play 또는 PlayFab에서 카탈로그 가져오기: 외부 플랫폼에서 기존 카탈로그를 직접 전송할 수 있습니다.
- 수동으로 카탈로그 설정: 관리자 페이지에서 아이템을 직접 추가하고 편집할 수 있습니다.
사용자 인증 설정
사용자의 게임 내 계정에 구매 권한을 부여하려면 게임에서 사용자 ID를 통해 인증을 구성하십시오.
또한 사용자가 존재하는지 확인하기 위해 웹훅 처리를 설정해야 합니다. 이 웹훅은 게임에서 직접 링크를 통해 웹샵 솔루션을 열 때 추가 유효성 검사를 제공하며, 게임 클라이언트 외부에서 웹샵 솔루션에 액세스하는 경우 사용자 인증에 필요합니다.
인증을 구성하는 방법:
- 애플리케이션 측에서 사용자 유효성 검사 웹훅 처리를 구현합니다.
웹훅 수신 시 애플리케이션에서 수행해야 하는 작업:
- 웹훅에 전달된 ID로 사용자 검색.
- 결과에 따라 다음 상태 코드 중 하나를 전송:
- 사용자를 찾은 경우 웹훅의 응답이 포함된 200 HTTP 코드
- 사용자를 찾을 수 없는 경우 404 HTTP 코드
- 사용자 맞춤 설정을 위해 사용자 특성 전송
- 관리자 페이지에서 프로젝트를 열고 스토어프런트 > 웹 사이트 섹션으로 이동합니다.
- 필수 사이트 창에서, 웹사이트 빌더 열기를 클릭합니다.
- 로그인 설정 블록으로 이동합니다.
- 사용자 ID 옵션을 선택합니다.
- 드롭다운 목록에서 새 로그인을 선택합니다.
- 웹훅 솔루션을 수신할 URL을 입력합니다. 이 URL은 프로젝트 설정 > 웹훅 솔루션에 지정된 URL과 다를 수 있습니다.
https://로 시작해야 합니다. http://를 사용하면 오류가 발생합니다.
사용자에게 구매 권한을 부여하도록 웹훅을 구성합니다
웹훅은 시스템에서 발생하는 이벤트에 대한 알림입니다. 특정 이벤트가 발생하면 엑솔라는 HTTP 요청을 전송하며, 이때 이벤트 데이터를 게임 서버로 전송합니다. 이러한 웹훅은 게임 클라이언트 및/또는 서버가 결제 및 사용자 인증 시도의 성공 및 실패에 대한 알림을 수신하기 위해 필수입니다.
웹훅 사용 방법
- 관리자 페이지의 프로젝트에서 프로젝트 설정 > 웹훅 솔루션 섹션으로 이동합니다.
- 웹훅 서버 필드에서
https://example.com형식으로 웹훅을 수신할 서버 URL을 지정합니다. 웹훅 테스트용 도구에서 찾은 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은 지불 후 사용자가 리디렉션되는 웹 페이지(예:https://example.com/success) 또는 딥 링크(예:mygame://open)에 대한 URL 주소입니다. 딥 링크 사용 시- 구조 및 경로(예:
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)를 측정할 수 있습니다. 엑솔라는 두 가지 통합 유형을 지원하여 모바일과 웹 플랫폼 모두에서 사용자 확보, 리타겟팅 및 구매 활동을 원활하게 추적할 수 있습니다.
설정에 가장 적합한 유형을 선택하여 캠페인과 수익에 대한 완전한 가시성을 유지하세요:
| 통합 유형 | 작동 방식 |
|---|---|
| 모바일 앱 S2S 통합 - 이를 통해 애플리케이션 내 및 웹샵 솔루션에서의 구매에 대한 전체 LTV 및 광고 지출 대비 수익률(ROAS) 측정을 완료할 수 있습니다. |
|
| 웹 SDK 통합 - 이를 통해 웹샵 솔루션으로 트래픽을 유도하기 위한 사용자 확보 및 리타겟팅 캠페인의 효과를 측정하고 평가할 수 있습니다. |
|
오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.
