【快應用】原生廣告下載狀態監聽案例

阿新 • • 發佈：2022-12-12

問題背景：

快應用中下載類原生廣告監聽下載狀態變化介面呼叫沒生效，在上報點選接口裡觸發下載監聽後僅第一次返回狀態，之後就不返回了，該如何處理？

問題分析：

快應用在1100版本新增了一個ad-button元件，廢棄了原先的原生廣告的下載類介面，改用ad-button自帶的下載功能。因而在點選下載的時候開發者不知道該在何時去呼叫監聽介面，往往都會在在nativeAd.reportAdClick()和nativeAd.reportAdShow()中呼叫的下載監聽，這就導致出現此類似情況的時候。

解決方案：

ad-button在點選的時候就會跳轉到廣告頁面並開啟廣告下載的，同時ab-button也是支援onclick點選事件的，可以把下載監聽介面放到ad-button的點選事件中去。

程式碼：

      <stack class="stackstyle" onclick="reportNativeClick()">

        <image if="native.isShowImg" class="img" src="{{native.adImgSrc}}"></image>

        <ad-button class="adbtn" onclick="startButton()" valuetype="0" adunitid="{{native.adUnitId}}" adid="{{native.adData.adId}}"></ad-button>

      </stack>

    startButton(event) {

      console.error('start download result is = ', event.resultCode)

      nativeAd.onStatusChanged((data) => {

        console.log('onStatusChanged data = ', data)

        const progress = nativeAd.getDownloadProgress({

          adId: this.native.adData.adId

        })

        console.log('getDownloadProgress progress = ' + progress);

        const status = nativeAd.getAppStatus({

          adId: this.native.adData.adId

        })

        console.log('getAppStatus status = ' + status);

      })

    },

截圖：

Demo：

<template>

  <div class="item-container">

    <text class="alert">This is native ad demo</text>

    <div if="native.isShow" class="container">

      <text style="margin-bottom: 8px">ad title :{{native.adData.title}}</text>

      <video id="video" if="native.isShowVideo" src="{{native.adVideoSrc}}" autoplay="true" onclick="reportNativeClick()" class="ad-video"></video>

      <stack class="stackstyle" onclick="reportNativeClick()">

        <image if="native.isShowImg" class="img" src="{{native.adImgSrc}}"></image>

        <ad-button class="adbtn" onclick="startButton()" valuetype="0" adunitid="{{native.adUnitId}}" adid="{{native.adData.adId}}"></ad-button>

      </stack>

      <div style="flex-direction: row; width: 100%">

        <text style="width: 100%">ad source:{{native.adData.source}}</text>

        <image class="closeImg" src="/Common/close.png" onclick="closeAd"></image>

      </div>

    </div>

 

    <text if="native.isShowData">{{ native.adData }}</text>

    <text if="native.errStr">{{ native.errStr }}</text>

  </div>

</template>

<style>

  .container {

    flex-direction: column;

    margin-top: 20px;

    width: 100%;

    margin-bottom: 50px;

  }

  .stackstyle {

    width: 100%;

    height: 300px;

  }

  .img {

    width: 100%;

    resize-mode: contain;

  }

  .closeImg {

    width: 48px;

    height: 48px;

    flex-shrink: 0;

  }

  .alert {

    font-size: 40px;

    margin-top: 20px;

    margin-bottom: 20px;

  }

  .item-container {

    margin-top: 50px;

    padding: 20px;

    width: 100%;

    flex-direction: column;

    align-items: center;

    align-content: center;

  }

  .ad-video {

    object-fit: contain;

    width: 100%;

    height: 415px;

  }

  .btn {

    height: 80px;

    width: 60%;

    background-color: #00bfff;

    color: #ffffff;

    border-radius: 20px;

    margin-bottom: 20px;

  }

  .btn:active {

    background-color: #058fbd;

  }

  .adbtn {

    width: 200px;

    height: 50px;

    color: #ffffff;

    background-color: #00bfff;

    border-radius: 8px;

    position: absolute;

    align-self: flex-end;

    bottom: 20px;

    right: 20px;

  }

  .adbtn:active {

    background-color: #058fbd;

  }

</style>

