小程序插入激勵視頻廣告例子

鼓搗了一段時間,終於算是明白了,現在想想確實很簡單,畢竟只是函數與函數調用的問題。
首先設置需要定義廣告函數,在網上看到的很多都在把他直接加在了onload函數裏面,但是對於小白來言,處理不好與其他之間事件的關係,導致出錯。所以我直接定義了一個廣告加載函數。
首先在.js文件page上方定義videoAd,

var videoAd = null;

在.js頁面裏

//加載激勵廣告
  adGet: function () {

    if (qq.createRewardedVideoAd) {
      // 加載激勵視頻廣告
      videoAd = qq.createRewardedVideoAd({
        adUnitId: 'egffhghfhfgfag7'//你的廣告key
      })
      //捕捉錯誤
      videoAd.onError(err => {
        // 進行適當的提示
      })
      // 監聽關閉
      videoAd.onClose((status) => {
        if (status && status.isEnded || status === undefined) {
          // 正常播放結束,下發獎勵
          // continue you code
         

        } else {
          // 播放中途退出,進行提示
        }
      })
    }
  },

有的教程說需要加入到onload事件函數中,我試了試好像不用,在後面直接調用就可以了。
然後就是創建點擊事件函數了。

//激勵廣告展示,函數名稱是隨意的,和前面對應就行了。
  openVideoAd() {
    console.log('打開激勵視頻');

    qq.showToast({
      title: '廣告完成後跳轉至空間',
      icon: 'none',
      duration: 2000
    });
    this.adGet();//這個地方就是調用了廣告函數,然後直接展示

    // 在合適的位置打開廣告
    if (videoAd) {
      videoAd.show().catch(err => {
        // 失敗重試
        videoAd.load()
          .then(() => videoAd.show())
      })
    }
  },

現在我們只需要在wxml的按鈕上添加點擊事件就可以實現了。

<button class="goodbutton" hover-class="hover" bindtap="openVideoAd">廣告展示</button>

這樣就完美完成了點擊響應插屏廣告了

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章