标准版小程序SDK接入指南—媒体主
一、添加request合法域名
微信公众平台|小程序后台 - 设置 - 开发设置:添加 request 合法域名。
https://engine.xmadx.net/
https://log.xmadx.net/
二、创建媒体
登录小盟广告流量变现平台,在
媒体管理 - 我的媒体
下新建小程序,新建完成之后在小程序列表页获取媒体ID(app_key)。
三、创建广告位
登录小盟广告流量变现平台,在
媒体管理 - 我的媒体 - 管理广告位
下新建广告位。
四、SDK接入小程序
*注:v1.5.2版本sdk不是对之前版本的迭代,而是全新的升级重构开发,会有和之前版本不兼容的情况,接入新版本前,请确保完全删除接入v1.5.2之前版本sdk的所有代码。1.在接入之前,请确认您已经完成企业认证,并已经创建了媒体和广告位。
2.下载SDK包并解压
请根据您使用的小程序框架选择解压不同压缩包,如果您使用原生框架,请选择xmad-mini-sdk.zip。
components
文件夹内xmAD
为小盟广告组件。
xmadx_sdk.js
小盟SDK主文件
xmadx_conf.js
小盟SDK配置文件
3.引入JS 文件
将解压后的
xmadx_sdk.js
、xmadx_conf.js
放入根目录下utils
文件夹中,若没有utils
文件夹,请自主创建。
4.引入广告组件
将解压后的
components
文件夹中的xmAD
文件夹放入根目录下components
文件夹中,若没有components
文件夹,请自主创建。
5. 引入后的目录结构:
6.在xmadx_conf.js 文件中配置SDK
填写
app_key
,app_key
是您在小盟流量变现平台 (即媒体主后台)得到的媒体ID,如果没有请创建。
exports.app_key = "媒体ID"; //请在此行填写从广告后台获取的媒体ID。
exports.plugin = false; //是否使用小程序插件
exports.getOpenid = true //是否授权小盟来获取用户的openid
7.根目录下app.js
中引入SDK
:
require('./utils/xmadx_sdk')
8. 用户openId
基于用户的openId,为用户提供更智能、精准的广告匹配机制,提高广告的转化效率 ,让每一次曝光都能获得最大收益,充分实现广告位的流量价值。
1)授权小盟获取用户openid,此时不需要做任何代码上的处理。强烈推荐!
//xmadx_conf.js
exports.getOpenid = "true"; //是否授权小盟来获取用户的openid;默认为true,开启状态,改为false为手动上报。
2)手动向小盟上报用户openid,调用wx.xmAdSednOpenid(openId)
方法向小盟上报用户openId。请务必在和后端置换回openid后进行上报 参考下列代码示例。
require('./utils/xmadx_sdk.js')
App({
onShow(){
wx.login({
success(res){
// 需要从服务端获取用户openId
wx.request({
url: 'https://blog.superwang.cn/getOpenId', //后端接口地址
method: "post",
data: {
jscode : res.code
},
success(res){
// 上传openId
wx.xmAdSednOpenid(res.data.data.openid)
}
})
}
})
}
});
五、接入广告
假如您要接入的页面为
/pages/index/index
。
1.在/pages/index/index.json
中引入xm-ad
组件:
{
"usingComponents": {
"xm-ad": "/components/xmAD/xmAD"
}
}
2.在/pages/index/index.wxml
配置广告位
在小盟流量主后台对应广告位获取指定广告位代码,粘贴到页面对应位置。
// ...页面其他元素...
<xm-ad data-id="xmdd4212d06d7867e2ad135bfc53a428(您的广告位id)" adData="{{adData}}" class="xmdd4212d06d7867e2ad135bfc53a428(您的广告位id)" bindadLoad="adLoad" bindadClick="adClick" bindadClose="adClose" ></xm-ad>
// ...页面其他元素...
六 .广告的跳转方式
1. 识别小程序码跳转
通过长按识别小程序码跳转到广告主小程序,无需配置广告主小程序的AppId
2. 直接跳转
通过点击广告素材直接跳转到广告主小程序,需要配置广告主小程序AppId。
1) 在我的媒体-智投广告
找到广告小程序AppId
2) 配置广告小程序AppId
如果没有请设置navigateToMiniProgramAppIdList为空数组需要在小程序项目根目录下,
app.json
中navigateToMiniProgramAppIdList
配置广告主AppId
//app.json文件
"navigateToMiniProgramAppIdList": [
// 此为广告主的appid
"广告主的appid1",
"广告主的appid2"
//....
]
七、接入验证
1.接入验证
媒体可在微信开发者工具,在加入广告位的对应位置拉取到测试广告(带有 “小盟广告” 文字的白底图片)。测试期间数据不会反映到您的后台,核对数据请联系我方人员。在network中,有imp(曝光日志)上报,点击广告位图片,有clk(点击日志)上报,则为配置成功。如下图所示:
八、请求广告信息后的回调
业务场景需要时,请通过以下方法获取广告位请求状态。
1.成功回调
xmadSuccess(xmId, xmInfo) {
console.log(xmId) //成功返回的广告位id
console.log(xmInfo) //成功返回的广告位详细信息
},
2.失败回调
xmadFail(xmId, code, msg) {
console.log(xmId) //失败的广告位id
console.log(code) //错误码
console.log(msg) //错误信息
},