小程序开发之流量主接入

1,725 阅读7分钟

这是我参与11月更文挑战的第24天,活动详情查看:2021最后一次更文挑战

引言

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

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

首次提交小程序广告组件,需经过合规性审核才能在线上展示;审核时间为1个工作日,审核期间暂时关闭线上广告展示。

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

I、流量主简介

违规处罚

  • 二级严重违规 强制点击广告:以广告位阻断用户使用流程,强制点击广告作为页面出口。

运营内容只能通过观看激励广告才能解锁,视频分享播放详情页通过激励广告才能解锁。

  • 二级普通违规
  1. 激励视频广告播放后未下发所承诺的奖励。
  2. 激励视频广告入口无提示。
  • 三级违规
  1. 互推行为:小程序流量主在站内进行一定规模的流量分发行为。(包括但不限于游戏盒子类小程序)
  2. 诱导分享、关注、下载、打开小程序:小程序流量主以奖励或其他方式,强制或诱导用户将页面分享至好友或群、打开其他小程序、关注公众号、下载APP/应用软件的行为。

1.1 开通条件

开通条件:累计独立访客(UV)不低于 1000

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

1.2 广告位管理

  1. 封面广告:通过微信主界面下拉进入小程序时,看到封面广告,沉浸式全屏展现,下方显示流量主的头像和名称;用户在看到封面广告进入流量主的小程序后,通过右上角的分享按钮点击进入可二次观看封面广告。

广告位置:小程序打开之前(下拉快捷入口打开小程序)

产品形态:广告外层为纯图片样式,点击外层图片将跳转指定落地页: 小程序、自定义H5页面、APP下载页、公众号关注页、原生推广页;

分成模式:预计分成后价格为25元/ecpm,

按照每一千次有效的广告曝光,平台收取广告费用并与流量主分成。 开发者按单日广告收入流水的50%比例分成,不设上限。

封面广告 无法创建无需获取代码,只要打开开关就行了

  1. 格子广告已下线,不再支持创建和编辑,建议接入“原生模版广告”替换。

1.3 广告位id获取

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

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

激励式广告播放时长推荐选择6-15秒

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

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

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

在这里插入图片描述

II 广告组件应用规范(适用场景、禁止规则)

2.1禁止规则

Banner广告 / 格子广告 / 视频广告组件的禁止规则

  • 不得单屏内出现 2 个及以上广告组件。
  • 不得通过明示或暗示的方式诱导或引导,用户点击,如:“赶快戳开看一看”等。
  • 不可设置广告组件透明度
  • 不得自行设计可关闭广告的逻辑,如:付费免广告、关闭按钮。

激励式广告组件的禁止规则: 在这里插入图片描述

2.2 适用场景:

在这里插入图片描述 Banner广告 / 格子广告 / 视频广告组件

  • Banner广告组件:详情页底部插入广告,以保证核心操作不受干扰。
  • 激励式广告组件:

获取积分:观看广告,可获得额外的签到/分享积分

获取进阶内容:观看广告,可进入下一个视频 / 课程

解锁特殊内容:观看广告,可获得新功能的限时体验机会;观看广告,可获得VIP内容的观看机会。

获取参与机会:观看广告,可参与具有奖励的活动

  • 插屏广告组件:

切换Tab:从首页切换至商城 Tab 时出现广告,从个人主页 Tab 切换回首页时出现广告。

游戏回合结束:每当游戏回合结束时出现广告,每当游戏关卡通过时出现广告。

视频播放停顿:当视频播放结束时出现广告,当视频播放暂停时出现广告 插屏广告。

流程结束:购物下单流程结束时出现广告,完成一次分享时出现广告。

III、嵌入代码片段

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

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

目前我小程序支持激励式广告、插屏广告、视频广告、封面广告、原生模版广告。

3.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-43f7c4189a8e7c35"></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%;
}

3.2 原生模板广告

wxss

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

js 案例一




<view 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>
    </view>

案例二:全屏广告

<ad-custom unit-id="adunit-"></ad-custom>

3.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)
      })
    }
  }
})

3.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-f"
                    })).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"));
                    }));
                },

IV 使用Wordpress配置广告

文章添加广告:在wordpress后台编辑文章中输入相对应的AD广告标签

<ad unit-id="adunit-"></ad>

V、导流

5.1 自定义贴片推广小程序

5.2 从公众号导粉丝

  1. 公众号菜单栏挂上小程序链接
  2. 公众号文章的资源从小程序获取,看完广告才可复制下载链接。
  3. 用户首次关注自动回复文字添加小程序链接:#小程序://逆向/文章搜索/VpIywukvWp8v6EA

使用android版的微信可获取小程序的页面链接

5.3 提升搜索结果加权

  1. 小程序测评达标,提升搜索结果加权
  2. 页面内容接入,开启页面收录,页面信息将被用于搜索、扫条码 ,可帮助小程序获取更多流量。

5.4 小程序换友链例子

名称: iOS逆向

appid: wxfca5e5a3c3c135a5

描述:只为你呈现有价值的信息,专注于移动端技术研究领域。

图标:img-blog.csdnimg.cn/2367f28b3e5…

关注二维码:img-blog.csdnimg.cn/56ba35b168b…

see also

更多内容请关注 #小程序:iOS逆向,只为你呈现有价值的信息,专注于移动端技术研究领域;更多服务和咨询请关注#公众号:iOS逆向


作者:公众号iOS逆向
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。