微幕小程序增强版微信小程序添加激励视频广告和插屏广告

关于技术宅的小程序多端小程序方案,曾经在《百度智能小程序折腾记》有写,今天,技术宅给大家带来微幕小程序增强版微信小程序添加激励视频广告插屏广告,激励视频广告和插屏广告这两种广告添加方法需要有一定的代码编辑能力,比Banner广告的插入需要费些功夫,废话不多说,进入主题!

获取广告代码

这里,技术宅先激励视频广告为例子,我们先前往小程序流量主获取激励视频的广告代码!

微幕小程序增强版微信小程序添加激励视频广告和插屏广告

点击获取代码,会获取如下代码:

// 在页面中定义激励视频广告
let videoAd = null

// 在页面onLoad回调事件中创建激励视频广告实例
if (wx.createRewardedVideoAd) {
  videoAd = wx.createRewardedVideoAd({
    adUnitId: 'adunit-07d6fabf180159db'
  })
  videoAd.onLoad(() => {})
  videoAd.onError((err) => {})
  videoAd.onClose((res) => {})
}

// 用户触发广告后,显示激励视频广告
if (videoAd) {
  videoAd.show().catch(() => {
    // 失败重试
    videoAd.load()
      .then(() => videoAd.show())
      .catch(err => {
        console.log('激励视频 广告显示失败')
      })
  })
}

以上代码分为三段,分别插入当前页面js的不同位置,这里技术宅以微幕小程序增强版微信小程序为例,将激励视频广告添加进文章内容模板,也就是detail文件夹!在detail.js里面搜索page({,并将let videoAd = null添加进page上方,如下图所示!

微幕小程序增强版微信小程序添加激励视频广告和插屏广告

添加第二段代码,搜索onload(可以通过 ctrl + f搜索),在onload里的new ModalView;下面添加代码:

// 在页面onLoad回调事件中创建激励视频广告实例
if (wx.createRewardedVideoAd) {
  videoAd = wx.createRewardedVideoAd({
    adUnitId: 'adunit-07d6fabf180159db'
  })
  videoAd.onLoad(() => {})
  videoAd.onError((err) => {})
  videoAd.onClose((res) => {})
}

添加第三段代码,第三段代码是解析需要显示的广告内容, 技术宅想要在阅读更多点击的时候显示激励视频广告,并且是先看到广告才显示内容,我们就搜索 readMore() {,并将以下代码:

// 用户触发广告后,显示激励视频广告
if (videoAd) {
  videoAd.show().catch(() => {
    // 失败重试
    videoAd.load()
      .then(() => videoAd.show())
      .catch(err => {
        console.log('激励视频 广告显示失败')
      })
  })
}

添加进去!添加位置如图所示!

微幕小程序增强版微信小程序添加激励视频广告和插屏广告

完成以上操作我们的激励视频广告就添加完成了,这里技术宅好需要提醒,为了能通过广告位审核,我们还需要在对应的激励视频广告触发位置提醒用户会出现广告,所以我们需要修改对应模板的wxml文件,这里技术宅以detail模板的detail.wxml为例子:

<!-- 阅读更多 -->
<view class="detail-read-more" wx:if="{{detailSummaryHeight != ''}}">
<view class="detail-readmore-mask">
<view class="detail-readmore-btn" bindtap="readMore"><view>阅读更多</view><view class="detail-readmore-tip">点击会出现视频广告
</view></view></view>
</view>
</view>

以上文案自己修改,这里不做强制!
然后添加detail-readmore-tip的CSS内容(CSS自己酌情调试样式):

.detail-readmore-btn {
  width: 462rpx;
  height: 88rpx;
  font-size: 35rpx;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  color: #fd8f45;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.detail-readmore-tip {
  padding-top: 10rpx;
  font-size:24rpx;
  color: #fd8f45;
}

到了这里,激励视频广告位就成功添加了,因为调试只能在真机调试,所以我们预览即可看到效果!

关于插屏广告,添加方式和激励视频广告添加方式大同小异,技术宅这里不做赘述!微幕小程序增强版微信小程序添加激励视频广告和插屏广告技术宅就写到这里,希望对大家有所帮助!

技术分享

让WordPress支持SVG文件上传

2019-9-26 1:36:38

技术分享

小程序激励视频广告组件审核被驳回的解决方法

2019-9-29 11:30:17

    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索