小程序开发之如何插入广告组件?【修订】

简介: 小程序开发之如何插入广告组件?【修订】

引言

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

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

image.png

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

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

I、流量主简介

1.1 开通条件

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

image.png

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

1.2 广告位id获取

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

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

image.png

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

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

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

目录
相关文章
|
2月前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
24天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
30天前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
73 0
|
2月前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
28天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
26 0
|
2月前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
2月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
2月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
2月前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
2月前
|
人工智能 小程序 JavaScript
【一步步开发AI运动小程序】十四、主包超出2M大小限制,如何将插件分包发布?
本文介绍了如何从零开始开发一个AI运动小程序,重点讲解了通过分包技术解决程序包超过2M限制的问题。详细步骤包括在uni-app中创建分包、配置`manifest.json`和`pages.json`文件,并提供了分包前后代码大小对比,帮助开发者高效实现AI运动功能。

热门文章

最新文章