小程序开发之如何插入广告组件?

引言

流量主接入简单，仅需复制广告插件嵌入代码，广告展示位置灵活控制

小程序上线而且累计独立访客（UV）不低于 1000->开通流量主->获得广告id->添加广告代码并调试

属性	类型	默认值	必填	说明	最低版本
unit-id	string		是	广告单元id，可在​​小程序管理后台​​的流量主模块新建	​​1.9.94​​

案例：​​#小程序://逆向/文章搜索/VpIywukvWp8v6EA​​

I、流量主简介

1.1 开通条件

开通条件：累计独立访客（UV）不低于 1000

小程序流量主的访客是只要进入小程序就算，如果添加到我的小程序会另外累计

1.2 广告位id获取

小程序后台 ->推广->流量主->广告管理

新建广告位即可获取对应广告位id

II、嵌入代码片段

嵌入代码片段至希望展示广告的位置，并在发布前通过测试预览广告位展示情况，审核期间推荐关闭激励视频广告。

如果是修改其他人的代码，可搜索​​unitId​​字符串进行替换

2.1 广告显示

广告使用view包裹，然后等页面渲染完成再去显示广告。showad默认为0，等页面渲染完成之后设置为1。

wxml：

<view wx:if="{{showad}}"<ad unit-id="adunit-xxx"></ad></view>

    <view class="data-v-400080d0" wx:if="{{SHOW_TIP}}">
        <add-tips bind:__l="__l" class="data-v-400080d0" statusBarHeight="{{statusBarHeight}}" vueId="663426c0-1"></add-tips>
    </view>

    <view class="ad-container data-v-400080d0">
        <ad binderror="__e" bindload="__e" class="data-v-400080d0" data-event-opts="{{[ [ 'load',[ [ 'bannerAdLoad',['$event'] ] ] ],[ 'error',[ [ 'bannerAdError',['$event'] ] ] ] ]}}" unitId="adunit-xxx"></ad>
    </view>

js：

onShow:function(option){ this.setData({showad:1,}); }

wxss

.ad-container.data-v-400080d0 {
    padding-left: 8px;
    padding-right: 8px;
    margin-top: 30px;
    width: 100%;
}

2.2 原生模板广告

wxss

.ad-container.data-v-19ecd09c {
    padding-left: 8px;
    padding-right: 8px;
    margin-top: 40px;
    width: 100%;
}

js

class="ad-container data-v-19ecd09c">
        <ad-custom adIntervals="30" bind:__l="__l" bind:error="__e" bind:load="__e" class="data-v-19ecd09c" data-event-opts="{{[ [ '^load',[ ['adLoad'] ] ],[ '^error',[ ['adError'] ] ] ]}}" unitId="adunit-xxx" vueId="88dc10a6-1"></ad-custom>

2.3 插屏广告

let interstitialAd = null
Page({
  onLoad() {
    if(wx.createInterstitialAd){
      //创建
      interstitialAd = wx.createInterstitialAd({ adUnitId: 'xxxx' })
      interstitialAd.onLoad(() => {
        console.log('onLoad event emit')
        //显示
        interstitialAd.show().catch((err) => {
            console.error(err)
        })
      })
      interstitialAd.onError((err) => {
        console.log('onError event emit', err)
      })
      interstitialAd.onClose((res) => {
        console.log('onClose event emit', res)
      })
    }
  }
})

2.4 激励视频广告（阅读文章/下载资源/保存图片信息）

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

一天首次阅读文章需要激励视频，默认不开启激励视频。

感谢您的阅读，但该文章需要您先阅读激励视频广告。

实现逻辑：

1. 看完广告后标记：storage_key + 文章id
2. 再次加载文章时判断是否存在标记，如果没有则弹窗激励视频阅读，如果有缓存标记则对比storage_key。

标记数据存储生命周期跟小程序本身一致。

开关可在源码中的 pages/data/data.js文件中以下代码修改

if (that.about_center[0].wx_jili_video != '' && that.detailData.fr_videp_if != '0')//
//fr_videp_if  为0默认关闭 为1默认开启

激励视频广告

//激励视频广告组件默认是隐藏的，因此可以提前创建，以提前初始化组件。
//调用 wx.createRewardedVideoAd 创建激励视频广告组件。该方法返回的是一个全局单例。

//激励视频广告组件默认是隐藏的，需要调用 RewardedVideoAd.show() 进行显示。

onLoad: function(a) {
                    this.windowHeight = getApp().globalData.windowHeight, getApp().globalData.userAvatarFilePath && (this.avatarImage = getApp().globalData.userAvatarFilePath),
                    this.rewardedVideoAdShowAll = getApp().globalData.rewardedVideoAdShowAll, this.$uma.trackEvent("rewarded-VideoAd-showAll", {
                        showAll: this.rewardedVideoAdShowAll
                    });
                    var t = this;
                    wx.createRewardedVideoAd && ((n = wx.createRewardedVideoAd({
                        adUnitId: "adunit-xxx"
                    })).onLoad(function() {
                        t.rewardedVideoAdLoaded = !0;
                    }), n.onError(function(e) {
                        t.rewardedVideoAdLoaded = !1;
                    }), n.onClose(function(a) {
                        a && a.isEnded || void 0 === a ? (t.rewardedVideoAdAlreadyShow = !0, t.saveCans(),
                        t.$uma.trackEvent("rewarded-VideoAd-show")) : (t.rewardedVideoAdAlreadyShow = !1,
                        e.showToast({
                            title: "请完整观看哦"
                        }), t.$uma.trackEvent("rewarded-VideoAd-show-break"));
                    }));
                },

see also

更多内容请关注​​#小程序：iOS逆向​​,只为你呈现有价值的信息，专注于移动端技术研究领域。