<script>

  import ad from "@service.ad";

  import prompt from "@system.prompt";

  let nativeAd;

  export default {

    data: {

      componentName: "ad",

      provider: "",

      native: {

        adUnitId: "testb65czjivt9",

        isShow: false,

        adData: {},

        isShowImg: true,

        isShowVideo: true,

        isShowData: true,

        errStr: "",

        btnTxt: "",

        adImgSrc: "https://cs02-pps-drcn.dbankcdn.com/cc/creative/upload/20191226/b750592e-04be-4132-9971-52494b1e5b43.jpg",

        adVideoSrc: ""

      }

    },

    onInit() {

      this.$page.setTitleBar({ text: "Native Ad" });

    },

    onReady(options) {

      console.info("native ad onReady");

      this.showNativeAd();

    },

    onShow(options) {

      if (this.native.isShow) {

        this.reportNativeShow();

      }

    },

    getAdProvider: function () {

      this.provider = ad.getProvider();

      prompt.showToast({

        message: "getProvider : " + this.provider,

        duration: 2000,

        gravity: "center"

      });

    },

    isDownloadAd(creativeType) {

      let downloadTypes = [103, 106, 107, 108, 101, 102, 110];

      return downloadTypes.includes(creativeType);

    },

    showNativeAd() {

      var that = this;

      this.getAdProvider();

      if (this.provider !== "huawei") {

        console.info("the device  does not support ad.");

        return;

      }

      nativeAd = ad.createNativeAd({ adUnitId: this.native.adUnitId });

      nativeAd.onLoad(data => {

        console.info("ad data loaded: " + JSON.stringify(data));

        this.native.adData = data.adList[0];

        if (this.native.adData) {

          if (this.native.adData.imgUrlList) {

            this.native.adImgSrc = this.native.adData.imgUrlList[0];

            console.info(" this.native.adImgSrc =" + this.native.adImgSrc);

            this.native.isShowImg = true;

          } else {

            this.native.isShowImg = false;

            this.native.adImgSrc = "";

          }

          if (this.native.adData.clickBtnTxt) {

            this.native.btnTxt = this.native.adData.clickBtnTxt;

          } else {

            this.native.btnTxt = "";

          }

          if (this.native.adData.videoUrlList && this.native.adData.videoUrlList[0]) {

            this.native.adVideoSrc = this.native.adData.videoUrlList[0];

            this.native.isShowVideo = true;

          } else {

            this.native.isShowVideo = false;

            this.native.adVideoSrc = "";

          }

          this.native.isShow = true;

          this.native.errStr = "";

          this.reportNativeShow();

        }

      });

      nativeAd.onError(e => {

        console.error("load ad error:" + JSON.stringify(e));

        this.native.isShowImg = false;

        this.native.isShowVideo = false;

        this.native.isShow = false;

        this.native.errStr = JSON.stringify(e);

      });

      nativeAd.load();

 

    },

    reportNativeShow() {

      if (nativeAd) {

        nativeAd.reportAdShow({ adId: this.native.adData.adId });

      }

    },

    reportNativeClick() {

      nativeAd.reportAdClick({

        adId: this.native.adData.adId

      });

 

    },

    listenNativeAdDownloadStatus(downloadstatus) {

      if (downloadstatus === "INSTALLED") {

        this.native.btnTxt = "OPEN";

      }

    },

    startButton(event) {

      console.error('start download result is = ', event.resultCode)

      nativeAd.onStatusChanged((data) => {

        console.log('onStatusChanged data = ', data)

        const progress = nativeAd.getDownloadProgress({

          adId: this.native.adData.adId

        })

        console.log('getDownloadProgress progress = ' + progress);

        const status = nativeAd.getAppStatus({

          adId: this.native.adData.adId

        })

        console.log('getAppStatus status = ' + status);

      })

    },

    removeAdListen: function () {

      if (nativeAd) {

        nativeAd.offDownloadProgress();

        nativeAd.offError(() => {

          console.log("nativeAd offError");

        });

        nativeAd.offLoad(() => {

          console.log("nativeAd offLoad");

        });

        nativeAd.offStatusChanged();

      }

    },

    onDestroy() {

      if (nativeAd) {

        nativeAd.destroy();

      }

    },

    closeAd: function () {

      this.native.isShow = false;

    }

  };

</script>

欲瞭解更多更全技術文章，歡迎訪問https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh