【小程序开发】微信小程序如何插入流量主广告（小程序流量主广告插入代码大全）

Banner 广告

小程序广告流量主操作指引：文档地址

开发者可以使用 ad 组件创建 Banner 广告组件，Banner 广告组件在创建后会自动拉取广告数据并显示。

广告尺寸设置

Banner 广告不允许直接设置样式属性，默认宽度为100%（width: 100%），高度会自动等比例计算，因此开发者可以设置广告外层组件的宽度调整广告的尺寸。 广告外层组件的宽度不允许小于300px，当宽度小于300px时，Banner 广告的宽度会强制调整为300px。

/* 外层组件的宽度可设置成100%或具体数值 */.adContainer {  width: 100%;
}

<view class="adContainer">
  <ad unit-id="xxxx"></ad></view>

广告事件监听

Banner 广告在创建后会自动拉取广告。开发者可以通过 ad 组件的 onload 和 onerror 事件监听广告拉取成功或失败，可以通过 onclose 事件监听广告被关闭。

<view class="adContainer">
  <ad unit-id="xxxx" bindload="adLoad" binderror="adError" bindclose="adClose"></ad></view>

Page({
  adLoad() {    console.log('Banner 广告加载成功')
  },
  adError(err) {    console.log('Banner 广告加载失败', err)
  },
  adClose() {    console.log('Banner 广告关闭')
  }
})

广告定时刷新

开发者可以在创建 Banner 广告时传入 ad-intervals 参数实现广告的定时刷新，ad-intervals 参数为数字类型，单位为秒。注意：自动刷新的间隔不能低于30秒，因此 ad-intervals 的参数值必须大于或等于30。

<view class="adContainer">  <ad unit-id="xxxx" ad-intervals="30"></ad></view>

激励视频广告

小程序广告流量主操作指引：文档地址

激励视频广告组件是由客户端原生的图片、文本、视频控件组成的，层级最高，会覆盖在普通组件上。

开发者可以调用 wx.createRewardedVideoAd 创建激励视频广告组件。该方法返回的是一个单例，该实例仅对当前页面有效，不允许跨页面使用。

广告创建

激励视频广告组件默认是隐藏的，因此可以提前创建，以提前初始化组件。开发者可以在小程序页面的 onLoad 事件回调中创建广告实例，并在该页面的生命周期内重复调用该广告实例。

let rewardedVideoAd = nullPage({
  onLoad() {    if(wx.createRewardedVideoAd){
      rewardedVideoAd = wx.createRewardedVideoAd({ adUnitId: 'xxxx' })
      rewardedVideoAd.onLoad(() => {        console.log('onLoad event emit')
      })
      rewardedVideoAd.onError((err) => {        console.log('onError event emit', err)
      })
      rewardedVideoAd.onClose((res) => {        console.log('onClose event emit', res)
      })
    }
  }
})

为避免滥用广告资源，目前每个用户每天可观看激励式视频广告的次数有限，建议展示广告按钮前先判断广告是否拉取成功。

显示/隐藏

激励视频广告组件默认是隐藏的，在用户主动触发广告后，开发者需要调用 RewardedVideoAd.show() 进行显示。

rewardedVideoAd.show()

只有在用户点击激励视频广告组件上的 关闭广告 按钮时，广告才会关闭。开发者不可控制激励视频广告组件的隐藏。

广告拉取成功与失败

激励视频广告组件是自动拉取广告并进行更新的。在组件创建后会拉取一次广告，用户点击 关闭广告 后会去拉取下一条广告。

如果拉取成功，通过 RewardedVideoAd.onLoad() 注册的回调函数会执行，RewardedVideoAd.show() 返回的 Promise 也会是一个 resolved Promise。两者的回调函数中都没有参数传递。

rewardedVideoAd.onLoad(() => {  console.log('激励视频 广告加载成功')
})

rewardedVideoAd.show()
.then(() => console.log('激励视频 广告显示'))

如果拉取失败，通过 RewardedVideoAd.onError() 注册的回调函数会执行，回调函数的参数是一个包含错误信息的对象。

rewardedVideoAd.onError(err => {  console.log(err)
})

RewardedVideoAd.show() 返回的 Promise 也会是一个 rejected Promise。

rewardedVideoAd.show()
.catch(err => console.log(err))

拉取失败，重新拉取

如果组件的某次自动拉取失败，那么之后调用的 show() 将会被 reject。此时可以调用 RewardedVideoAd.load() 手动重新拉取广告。

