小程序通过广告组件进行赚钱(流量主)--小程序走过的坑(16)(最新版)

    xiaoxiao2024-12-23  4

    当独立访客大于1000时,小程序就可以在微信公众平台开通流量主功能。无论是个人小程序或者企业小程序都能开通(画重点);

    当你开通完流量主功能(开通时需要填写银行卡等信息)

    就可以新建广告组件

    目前得广告组件分为Banner、激励式视频、插屏三种广告组件。可根据需求选择,也可同时使用。

    将组件代码按提示插入在小程序中,用户点击广告位,你即可拥有微信广告位得收入。

    激励视频广告

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

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

    let rewardedVideoAd = null Page({ 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) }) } } })

    开发者可以使用 <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 广告关闭') } })

    插屏广告

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

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

    广告创建

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

    let interstitialAd = null Page({ 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('插屏 广告关闭') })

     

     

    最新回复(0)