手把手教你如何開通微信小程序流量主廣告以及如何插入廣告組件

開通流量主流程

1）點擊左側導航欄的「流量主」進入專屬模塊

小程序累計獨立訪客（UV）1000以上，且無違規記錄，即可開通流量主功能。

2）點擊「新建廣告位」開始創建

輸入廣告位名稱即可，如計劃插入多個廣告位，需要分別新建。

3）獲取廣告位代碼片段

系統將生成廣告位的代碼片段，開發者點擊「複製代碼」留用。

4）嵌入代碼片段&測試&發布

嵌入代碼片段至希望展示廣告的位置，並在發布前通過測試預覽廣告位展示情況。 註：請務必完成主流機型的適配測試，由於適配原因帶來的違規問題，將受到同等處罰。

①原生模板廣告

.adContainer { width: 100%;}

<view> <ad-custom unit-id="xxxx"></ad-custom></view>

②插屏廣告

let interstitialAd = nullPage({ 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) }) } }})

③激勵視頻廣告

let rewardedVideoAd = nullPage({ 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) const { isEnded } = res //視頻是否播放結束、可以向用戶下發獎勵 if (isEnded) { //@todo 獲得積分數據交互 } }) } }, showVideoAd() { // 用戶觸發廣告後，顯示激勵視頻廣告 if (rewardedVideoAd) { rewardedVideoAd.show().catch(() => { // 失敗重試 rewardedVideoAd.load() .then(() => rewardedVideoAd.show()) .catch(err => { console.log('激勵視頻 廣告顯示失敗') }) }) } },})

<button type="default" bindtap="showVideoAd">觀看完整視頻廣告</button>

總結

以上便是這次手把手教我開通小程序廣告組件、接入場景與操作指引的學習筆記。多個頁面接入同一種類型的流量主廣告組件務必使用同一個adUnitId，不要問為什麼，我也不知道，就是會提高單價曝光率。