rewardedVideoAd.show()
.catch(() => {
    rewardedVideoAd.load()
    .then(() => rewardedVideoAd.show())
    .catch(err => {      console.log('激励视频 广告显示失败')
    })
})

如果组件的自动拉取是成功的，那么调用 load() 方法会直接返回一个 resolved Promise，而不会去拉取广告。

rewardedVideoAd.load()
.then(() => rewardedVideoAd.show())

监听用户关闭广告

只有在用户点击激励视频广告组件上的 关闭广告 按钮时，广告才会关闭。这个事件可以通过 RewardedVideoAd.onClose() 监听。

RewardedVideoAd.onClose() 的回调函数会传入一个参数 res，res.isEnded 描述广告被关闭时的状态。

开发者需要根据 res.isEnded 判断是否视频是否播放结束、可以向用户下发奖励。

rewardedVideoAd.onClose(res => {    // 用户点击了【关闭广告】按钮
    if (res && res.isEnded) {      // 正常播放结束，可以下发游戏奖励
    } else {      // 播放中途退出，不下发游戏奖励
    }
})

注意事项

多次调用 RewardedVideoAd.onLoad()、RewardedVideoAd.onError()、RewardedVideoAd.onClose() 等方法监听广告事件会产生多次事件回调，建议在创建广告后监听一次即可，或者先取消原有的监听事件再重新监听。

插屏广告

插屏广告组件是由客户端原生的图片、文本、视频控件组成的，层级最高，会覆盖在普通组件上。

开发者可以调用 wx.createInterstitialAd 创建插屏广告组件。每调用一次该方法，返回的都是一个全新实例，该实例仅对当前页面有效，不允许跨页面使用。

广告创建

插屏广告组件默认是隐藏的，因此可以提前创建，以提前初始化组件。开发者可以在小程序页面的 onLoad 事件回调中创建广告实例，并在该页面的生命周期内重复调用该广告实例。

let interstitialAd = nullPage({
  onLoad() {    if(wx.createInterstitialAd){
      interstitialAd = wx.createInterstitialAd({ adUnitId: 'xxxx' })
      interstitialAd.onLoad(() => {        console.log('onLoad event emit')
      })
      interstitialAd.onError((err) => {        console.log('onError event emit', err)
      })
      interstitialAd.onClose((res) => {        console.log('onClose event emit', res)
      })
    }
  }
})

显示/隐藏

插屏广告组件默认是隐藏的，开发者需要调用 InterstitialAd.show() 进行显示。如果广告拉取失败或触发频率限制，InterstitialAd.show() 方法会返回一个rejected Promise，开发者可自行监听错误信息。

interstitialAd.show().catch((err) => {  console.error(err)
})

用户可以主动关闭插屏广告。开发者不可控制插屏广告组件的隐藏。

广告拉取成功与失败

插屏广告组件是自动拉取广告并进行更新的。在组件创建后会拉取一次广告，用户关闭广告后会去拉取下一条广告。

如果拉取成功，通过 InterstitialAd.onLoad() 注册的回调函数会执行，回调函数没有参数传递。

interstitialAd.onLoad(() => {  console.log('插屏 广告加载成功')
})

如果拉取失败，通过 InterstitialAd.onError() 注册的回调函数会执行，回调函数的参数是一个包含错误信息的对象。常见异常错误参考文档

interstitialAd.onError(err => {  console.log(err)
})

监听用户关闭广告

如果广告被关闭，通过 InterstitialAd.onClose() 注册的回调函数会执行，回调函数没有参数传递。

interstitialAd.onClose(res => {    console.log('插屏 广告关闭')
})

注意事项

多次调用 InterstitialAd.onLoad()、InterstitialAd.onError()、InterstitialAd.onClose() 等方法监听广告事件会产生多次事件回调，建议在创建广告后监听一次即可，或者先取消原有的监听事件再重新监听。

在插屏广告展示过程中如果快速切换页面，可能会出现插屏广告展示在非调用页面的情况，如有需要请在页面切换完成后进行插屏广告展示。

小程序视频广告

小程序广告流量主操作指引：文档地址

开发者可以使用 ad 组件创建小程序视频广告组件，视频广告组件在创建后会自动拉取广告数据并显示。暂时仅支持在同层渲染模式下使用，且不支持嵌套使用。

广告尺寸设置

