# 交叉推广位 ------ #### **简介** 交叉推广位是在游戏中展示其他游戏，用户点击某个游戏跳转进入游戏，达到共享用户的目的。 噗嗤游戏提供了3种类型的交叉推广位，后台可对交叉推广位进行配置管理，对交叉推广位各项指标分析阅览。 **3种广告类型：交叉悬浮广告框、交叉抽屉式广告位、交叉猜你喜欢广告位** 1. 交叉悬浮广告框，放置到首页、结算页 ![sdk文件目录结构](https://dep.miso-lab.com/sdkword/sdk_013.png) 2. 交叉抽屉式广告位，放置到首页、结算页 ![sdk文件目录结构](https://dep.miso-lab.com/sdkword/sdk_014.png) 3. 交叉猜你喜欢广告位，推荐放置到结算页 ![sdk文件目录结构](https://dep.miso-lab.com/sdkword/sdk_015.png) #### **后台使用** 完成接入交叉推广位后，登录后台->头部tab切换到【游戏数据】->【流量分析】->【广告导出】即可查看推广位的各项数据信息（需要后台管理人员添加权限）： ![sdk文件目录结构](https://dep.miso-lab.com/sdkword/sdk_012.png) #### **接入必读** - 由于微信对每个游戏可跳转其他游戏有10个限制，可跳转的其它游戏需要在小游戏根目录下的全局配置文件game.json中进行添加配置：navigateToMiniProgramAppIdList，该参数定义请详读[小程序全局配置](https://developers.weixin.qq.com/minigame/dev/reference/configuration/app.html)。 - 噗嗤游戏为了方便开发者接入调试交叉推广位，【后台测试服】已经配置测试使用的不同类型推广位，并提供以下10个测试服广告位appid： 水果爆破 ："wx26822126b4d99eda", 球球涂涂涂："wxac0750884d5bed0c", 狂野漂移3D："wx019a09df638e6683", 星星爱消消："wx9ff47d13a88e5511", 土耳其方块消消乐："wx89efb2282d65a2d0", 成语小才子："wxd4d478c7d331ce80", 球球蹦蹦蹦："wxabee9afe62d0b114", 俄罗斯方块连连消："wx4cd087f19f4cb7c3", 球球爆爆爆："wxae33d68413f40641", 疯狂水果一刀切："wxdf26a04c53d6f1e9" ```javascript "navigateToMiniProgramAppIdList": [ "wx26822126b4d99eda", "wxac0750884d5bed0c", "wx019a09df638e6683", "wx9ff47d13a88e5511", "wx89efb2282d65a2d0", "wxd4d478c7d331ce80", "wxabee9afe62d0b114", "wx4cd087f19f4cb7c3", "wxae33d68413f40641", "wxdf26a04c53d6f1e9" ] ``` - 完成下面的操作步骤，即可拉取交叉推广位： 1、开发者复制上面的10个其他游戏的appid，配置到game.json的navigateToMiniProgramAppIdList参数： ![sdk文件目录结构](https://dep.miso-lab.com/sdkword/sdk_010.png) 2、修改[config.js的Env配置](install.md#config_env)为110，开发者测试联调阶段，走测试环境 > 提示：广告位接入完毕测试通过，提交审核前，修改Env为100。 ![sdk文件目录结构](https://dep.miso-lab.com/sdkword/sdk_011.png) #### **接入API：** | **名称** | **功能说明** | | --------------------------- | ------------------------------------------------------------ | | PCSDK.stat.bannerList | 根据类型获取对应类型交叉广告列表，目前SDK支持3种类型：40（交叉悬浮广告框）、70（交叉抽屉式广告位）、50（交叉猜你喜欢广告位） | | PCSDK.stat.bannerNavigateTo | 交叉推广位点击跳转到对应appid的游戏，该接口封装了小游戏的跳转功能（navigateToMiniProgram） | | PCSDK.stat.addExposure | 交叉推广位一条或者多条广告展示，添加曝光数据，SDK在onHide时候上报数据到后台 | 1. ##### **bannerList** ```javascript PCSDK.stat.loadingFinish(banner_type): Promise ``` 定义：根据类型获取对应类型交叉广告列表，目前SDK支持3种类型 参数： ``` banner_type: number 必填 目前支持三种广告类型：40、50、70 ``` 返回值：Promise 返回的是Promise类型，Promise resolve成功回调数据结构为： ```json { "banner_list": [ { "banner_id": "3568", "banner_name": "土耳其方块", "banner_type": "40", "banner_location": "100", "banner_ad_id": "50", "banner_launch_appid": "", "banner_launch_path": "", "banner_appid": "wx89efb2282d65a2d0", "banner_path": "?channel_id=20361", "banner_icon": "https://dep.miso-lab.com/data_analysis/games/res/5D42CB97RK.png", "banner_user_num": "0", "banner_exposure_num": "0", "banner_sort": "1", "banner_game_id": "1000053", "banner_qqgame": "0", "banner_qqgame_id": "0", "banner_game_type": 0, "banner_bone": "0", "banner_system": "0", "banner_online": "1", "banner_reddot": "0", "banner_gender": "0", "banner_resident": "0", "banner_qrcode": "0", "banner_qrcode_img": "", "banner_bone_info": false, "banner_img_info": { "banner_icon": "https://dep.miso-lab.com/data_analysis/games/res/5D42CB97RK.png" } }, { "banner_id": "3571", "banner_name": "水果一刀切", "banner_type": "40", "banner_location": "100", "banner_ad_id": "99", "banner_launch_appid": "", "banner_launch_path": "", "banner_appid": "wxdf26a04c53d6f1e9", "banner_path": "?channel_id=20361", "banner_icon": "https://dep.miso-lab.com/data_analysis/games/res/5D42CBACTt.png", "banner_user_num": "0", "banner_exposure_num": "0", "banner_sort": "1", "banner_game_id": "1000053", "banner_qqgame": "0", "banner_qqgame_id": "0", "banner_game_type": 0, "banner_bone": "0", "banner_system": "0", "banner_online": "1", "banner_reddot": "0", "banner_gender": "0", "banner_resident": "0", "banner_qrcode": "0", "banner_qrcode_img": "", "banner_bone_info": false, "banner_img_info": { "banner_icon": "https://dep.miso-lab.com/data_analysis/games/res/5D42CBACTt.png" } } ] } ``` > **返回的数据banner_list列表解析为 Array< BannerData >，BannerData是banner_list每一项数据实体，下面的bannerNavigateTo与addExposure接口api参数banner_data属于此BannerData结构**。 示例： ```javascript /** * 演示交叉推广位使用示例 */ export default class TestBannerSample { constructor() { // 示例：加载交叉悬浮广告框 this.loadBannerList(BannerType.TYPE_CROSS) .then((dataList: Array) => { // 渲染广告位数据 this.renderAdCrossList(dataList); }).catch(err => { // bannerList不存在获取请求拉取失败 }); } /** * 渲染广告位列表 * @param dataList 广告位列表 */ private renderAdCrossList(dataList: Array) { // ... } /** * 根据类型获取交叉推广位列表 * @param banner_type 广告位类型 */ private loadBannerList(banner_type: BannerType): Promise { return new Promise((resolve, reject) => { PCSDK.stat.bannerList(banner_type) .then(data => { let bannerList: Array = data.banner_list || []; if (bannerList.length) { // 处理bannerList数据列表 resolve(bannerList); } else { // 处理数据为空情况 reject(null); } }).catch(err => { // 请求接口报错情况 reject(err); }); }); } } // 广告位类型的枚举 enum BannerType { TYPE_CROSS = 40, // 交叉悬浮广告框 TYPE_LIKE = 50, // 交叉猜你喜欢广告位 TYPE_LIST = 70, // 交叉抽屉广告位 } /* * banner数据实体结构 */ class BannerData { public banner_id: string; public banner_appid: string; public banner_diamond: number; public banner_type: string; public banner_icon: string; public banner_name: string; public banner_resident: string; // 是否常驻 } ``` 2. ##### **bannerNavigateTo** ```javascript PCSDK.stat.bannerNavigateTo( location:number, banner_data: any, opts?: { extraData?: string; envVersion?: string }): Promise ``` 定义：交叉推广位点击游戏跳转到对应appid的游戏，该接口封装了小游戏的跳转功能（navigateToMiniProgram）, 第三个参数配置可参考[wx.navigateToMiniProgram extraData、envVersion配置信息](https://developers.weixin.qq.com/minigame/dev/api/open-api/miniprogram-navigate/wx.navigateToMiniProgram.html) 参数： ```javascript location: number 必传，统一传递为：100 banner_data：any 必传，点击跳转项对应数据，该数据的结构为BannerData，为bannerList获取的Array的单元实体项 opts: object 选传，调试阶段可参照[wx.navigateToMiniProgram(Object object) extraData配置信息]进行裴旭 { extraData: string 选传, 需要传递给目标小程序的数据，目标小程序可在 App.onLaunch，App.onShow 中获取到这份数据 envVersion: string 选传，要打开的小程序版本，合法值：develop、trial、release } ``` 示例：获取猜你喜欢推广位，以列表的形式显示在界面上，点击任意一项游戏跳转其他游戏 ```javascript // 发起登录请求，得到登录数据信息，调用setLogind设置SDK用户信息 /** * 演示交叉推广位使用示例 */ export default class TestBannerSample extends ui.shop.ShopPopwinUI { private list: Laya.List; constructor() { super(); // 创建List ui this.list = new Laya.List(); this.list.itemRender = AdItem; this.list.vScrollBarSkin = ""; this.list.scrollBar.elasticBackTime = 500; this.list.scrollBar.elasticDistance = 350; this.list.x = 0; this.list.y = 0; this.list.spaceY = 10; this.list.height = 1000; this.list.renderHandler = new Laya.Handler(this, this.renderAdItem); this.boxList.addChild(this.list); // 示例：加载猜你喜欢广告位数据列表 this.loadBannerList(BannerType.TYPE_LIKE) .then((dataList: Array) => { this.renderAdLikeList(dataList); }).catch(err => { // bannerList不存在获取请求拉取失败 }); } /** * 渲染单个广告位ui * @param cell */ private renderAdItem(cell: AdItem) { cell.init(); } /** * 渲染广告位列表 * @param dataList 广告位列表 */ private renderAdLikeList(dataList: Array) { this.list.array = dataList; } /** * 根据类型获取交叉推广位列表 * @param banner_type 广告位类型 */ private loadBannerList(banner_type: BannerType): Promise { return new Promise((resolve, reject) => { PCSDK.stat.bannerList(banner_type) .then(data => { let bannerList: Array = data.banner_list || []; if (bannerList.length) { // 处理bannerList数据列表 resolve(bannerList); } else { // 处理数据为空情况 reject(null); } }).catch(err => { // 请求接口报错情况 reject(err); }); }); } } class AdItem extends ui.ads.GameIconUI { constructor() { super(); this.on(Laya.Event.CLICK, this, this.onJumpGame); } init() { let { banner_icon, banner_name, banner_reddot } = this.dataSource; this.iconTex.skin = banner_icon; this.nametxt.text = banner_name; this.hot.visible = banner_reddot + '' === '1'; } private onJumpGame(ev: Laya.Event) { PCSDK.stat.bannerNavigateTo(100, { ...this.dataSource }).catch(err => { // 跳转游戏微信弹出二次确认框，点击取消执行此处 }); } } // 广告位类型的枚举 enum BannerType { TYPE_CROSS = 40, // 交叉悬浮广告框 TYPE_LIKE = 50, // 交叉猜你喜欢广告位 TYPE_LIST = 70, // 交叉抽屉广告位 } /* * banner数据实体结构 */ class BannerData { public banner_id: string; public banner_appid: string; public banner_diamond: number; public banner_type: string; public banner_icon: string; public banner_name: string; public banner_resident: string; // 是否常驻 } ``` 3. ##### **addExposure** ```javascript PCSDK.stat.addExposure( location: number, banner_data: Array< any > | any ): void ``` 定义：对一个或者多个展示的推广位添加曝光，SDK在onHide时候上报曝光数据到后台，后台进行统计查阅 参数： ```javascript location: number 必传，统一传递为：100 banner_data：any 必传，添加展推广位曝光数据，可添加一个或者多个曝光数据，banner_data参数数据结构为上面bannerList api返回的列表数据的项BannerData实体结构：Array | BannerData ``` > 提示： > > 展示猜你喜欢/抽屉推广位：获取到9个推广位数据，展示了其中5个，调用曝光接口传入推广位数据为展示的5个，剩余的4个需在其展示的时候再调用曝光api接口传入。 > > 展示交叉悬浮框推广位：展示一个，将此推广位传入曝光接口，点击展示下一个，则把这个最新的数据传入曝光api 示例：根据交叉悬浮框类型调用PCSDK.stat.bannnerList接口获取交叉悬浮框推广位列表，显示第一个，每隔4秒切换到下一个，点击一个切换下一个展示。此示例没有使用定时器方式，采用的是监听动画帧实现。 ```javascript /** * 演示交叉推广位使用示例 */ export default class TestBannerSample extends ui.ads.ADbtnUI { private data; private count: number; private adList: Array; constructor() { super(); this.count = 0; this.adList = []; this.on(Laya.Event.CLICK, this, this.onJumpGame); } // 初始化显示交叉悬浮框广告位 init(isFirst: boolean) { isFirst && (this.count = 0); this.anim_entice.play(0, true); this.anim_entice.addLabel('refresh', 38); // 交叉悬浮框动画执行到第38帧，自动更新下一个，开发者可根据实际使用定时器实现切换下一个 this.anim_entice.on(Laya.Event.LABEL, this, this.handleAutoRrefresh); // 第一次 this.refresh(); } // 清理交叉悬浮框广告位 clear() { this.anim_entice.gotoAndStop(0); this.anim_entice.removeLabel('refresh'); this.anim_entice.off(Laya.Event.LABEL, this, this.handleAutoRrefresh); } private refresh() { let list = this.adList; if (!list || !list.length) { this.loadBannerList(BannerType.TYPE_CROSS).then(() => this.refresh()); return; } let data = list.pop(); this.renderAdui(data); this.data = data; // 添加曝光数据 PCSDK.stat.addExposure(100, data); // 也可以采用传递多个方式 // PCSDK.stat.addExposure(100, [{...data}]); } private renderAdui(data) { let { banner_bone_info, banner_img_info } = data; if (banner_bone_info) { this.imgIcon.visible = false; } else { this.imgIcon.visible = true; this.imgIcon.skin = banner_img_info.banner_icon; } this.imgHot.visible = data.banner_reddot + '' === '1'; } private onJumpGame(ev: Laya.Event) { this.anim_entice.gotoAndStop(39); this.anim_entice.play(39, true); // 切换下一个 this.refresh(); PCSDK.stat.bannerNavigateTo(100, { ...this.data }).catch(err => { // 跳转游戏微信弹出二次确认框，点击取消执行此处 }); } /** * 处理自动切换下一个 * @param name */ private handleAutoRrefresh(name) { if (name === 'refresh' && this.count !== 0) { this.refresh(); } this.count++; } /** * 根据类型获取交叉推广位列表 * @param banner_type 广告位类型 */ private loadBannerList(banner_type: BannerType): Promise { return new Promise((resolve, reject) => { PCSDK.stat.bannerList(banner_type) .then(data => { let bannerList: Array = data.banner_list || []; if (bannerList.length) { // 处理bannerList数据列表 resolve(bannerList); } else { // 处理数据为空情况 reject(null); } }).catch(err => { // 请求接口报错情况 reject(err); }); }); } } // 广告位类型的枚举 enum BannerType { TYPE_CROSS = 40, // 交叉悬浮广告框 TYPE_LIKE = 50, // 交叉猜你喜欢广告位 TYPE_LIST = 70, // 交叉抽屉广告位 } ```