首页 >   SDK下载 >

U8广告SDK接入流程

在接入之前,请确认您的小程序已在U8AD.COM网站用户中心添加成功。

⼀、准备工作

1、在官网下载SDK包,或点击下载最新SDK包。

2、进入微信公众号平台|小程序后台,点击页面左侧的“开发”,进入“开发设置”,在服务器域名设置项中添加request合法域名:

https://www.u8ad.com

二、SDK接入小程序

1、引入js文件:将解压后的utils文件夹中u8ad_sdk.min.js,u8ad_md5.js和u8ad_conf.js放入小程序utils文件夹中,若 没有utils请创建。

2、引入广告组件:将components文件夹中u8AD文件夹放入小程序components文件夹中,若没有 components请创建。

引入完成后目录结构如下:

三、基本配置

1、配置u8ad_conf.js文件:

进入U8广告官网用户中心,打开【我的小程序】-【小程序列表】页面,将对应小程序AppKEY填入到u8ad_conf.js中的app_key中即可。

exports.app_key = “xxxx”; //如下图所示,小程序列表页面获取到的AppKEY 

2、在根目录下app.js文件首行引入sdk代码

const u8ad = require('./utils/u8ad_sdk.min.js');

四、接入广告

目前有插屏广告、banner、悬浮广告三种展示形式。

假设您要接入的页面为/pages/index/index.wxml

1、在index.wxml同级目录下的index.json中引入u8-ad组件:

{ 
	"usingComponents": { 
		"u8-ad": "/components/u8AD/u8AD" 
	} 
} 

2、在index.wxml同级目录下的index.js中Page参数对象的data节点中配置广告数据变量

Page({
	data: 
	{ 
		// 需在 data 中配置广告位 
		u8ad: 
		{ 
			adData: {}, 
			ad: {
				banner: "banner", // banner 广告开关 
				insert: "insert", // 插屏广告开关 
				fixed: "fixed" // 悬浮广告开关 
				//如不需要展示删除即可 
			} 
		}
		// 您的其它数据 
		// OtherData: {} 
	} 
});

3、在index.wxml中按需引入对应类型广告

<!-- banner广告,按需引入 --> 
<view class="u8_banner" style="background: #fffff;color:#333;"> 
	<u8-ad data-id="{{u8ad.ad.banner}}" adData="{{u8ad.adData}}" bindadload="u8adLoad" bindclick="u8adClick" 
bindclose="u8adClose" class="u8_component"></u8-ad> 
</view> 

<!-- 插屏广告,按需引入 --> 
<view class="u8_insert"> 
	<u8-ad data-id="{{u8ad.ad.insert}}" adData="{{u8ad.adData}}" bindadload="u8adLoad" bindclick="u8adClick" 
bindclose="u8adClose" class="u8_component"></u8-ad>
</view> 

<!-- 悬浮广告,按需引入 --> 
<view class="u8_fixed"> 
	<u8-ad data-id="{{u8ad.ad.fixed}}" adData="{{u8ad.adData}}" bindadload="u8adLoad" bindclick="u8adClick" 
bindclose="u8adClose" class="u8_component"></u8-ad> 
</view> 
4、单页展示多banner广告(可选) index.js需修改为
Page({
	data: { 
		// 需在 u8ad.ad 中配置广告位 
		u8ad: { 
			adData: {}, 
			ad: {
				banner: ['banner_01', 'banner_02', 'banner_03'], // 展示多少 banner 广告就在 banner 字段中添加多少个“banner_序号”组成的元素 
				insert: 'insert', // 插屏广告开关 
				fixed: 'fixed' // 悬浮广告开关 
			} 
		}
		// 您的其它数据 
		// OtherData: {} 
  	} 
});

index.wxml修改为

<!-- banner 广告,按需引入--> 
<view class="u8_banner" style="width:100%;"> 
	<u8-ad data-id="{{u8ad.ad.banner[0]}}" adData="{{u8ad.adData}}" bindadload="u8adLoad" bindclick="u8adClick" bindclose="u8adClose" class="u8_component"> </u8-ad> 
</view> 

<!-- banner 广告,按需引入--> 
<view class="u8_banner" style="width:100%;"> 
	<u8-ad data-id="{{u8ad.ad.banner[1]}}" adData="{{u8ad.adData}}" bindadload="u8adLoad" bindclick="u8adClick" bindclose="u8adClose" class="u8_component"> </u8-ad>
</view> 

<!-- banner 广告,按需引入 --> 
<view class="u8_banner" style="width:100%;"> 
	<u8-ad data-id="{{u8ad.ad.banner[2]}}" adData="{{u8ad.adData}}" bindadload="u8adLoad" bindclick="u8adClick" bindclose="u8adClose" class="u8_component"> </u8-ad> 
</view>

其中u8-ad节点的data-id属性{{u8ad.ad.banner[x]}}需要遵循以下2点:

• 不要跟当前页面的其他data-id属性重复

• 必须在当前页面数据data.u8ad.ad.banner数组中配置过

5、通过调用接⼝获取要展示广告的数据来⾃定义展示(可选)

调用方式:

onLoad: function() {
    let app = getApp(); //拉取广告 
},

五、接入后检测

按照上述步骤接入SDK后,在微信小程序开发工具的控制台下观察有没有关于U8广告SDK的报错信息,如果没有,则说明接入成功。

接入成功后请登录U8广告后台,点击左侧菜单“我的小程序”,在“小程序列表”找到刚接入SDK的小程序,点击“测试SDK”,成功即可提交上线。

遇到问题:

• 如果没有显示广告或者后台数据展示不正常,请检查⼀遍接入流程,确保没有漏掉其中步骤。

• 如果检查接入没问题还是没有广告,请截图控制台console和网络请求network反馈给工作⼈员。

联系方式:

客服微信:jrqianlong,客服QQ:1026953886

Top