小程序视频广告不允许直接设置样式属性，默认宽度为100%（width: 100%），高度会自动等比例计算，因此开发者可以设置广告外层组件的宽度调整广告的尺寸。 广告外层组件的宽度不允许小于屏幕宽度90%，当宽度小于屏幕宽度的90%时，视频广告组件的宽度会强制调整为屏幕宽度的90%。

/* 外层组件的宽度可设置成100%或具体数值 */.adContainer {  width: 100%;
}

<view class="adContainer">
  <ad unit-id="xxxx" ad-type="video" ad-theme="white"></ad></view>

广告主题样式设置

小程序视频广告组件提供黑、白两种主题样式，开发者可以在创建视频广告时传入ad-theme参数实现主题样式选择，ad-theme参数为字符串类型，参数值可选white, black

<view class="adContainer">
  <ad unit-id="xxxx" ad-type="video" ad-theme="white"></ad></view>

<view class="adContainer">
  <ad unit-id="xxxx" ad-type="video" ad-theme="black"></ad></view>

广告事件监听

视频广告在创建后会自动拉取广告。开发者可以通过 ad 组件的 onload 和 onerror 事件监听广告拉取成功或失败，可以通过 onclose 事件监听广告被关闭。

<view class="adContainer">
  <ad unit-id="xxxx" ad-type="video" ad-theme="white" bindload="adLoad" binderror="adError" bindclose="adClose"></ad></view>

Page({
  adLoad() {    console.log('小程序视频广告加载成功')
  },
  adError(err) {    console.log('小程序视频广告加载失败', err)
  },
  adClose() {    console.log('小程序视频广告关闭')
  }
})

广告定时刷新

小程序视频广告组件不适用于定时刷新参数ad-intervals

视频前贴广告

小程序广告流量主操作指引：文档地址

开发者可以在 video 组件中添加属性配置，创建小程序视频前贴广告组件，视频广告组件在创建后会自动拉取广告数据，视频播放前展示广告。

广告样式

展示样式在开发者所设置的video组件中，以16：9的比例，垂直或者水平居中

广告创建

在 video 组件中添加了以下广告相关的属性配置，设置ad-unit-id后可以展示对应广告

添加广告单元，绑定广告事件

<video 
  class="xxx"
  src="xxx"
  bindadplay="onAdplay"
  bindadload="onAdload"
  bindadclose="onAdclose"
  bindaderror="onAdError"
  ad-unit-id="xxx"></video>

监听广告事件

Page({
  onAdplay(e) {    console.log('onAdplay', e)
  },
  onAdload(e){    console.log('onAdload', e)
  },
  onAdclose(e) {    console.log('onAdclose', e)
  },
  onAdError(e) {    console.log('onAdError', e)
  },
})

广告预加载

开发者可以调用 wx.preloadVideoAd 的方式进行广告的预加载

const adUnitId1 = 'xxx'const adUnitId2 = 'xxx'wx.preloadVideoAd([adUnitId1, adUnitId2])

错误码

错误码是通过bindaderror回调获取到的错误信息，前贴广告再普通广告组件ad错误码基础上新增了以下错误码。

注意事项

1、支持视频预加载能力：文档地址。

2、仅支持同层渲染模式下的video组件。

3、开发者可监听bindadplay事件获取广告播放状态，做出相应处理。

4、ad-unit-id不支持异步设置，只支持设置在wxml或者js文件的data属性里，通过setData设置的无效。

5、全屏模式下不展示视频前贴广告。

Grid 广告

小程序广告流量主操作指引：文档地址

开发者可以使用 ad 组件创建 Grid 广告组件，Grid 广告组件在创建后会自动拉取广告数据并显示。

广告尺寸设置

Grid 广告不允许直接设置样式属性，默认宽度为100%（width: 100%），高度会自动等比例计算，因此开发者可以设置广告外层组件的宽度调整广告的尺寸。格子广告有最小尺寸限制，5个的形态为331px，8个的形态为294px。

/* 外层组件的宽度可设置成100%或具体数值 */.adContainer {  width: 100%;
}

<view class="adContainer">
  <ad unit-id="xxxx" ad-type="grid" ad-theme="white" grid-count="5"></ad></view>

广告事件监听

Grid 广告在创建后会自动拉取广告。开发者可以通过 ad 组件的 onload 和 onerror 事件监听广告拉取成功或失败，可以通过 onclose 事件监听广告被关闭。

<view class="adContainer">
  <ad unit-id="xxxx" ad-type="grid" ad-theme="white" grid-count="5" bindload="adLoad" binderror="adError" bindclose="adClose"></ad></view>

