一.简介
WING H5 SDK主要是为满足HTML5类型游戏需要,为此类游戏提供登录、支付、数据收集等通用功能。该SDK适用于pc端与移动端的浏览器,facebook的gameroom,以及移动端应用程序的webview等HTML5运行环境。
二.功能简介
2.1.登录
SDK提供了有界面登录方式和无界面登录方式。有界面方式内置所有已经集成的登录方式,无需编写登录界面就可以集成多种登录方式。而无界面方式则需要CP提供相对应的登录界面来调用具体登录方式。
目前WING H5 SDK 支持的登录方式有Guest,Facebook,Google,Chipsgames H5游戏平台。
2.2.支付
支付包括Facebook支付以及Web支付,其中Web支付又包括了多种支付方式比如Paypal、MOL、Xsolla等。
2.3.数据收集
数据收集模块提供了数据收集的接口,多渠道灵活调用。数据收集包含了丰富的应用内的事件类型,还支持用户自定义事件类型。
目前支持目前支持WINGSDK和Facebook两个平台。
2.4.调试模式
调试模式提供窗口查看日志,帮助开发者更快的集成SDK与定位相关的开发问题。
三.集成WING H5 SDK
3.1.适用范围
该SDK适用于HTML5类型的游戏或应用,特别是在Facebook上线的页游。为这些游戏提供登录、支付、数据收集等基础功能,同时提供调试窗口,满足游戏能顺利运行的基本功能需求,更多的功能目前还在持续开发中。
3.2.如何集成
WING H5 SDK推荐使用标签方式引入JS,同时也支持AMD、CommonJS等方式引入。
1 2 |
<script src="https://d1wh375sy22h3n.cloudfront.net/h5/v1.11/wing.min.js" type="text/javascript"></script> |
3.3.接口说明
以下是WING H5 SDK各个接口的具体使用说明。
3.3.1.初始化
初始化方法:
1 2 |
wing.init(paramObj); |
初始化sdk库,在调用其他方法前,必须先调用此方法。
参数说明:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
appId | String | Y | 应用ID |
appKey | String | Y | 应用秘钥 |
sdkType | String | N | sdk类型:html5或者fbinstant(facebook小游戏),默认为’html5’ |
platform | String | N | 使用平台:html5,gameroom,fbinstant,默认为’html5’ |
debug | Boolean | N | 调试模式开关,true|false,默认是关闭false,打开后会显示log按钮悬浮窗,上线时请关闭或者不设置 |
示例:
1 2 3 4 5 6 |
wing.init({ appId: 'f7f9a9d18da611e5a0be000d3a906774', appKey: 'CFHF7nQCCaojCX6Sm4eT1GEIWRprimaw', debug: true }); |
3.3.2.登录
3.3.2.1.获取登录方式
方法:wing.user.getLoginWay();
返回结果参数说明:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
code | Number | Y | 见代码说明 |
msg | String | Y | 结果描述 |
size | Number | Y | 登录方式数量 |
data | JSON | Y | 见下表 |
data数据结构:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
platform | String | Y | 见代码说明 |
logoUrl | String | Y | Logo地址 |
示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//获取登录方式 var loginWay = wing.user.getLoginWay(); //返回结果 { "data": [ { "platform": "GUEST",//平台类型 "logoUrl": "http://abc.com/GUEST.png"//平台logo }, { "platform": "APPSELF", "logoUrl": "http://abc.com/APPSELF.png" } ], "code": 200, "msg": "成功", "size": 2 } |
注: 如发现获取的登录方式为空,请检查:
1. 对应登录平台在SDK后台是否已打开H5 开关。
2. 对应登录平台在SDK后台是否已修改为正式状态。
3. 如果对应登录平台在SDK后台为测试状态,需要将当前设备id 添加到测试设备列表后,才能看到对应登录方式。
3.3.2.2.用户登录
方法:wing.user.login(paramObj);
参数说明:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
platform | String | N | 见代码说明 |
FB | Boolean | N | Facebook内嵌游戏(页游)需要设置为true |
success | Object | N | 成功回调方法 |
fail | Object | N | 失败回调方法 |
cancel | Object | N | 取消回调方法 |
示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
wing.user.login({ platform: 'FACEBOOK', success: function(result){ console.log("登录成功"); }, fail: function(result){ console.log("登录失败"); }, cancel: function(result){ console.log("登录取消") }, }); |
返回结果参数说明:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
code | Number | Y | 见代码说明 |
msg | String | Y | 结果描述 |
platform | String | Y | 见代码说明 |
userId | Number | Y | 用户ID |
token | String | Y | 用户token |
puserId | String | N | 平台用户ID |
注:
1:platform 字段不传入时,将获取该应用可用的登录方式,用窗口展示给用户选择;
2:platform字段传入具体平台值时,不再弹出登录方式选择框,直接跳到对应的登录方式
3:Facebook内嵌游戏应当同时传入platform=FACEBOOK,FB=true。
3.3.3.支付
3.3.3.1.获取商品列表
方法:wing.pay.getProducts();
示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
//获取商品列表 var products= wing.pay.getProducts(); //products数据结构,数据由CP在SDK后台配置 [ { "productId": "test1",//商品ID,购买时使用 "productName": "测试商品1",//商品名称 "productDesc": "我是测试商品1",//商品描述 "gameCurrencyAmount": 12,//该商品对应的游戏币数量 "payChannel": [//该字段CP不需要关注 { id:1 channelProductId:"test12", logoUrl:"https://abc.com/mol.png" method:2 name:"MOL", status:1 }, { id:2 channelProductId:"test22", logoUrl:"https://abc.com/xsolla.png" method:2 name:"XSOLLA", status:1 } ], }, ..... ] |
3.3.3.2.购买商品
方法:wing.pay.payUI(params);
参数说明:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
channel | String | N | 见代码说明 |
productId | String | Y | 产品ID |
success | Object | N | 支付回调 |
示例:
1 2 3 4 5 6 7 8 |
wing.pay.payUI({ //channel: 'FACEBOOK', productId: 'test1', success: function(result){ console.log("支付完成"); } }); |
注:
1:对于网页支付方式如Paypal等,支付后在弹出窗口关闭时回调,result不返回数据
2:对于Facebook支付,支付完成后,result返回Facebook所有数据
如:
1 2 3 4 5 6 7 8 9 10 |
{ "amount": "1.00", "currency": "USD", "payment_id": 1959585309841041, "quantity": "1", "request_id": "10025G11220180215041729722114284", "signed_request": "8mD3T9CwtBiO_75UYPB1zbA5tfZJX5KHoUkMcE5_0Us.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImFtb4VudCI6IjEuMDAiLCJjdXJyZW5jeSI6IlVTRCIsImlzc3VlZF9hdCI6MTUxODQ5NTY2MCwicGF5bEVudF9pZCI6MTE2OTU1NTIxOTg0MTk0MSwicXVhbnRpdHkiOiIxIiwicmVxdWVzdF9pZCI6IjEwMDE1RzExMzIwMTgwMjEzMDQxNzI5MjIyMTE0Mjg0Iiwic3RhdHVzIjoiY29tcGxldGVkIn0", "status": "completed" } |
3:channel字段为可选字段,传入该值则直接使用对应支付方式,否则弹出所有支付方式选择窗口
3.3.4.公共参数设置
SDK包括serverId等公共参数,这些参数主要用于数据跟踪和统计。
公共参数必须严格按照文档进行设置,在后续的接口中会使用到这些公共的参数,没有按照要求配置会导致部分接口调用失败。
3.3.4.1.设置游戏用户id
wing.setGameUserId()
参数说明:
参数名 | 类型 | 必填 | 说明 | 备注 |
---|---|---|---|---|
gameUserId | String | Y | 游戏玩家ID |
示例:
1 2 |
wing.setGameUserId(gameUserId); |
3.3.4.2.设置服务器id
wing.setServerId()
参数说明:
参数名 | 类型 | 必填 | 说明 | 备注 |
---|---|---|---|---|
serverId | String | Y | 区服ID |
示例:
1 2 |
wing.setServerId(serverId); |
3.3.4.3.设置等级
wing.setLevel()
参数说明:
参数名 | 类型 | 必填 | 说明 | 备注 |
---|---|---|---|---|
level | Number | Y | 等级 |
示例:
1 2 |
wing.setLevel(level); |
3.3.5.数据收集
使用SDK数据收集接口配合大数据平台,可以轻松统计玩家习惯以及充值等行为,为游戏的市场营销提供数据依据。
目前数据收集支持以下平台: WING SDK 后台、 Facebook 后台
WINGSDK数据收集使用在游戏的过程中打点的方式,如图所示:
以上流程图中涉及到的几个接口:setServerId、setGameUserId、setLevel、ghw_user_import事件、ghw_user_create事件是有时序要求的,其它的事件如ghw_initiated_purchase、ghw_purchase、ghw_level_achieved、ghw_user_info_update、ghw_gold_update和ghw_task_update事件则需要在事件发生的对应时机调用接口发送。
SDK内部集成多个数据收集渠道,对于同一个事件,不同的渠道对应的事件名称和参数值可能不尽相同,可以使用下面数据发送接口应对此类需求。
3.3.5.1.数据发送
方法:wing.trackEvent(WAEvent);
参数说明:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
WAEvent | SDK内置对象WAEvent | Y | 详细查看事件对象事件对象 |
示例:
1 2 3 4 5 6 7 8 9 10 |
wing.trackEvent( wing.WAEvent.builder() .setDefaultEventName(wing.WAEvent.WA_EVENT_TYPE.GHW_PURCHASE) .setDefaultValue(5) .addDefaultEventValue(wing.WAEvent.WA_EVENT_PARAMETER_NAME.ITEM_NAME, "测试商品") .setDefaultEventName(wing.WAEvent.WA_EVENT_PARAMETER_NAME.LEVEL,100) .setChannelEventName(wing.WAEvent.TRACKING_CHANNEL.FB, "PURCHASE") .setChannelEventValues(wing.WAEvent.TRACKING_CHANNEL.FB, { "itemName":"aa"}) ); |
示例说明:setDefaultEventName方法用于设置发送事件的名称,GHW_PURCHASE为SDK定义的购买事件名称,所有SDK预定义的事件名称可以在下文的3.3.7.1.事件常量章节查看。setDefaultValue为设置事件默认价值,addDefaultEventValue为设置默认事件参数/值,其中SDK定义参数在下文3.3.7.2.参数常量章节可查看。setChannelEventName为设置渠道自定义事件名称,用于发往第三方平台时更改事件命名。setChannelEventValues为事件渠道自定义的参数/值,用于发往第三方平台时,替换默认事件参数。
下面是WAEvent对象的具体说明。
3.3.5.2.事件对象
全局对象:wing.WAEvent
实例化
方法:builder()
参数:无
示例:
1 2 |
var waEventObj = wing.WAEvent.builder(); |
WAEvent对象是SDK提供的帮助类,用于封装需要SDK追踪的数据,可以使用链式调用的方式使用该对象。在使用前必须调用初始化方法builder()才能使用。下列是WAEvent剩余的所有方法,点击链接跳转到具体的方法查看说明。
序号 | 方法 | 必须 | 说明 |
---|---|---|---|
1 | setDefaultEventName | Y | 设置默认事件名称 |
2 | setDefaultValue | N | 设置默认事件值 |
3 | addDefaultEventValue | N | 设置一个事件参数 |
4 | addAllDefaultEventValue | N | 设置多个事件参数 |
5 | setChannelEventName | N | 设置渠道自定义事件名称 |
6 | setChannelEventValues | N | 设置事件渠道自定义的参数/值 |
7 | disableChannel | N | 禁用渠道 |
8 | disableAllChannel | N | 禁用所有第三方渠道 |
9 | getDisableChannels | N | 获取禁用渠道列表 |
10 | getDefaultEventName | N | 获取默认事件名称 |
11 | getDefaultValue | N | 获取默认事件价值 |
12 | getDefaultEventValues | N | 获取默认事件参数对象 |
13 | getChannelEventNames | N | 获取渠道事件名称列表(渠道-事件名称键值对) |
14 | getChannelEventValues | N | 获取渠道事件对象 |
15 | getIsDisableAllChannel | N | 判断是否禁用所有其他渠道事件发送 |
1)设置默认事件名称
方法:setDefaultEventName(eventName)
此方法为所有渠道的单个事件设置默认事件名称,如果渠道没有单独设置则使用此默认值。
参数:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
eventName | WA_EVENT_TYPE | Y | 事件名称 |
示例:
1 2 3 4 |
waEventObj.setDefaultEventName( wing.WAEvent.WA_EVENT_TYPE.GHW_PURCHASE ); |
2)设置默认事件值
方法:setDefaultValue(val)
此方法为所有渠道的单个事件设置默认事件值,如果渠道没有单独设置则使用此默认值。
参数:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
val | Number | Y | 事件值,如商品价格 |
示例:
1 2 |
waEventObj.setDefaultValue(500); |
3)设置一个事件参数
方法:addDefaultEventValue(paramName, val)
此方法为所有渠道的单个事件设置事件参数,如果渠道没有单独设置则使用此默认参数。每次添加一个,可调用多次。
参数:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
paramName | String | Y | 具体参数名 |
val | all | Y | 具体参数值 |
示例:
1 2 3 4 |
waEventObj.addDefaultEventValue(wing.WAEvent.WA_EVENT_PARAMETER_NAME.ITEM_NAME,’item1’) .addDefaultEventValue(wing.WAEvent.WA_EVENT_PARAMETER_NAME.TASK_NAME ,’task1’); |
设置多个事件参数
方法:addAllDefaultEventValue(obj)
此方法为所有渠道的单个事件设置事件参数,如果渠道没有单独设置则使用此默认参数。每次可添加多个,只可调用一次。
参数:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
obj | JSON | Y | 事件内容 |
示例:
1 2 3 4 |
waEventObj.addAllDefaultEventValue( {'param1':'value1', 'param2': 'value2'} ); |
5)设置渠道自定义事件名称,针对渠道需要设置特定的事件名称
说明:使用该方法单独为某一渠道设置事件名称,该事件名称将替换掉setDefaultEventName设置的事件名称。
方法:setChannelEventName(channelName, eventName)
参数:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
channelName | String | Y | 平台名称 |
eventName | String | Y | 事件名称 |
示例:
1 2 3 4 5 |
waEventObj.setChannelEventName( wing.WAEvent.TRACKING_CHANNEL.FB, ‘facebook_even_name’//如Facebook自定义事件 ); |
6)设置事件渠道自定义的参数/值
说明:使用该方法单独为某一渠道的某个事件设置参数值,如果不设置则使用addDefaultEventValue或addAllDefaultEventValue方法设置的默认参数。
方法:setChannelEventValues(channelName, obj)
参数:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
channelName | String | Y | 平台名称 |
obj | String | Y | 参数对象 |
示例:
1 2 3 4 5 |
waEventObj.setChannelEventValues( wing.WAEvent.TRACKING_CHANNEL.FB, {‘payAmount:’100’, ‘currency’:’USD’} ); |
7)禁用渠道
说明:发送某事件时,不发送该事件到指定渠道。
方法:disableChannel(channelName)
参数:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
channelName | String | Y | 平台名称 |
示例:
1 2 |
waEventObj.disableChannel(wing.WAEvent.TRACKING_CHANNEL.FB); |
8)禁用所有第三方渠道
说明:发送某事件时,不发送该事件到所有第三方渠道。
方法:disableAllChannel()
参数:无
示例:
1 2 |
waEventObj.disableAllChannel(); |
9)获取事件信息方法列表
说明:使用下面方法可以获取前面方法设置的参数值。
方法 | 说明 |
---|---|
getDisableChannels() | 获取禁用渠道列表 |
getDefaultEventName() | 获取默认事件名称 |
getDefaultValue() | 获取默认事件价值 |
getDefaultEventValues() | 获取默认事件参数对象 |
getChannelEventNames() | 获取渠道事件名称列表(渠道-事件名称键值对) |
getChannelEventValues() | 获取渠道事件对象 |
getIsDisableAllChannel() | 判断是否禁用所有其他渠道事件发送 |
示例:
1 2 |
Var defaultValue = waEventObj.getDefaultValue(); |
3.3.6.调试
3.3.6.1 开发者调试模式
SDK提供了调试模式供开发者使用,具体打开方式如下:
1 2 3 4 5 6 |
wing.init({ appId: ‘f7f9a9d18da611e5a0be000d3a906774’, appKey: ‘CFHF7nQCCaojCX6Sm4eT1GEIWRprimaw’, debug: true }); |
在初始化时设置debug=true,开发时浏览器打开开发者模式,在控制台即可看到相关操作日志,开发者可以根据日志快速排查问题,提高效率。
3.3.6.2 测试设备打开 LOG 日志
通过在WING SDK 管理后台 设置》测试设备 中添加设备ID 到测试设备列表,可打开LOG 日志。
3.3.7.常量
以下是SDK内部预定义常量。
3.3.7.1.事件常量
以下是SDK预定义事件。
事件对象:wing.WAEvent.WA_EVENT_TYPE
事件名称对应常量:
事件名称 | 说明 | 备注 |
---|---|---|
GHW_INITIATED_PURCHASE | 点击购买 | 发送该事件前必须调用wing.setLevel方法设置等级 |
GHW_PURCHASE | 购买完成 | 发送该事件必须要设置ITEM_NAME、ITEM_AMOUNT、PRICE、LEVEL参数或调用wing.setLevel方法 |
GHW_USER_CREATE | 创建角色 | 必须要设置NICKNAME、REGISTER_TIME参数,可以有选择的设置ROLE_TYPE、GENDER、VIP、STATUS、BIND_GAME_GOLD、GAME_GOLD、FIGHTING等以上参数 |
GHW_USER_INFO_UPDATE | 更新用户信息 | 可以有选择的设置ROLE_TYPE、NICKNAME参数 |
GHW_USER_IMPORT | 导入用户 | 必须要设置IS_FIRST_ENTER |
GHW_GOLD_UPDATE | 消耗游戏币 | 必须要设置GOLD_TYPE、APPROACH、AMOUNT可以有选择的设置CURRENT_AMOUNT参数 |
GHW_TASK_UPDATE | 玩家任务统计 | 必须要设置TASK_ID、TASK_NAME、TASK_TYPE、TASK_STATUS 参数 |
GHW_LEVEL_ACHIEVED | 等级或分数 | 必须要提前调用wing.setLevel方法必须要设置SCORE、FIGHTING参数 |
GHW_SELF_ | 用于自定义事件 | 事件名称可以为 GHW_SELF_ + 自定义字符串 |
3.3.7.2.参数常量
以下是SDK预定义事件的参数定义
参数对象:wing.WAEvent.WA_EVENT_PARAMETER_NAME
参数常量:
参数名称 | 说明 | 备注 |
---|---|---|
ITEM_NAME | String | 游戏内虚拟物品的名称/ID |
ITEM_AMOUNT | Number | 交易的数量 |
TASK_ID | String | 任务ID |
TASK_NAME | String | 任务名称 |
LEVEL | Number | 级别或分数 |
GENDER | Number | 性别, 0 女 1 男 2 未知 |
NICKNAME | String | 昵称 |
VIP | Number | 等级 |
STATUS | Number | 状态标识.-1: 锁定,1:未锁定 |
BIND_GAME_GOLD | Number | 绑定钻石 |
GAME_GOLD | Number | 用户钻石数 |
FIGHTING | Number | 战斗力 |
PRICE | Number | 价格 |
REGISTER_TIME | Number | 注册时间戳,单位为毫秒(1970以后) |
ROLE_TYPE | String | 角色类型 |
IS_FIRST_ENTER | Number | 是否第一次导入用户,0:否, 1:是 默认为0 |
GOLD_TYPE | Number | 货币类型钻石,绑定钻石,金币,军魂等。预定义有1和2:1→游戏货币;2→游戏绑定货币 |
APPROACH | String | 变更途径,开通VIP、任务获得、公会贡献、解锁背包等 |
AMOUNT | Number | 变更货币数, 消耗用负数表示,获取用正数表示 |
CURRENT_AMOUNT | Number | 用户变更以后该种货币的数量 |
TASK_TYPE | String | 任务类型 |
TASK_STATUS | Number | 任务状态:状态标识:1→领取任务,2→开始任务,3→待领奖(任务完成),4→已领奖 |
SCORE | Number | 得分数 |
3.3.7.3.第三方平台常量
参数对象:wing.WAEvent.TRACKING_CHANNEL
参数常量:
事件名称 | 说明 |
---|---|
FB | Facebook数据收集平台 |
四.代码说明
4.1.登录类型对照表:
平台类型 | 说明 |
---|---|
GUEST | 游客登录 |
FACEBOOK平台 | |
GOOGLE 平台 | |
APPSELF | 应用内登录 |
H5_PLATFORM | H5平台登录 |
4.2.支付类型对照表:
支付类型 | 说明 |
---|---|
Facebook支付 | |
PAYMENTWALL | Paymentwall支付 |
BOACOMPRA | Boacompra支付 |
MOL | Mol支付 |
MOL_VC | Mol点卡支付 |
XSOLLA | Xsolla支付 |
XSOLLA_VC | Xsolla 点卡支付 |
IPAYLINKS | Ipaylinks支付 |
CODAPAY | Codapay支付 |
UNIPIN | UniPin支付 |
SAFECHARGE | SafeCharge支付 |
GUDANGVOUCHER | GudanGvoucher支付 |
ALIPAY | 支付宝 |
UNIONPAY | 银联 |
YEEPAY | 易宝 |
PAYPAL | PayPal支付 |
4.3.状态码
状态码 | 说明 |
---|---|
200 | 操作成功 |
400 | 操作失败 |
500 | 操作错误 |