Page({
  adLoad() {    console.log('Grid 广告加载成功')
  },
  adError(err) {    console.log('Grid 广告加载失败', err)
  },
  adClose() {    console.log('Grid 广告关闭')
  }
})

广告主题样式设置

小程序视频广告组件提供黑、白两种主题样式，开发者可以在创建视频广告时传入ad-theme参数实现主题样式选择，ad-theme参数为字符串类型，参数值可选white, black

<view class="adContainer">
  <ad unit-id="xxxx" ad-type="grid" ad-theme="white"></ad></view>

<view class="adContainer">
  <ad unit-id="xxxx" ad-type="grid" ad-theme="black"></ad></view>

广告格子个数设置

小程序视频广告组件提供黑、白两种主题样式，开发者可以在创建视频广告时传入grid-count参数实现主题样式选择，grid-count参数为数字类型，参数值可选5, 8

<view class="adContainer">
  <ad unit-id="xxxx" ad-type="grid" grid-count="5"></ad></view>

<view class="adContainer">  <ad unit-id="xxxx" ad-type="grid" grid-count="8"></ad></view>

原生模板 广告

小程序广告流量主操作指引：文档地址

开发者可以使用 ad-custom 组件创建 原生模板 广告组件，原生模板 广告组件在创建后会自动拉取广告数据并显示。

广告尺寸设置

原生模板 广告不允许直接设置样式属性，默认宽度为100%（width: 100%），高度会自动等比例计算，因此开发者可以设置广告外层组件的宽度调整广告的尺寸。 广告外层组件的宽度和具体模板相关，具体可以参考模板编辑器文档。

/* 外层组件的宽度可设置成100%或具体数值 */.adContainer {  width: 100%;
}

<view class="adContainer">  <ad-custom unit-id="xxxx"></ad-custom></view>

广告事件监听

原生模板 广告在创建后会自动拉取广告。开发者可以通过 ad-custom 组件的 onload 和 onerror 事件监听广告拉取成功或失败。

<view class="adContainer">  <ad-custom unit-id="xxxx" bindload="adLoad" binderror="adError"></ad-custom></view>

Page({
  adLoad() {    console.log('原生模板广告加载成功')
  },
  adError(err) {    console.log('原生模板广告加载失败', err)
  }
})

广告定时刷新

开发者可以在创建 原生模板 广告时传入 ad-intervals 参数实现广告的定时刷新，ad-intervals 参数为数字类型，单位为秒。注意：自动刷新的间隔不能低于30秒，因此 ad-intervals 的参数值必须大于或等于30。

<view class="adContainer">  <ad-custom unit-id="xxxx" ad-intervals="30"></ad-custom></view>

广告分析数据接口说明

向所有成为流量主的公众号、小程序、小游戏开发者开放数据接口。通过数据接口，开发者可以获取与公众平台官网统计模块类似但更灵活的数据，还可根据需要进行高级处理。

请注意：

1. 接口侧数据库中仅存储了2016年1月1日之后的数据，将无法查询到此前的数据，即使查到，也是不可信的脏数据；

2. 建议开发者在调用接口获取数据后，将数据保存在自身数据库中，以最大化访问的效率，也降低微信侧接口调用的不必要损耗；

3. 由于数据量较大, 所有接口采取分页获取的方式, 每页最大获取量为90。（eg：total_num 为100，则当page = 1，page_size = 10，则返回前10条；page = 1，page_size = 20，则返回前20条；page = 2，page_size = 10，则返回第11条到第20条）

4. 广告位枚举值变更说明由于多个接口都使用了广告位参数，为保证体验的一致性和参数的可读性，我们做了一些变更，所有接口均支持以 广告位类型名称（ad_slot） 传递参数，回包时新增这个名称来代表相关含义。此前的参数 slot_id 也可继续使用并回传。具体为：

接口总览

广告分析接口目前可用于获得“公众平台 → 流量主 → 数据统计”页面展示的部分广告数据和“公众平台 → 流量主 → 财务管理”页面展示的部分收入数据，与小程序相关的接口列表如下:

接口调用请求说明

一、获取小程序广告汇总数据（publisher_adpos_general）

需要向相应接口调用地址增加以下GET请求参数：

请注意： 如果不传递广告位类型名称，将默认返回全部类型广告位的数据。

返回参数说明（publisher_adpos_general）

返回数据包示例（publisher_adpos_general）

{    
    "base_resp":{        
        "err_msg":"ok",        
        "ret":0
    },    
    "list":[{            
        "slot_id":3030046789020061,            
        "ad_slot":"SLOT_ID_WEAPP_INTERSTITIAL",            
        "date":"2020-04-13",            
        "req_succ_count":443610,            
        "exposure_count":181814,            
        "exposure_rate":0.409850995,            
        "click_count":10095,            
        "click_rate":0.055523777,            
        "income":52175,            
        "ecpm":286.969100289
        }],    
    "summary":{        
        "req_succ_count":4406394,        
        "exposure_count":1797225,        
        "exposure_rate":0.407867522,        
        "click_count":100167,        
        "click_rate":0.055734257,        
        "income":578003,        
        "ecpm":321.608591022
    },    
    "total_num":1}

二、获取小程序广告细分数据（publisher_adunit_general）

需要向相应接口调用地址增加以下GET请求参数：

请注意： 当需要获取全部广告位的细分数据时，无需传递广告位类型名称及广告位id；当需要获取某类型广告位的细分数据时，仅需传递广告位类型名称；当需要获取某广告位id的细分数据时，仅需传递广告位id。

返回参数说明（publisher_adunit_general）

返回数据包示例（publisher_adunit_general）

{    
    "base_resp":{        
        "err_msg":"ok",        
        "ret":0
    },    
    "list":[
        {            
            "ad_unit_id":"adunit-9cedd8514XXXX",            
            "ad_unit_name":"激励视频长广告",            
            "stat_item":{                
            "ad_slot":"SLOT_ID_WEAPP_REWARD_VIDEO",                
            "date":"2020-04-10",                
            "req_succ_count":138250,                
            "exposure_count":74771,                
            "exposure_rate":0.54083906,                
            "click_count":2242,                
            "click_rate":0.029984887,                
            "income":93883,                
            "ecpm":6.790813743
            }
        }
    ],    
    "total_num":1}

三、获取小程序广告位清单（get_adunit_list）

需要向相应接口调用地址增加以下GET请求参数：

请注意： 当需要获取全部广告位的清单时，无需传递广告位类型名称及广告位id；当需要获取某类型广告位的清单时，仅需传递广告位类型名称；当需要获取某广告位id的数据时，仅需传递广告位id。

返回参数说明（get_adunit_list）

返回数据包示例（get_adunit_list）

{    
    "base_resp":{        
        "err_msg":"ok",        
        "ret":0
    },    
    "ad_unit":[
        {            
        "ad_slot":"SLOT_ID_WEAPP_REWARD_VIDEO",            
        "ad_unit_id":"adunit-e9418ee19XXXXX",            
        "ad_unit_name":"rewaXXXX",            
        "ad_unit_size":[
                {                    
                "height":166,                    
                "width":582
                }
            ],            
            "ad_unit_status":"AD_UNIT_STATUS_ON",            
            "ad_unit_type":"AD_UNIT_TYPE_REWARED_VIDEO",            
            "appid":"wx0afc78670fXXXX",            
            "video_duration_max":30,            
            "video_duration_min":6
        }
    ],    
    "total_num":1}

四、获取小程序结算收入数据及结算主体信息（publisher_settlement）

需要向相应接口调用地址增加以下GET请求参数：

请注意： 只要与获取数据的起止时间有重合，结算区间对应的数据都将返回。例如，请求2月11日至3月26日的数据，将会返回2月上半月、2月下半月、3月上半月、3月下半月四个结算区间的数据。

返回参数说明（publisher_settlement）

返回数据包示例（publisher_settlement）

{    
    "base_resp":{        
        "err_msg":"ok",        
        "ret":0
    },    
        "body":"深圳市腾讯计算机系统有限公司",    
        "penalty_all":0,    
        "revenue_all":5178368698,    
        "settled_revenue_all":2613696765,    
        "settlement_list":[
            {            
            "date":"2020-03-25",            
            "zone":"2020年3月1日至15日"
            "month":"202003",            
            "order":1,            
            "sett_status":1,            
            "settled_revenue":718926045,            
            "sett_no":"XXX",            
            "mail_send_cnt":"0",            
            "slot_revenue":[
                {                    
                "slot_id":"SLOT_ID_WEAPP_BANNER",                    
                "slot_settled_revenue":34139443
                },
                {                    
                "slot_id":"SLOT_ID_WEAPP_REWARD_VIDEO",                    
                "slot_settled_revenue":684786602
                }
            ]
        }
    ],    
    "total_num":1}

错误码说明