华为快速应用、HTML5和广告

Question

我想在Huawei HTML5 QuickApp中实现Huawei Ads。我已经让Quick App运行起来了。

请问如何在其中实现华为广告横幅广告？

Answer 1

QuickApp

不支持横幅广告，只支持原生广告和奖励广告。

HTML5 QuickApp access广告需要使用与QuickApp的web组件框架的双向通信来获取广告。

以下是将HTML5 QuickApp连接到广告的示例代码。

.doc-page {
        flex-direction: column;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
    }
  
    .web-page {
        width: 100%;
        height: 100%;
    }


    import router from "@system.router"
    import prompt from '@system.prompt'
    import ad from "@service.ad"
    let nativeAd
    let rewardedVideoAd
    export default {
        props: ['websrc'],
        data: {
             native: {
                adUnitId: 'testu7m3hc4gvm',
                adData: {},
                errStr: '', 
            },
            rewarded: {
                adUnitId: 'testx9dtjwj8hp',
                isShow: 'false',
                errStr: ''
            },
            title: "",
  
            // TODO Replace the link to the H5 url
            webUrl: "http://xxx/h5_ad_demo.html",
            allowThirdPartyCookies: true,
            fullscreenDirection: "landscape",
            linkJumpPolicy: "default",
            openMultiwindow: false,
            list: ["new RegExp('https?.*')"],
        },
  
        onPageStart(e) {
            console.info('pagestart: ' + e.url)
        },
        // Each page switch triggers
        onPageFinish(e) {
            console.info('pagefinish: ' + e.url, e.canBack, e.canForward)
        },
        onTitleReceive(e) {
            this.title = e.title;
        },
        onError(e) {
            console.info('pageError : ' + e.errorMsg)
        },
        onMessage(e) {
            console.info('onmessage e = ' + e.message + ", url = " + e.url);
            prompt.showToast({
                message: e.message + ': ' + e.url
            })
           var msg=e.message;
           if(msg==='requestNativeAd'){
               if(this.isSupportAd()){
                  this.requestNativeAd();
               }
           }else if(msg==='requestRewardAd'){
                 if(this.isSupportAd()){
                      this.requestRewardedAd();
                 }  
           }else if(msg==='reqReportNativeAdShow'){
               this.reportNativeShow();
  
           }else if(msg==='reqReportNativeAdClick'){
               this.reportNativeClick();
           }
        },
  
        isSupportAd:function(){
         let provider = ad.getProvider();
         if(provider==='huawei'){
             return true;
         }
          return false ; 
        },
  
        requestNativeAd() {
            console.info("requestNativeAd");
            nativeAd = ad.createNativeAd({ adUnitId: this.native.adUnitId })
            nativeAd.onLoad((data) => {
                console.info('nativeAd data loaded: ' + JSON.stringify(data));
                this.native.adData = data.adList[0];
                if (this.native.adData) {
                  let nativeAdObj={"nativeAdData":data};
                  let nativeAdMsg=JSON.stringify(nativeAdObj);
                  console.info("requestNativeAd onload nativeAdMsg= "+nativeAdMsg);
                  let senddata={"message":nativeAdMsg};
                  this.$element('web').postMessage(senddata);
                }
                    
                
            })
            nativeAd.onError((e) => {
                console.error('load ad error:' + JSON.stringify(e));
                  let nativeAdErrorObj={"nativeAdDataError":e};
                  let nativeAdErrorMsg=JSON.stringify(nativeAdErrorObj);
                    console.info("requestNativeAd onError nativeAdErrorMsg= "+nativeAdErrorMsg);
                     let errordata={"message":nativeAdErrorMsg};
                  this.$element('web').postMessage(errordata);
            })
  
            nativeAd.load()
        },
        reportNativeShow() {
            nativeAd.reportAdShow({ 'adId': this.native.adData.adId })
        },
        reportNativeClick() {
            nativeAd.reportAdClick({ 'adId': this.native.adData.adId })
        },
     
        requestRewardedAd() {
            rewardedVideoAd = ad.createRewardedVideoAd({ adUnitId: this.rewarded.adUnitId });
  
            /**Set the callback function for successful advertisement loading and invoke the ad show method to display the advertisement. */
           rewardedVideoAd.onLoad(() => {
                console.info("rewarded video ad onLoad");
                rewardedVideoAd.show();
            })
  
              rewardedVideoAd.offLoad(() => {
                console.info("rewarded video ad offLoad");
               
            })
  
             /**Listen to the video ad error event. */
            rewardedVideoAd.onError((e) => {
                console.error('load rewarded video ad error:' + JSON.stringify(e));
                this.rewarded.errStr = JSON.stringify(e)
            })
            
           /**Listening for the event of disabling the incentive video ad */
            rewardedVideoAd.onClose(() => {
                console.info("rewarded video ad onClose");
            })
  
            rewardedVideoAd.load();
        },
        onDestroy() {
            nativeAd && nativeAd.destroy()
            rewardedVideoAd && rewardedVideoAd.destroy()
        },
  
        isCanForward() {
            this.$element('web').canForward({
                callback: function (e) {
                    if (e) {
                        this.$element('web').forward();
                    }
                }.bind(this)
            })
        },
        isCanBack() {
            this.$element('web').canBack({
                callback: function (e) {
                    if (e) {
                        this.$element('web').back();
                    } else {
                        router.back();
                    }
                }.bind(this)
            })
        },
  
        onShow: function () {
            console.info(" onshow");
        },
        onHide: function () {
            console.info("  onHide");
        },
        onBackPress() {
            this.isCanBack();
            return true
        },
  
    }

h5

_

广告

_

demo.html

ad Demo
    
    
    
     table.dataintable {
        margin-top:10px;
        border-collapse:collapse;
        border:1px solid #aaa;
        width:100%;
     }
    table.dataintable th {
        vertical-align:baseline;
        padding:5px 15px 5px 6px;
        background-color:#d5d5d5;
        border:1px solid #aaa;
        text-align:left;
    }
    table.dataintable td {
        vertical-align:text-top;
        padding:6px 15px 6px 6px;
        background-color:#efefef;
        border:1px solid #aaa;
        }
    
  
    
  
     system.onmessage = function(data) {
      console.info("onmessage data="+data);
       setResult(data);
       var adDataObject=JSON.parse(data);
       if(adDataObject.nativeAdData){
         var nativeAdList=adDataObject.nativeAdData.adList[0];
          if(nativeAdList){
              if (nativeAdList.imgUrlList) {
                    var imgSrc=nativeAdList.imgUrlList[0];
                    document.getElementById("adImage").src= imgSrc;
                     console.info('ad data adImgSrc: ' +imgSrc);
                } 
          }
       }       
      }
       
     function reportNativeShow() {
          system.postMessage("reqReportNativeAdShow"); 
        }
         
    function reportNativeAdClick() {
       console.info("reportNativeAdClick");
          system.postMessage("reqReportNativeAdClick"); 
        }
         
    function getNativeAd(){
       system.postMessage("requestNativeAd");
    }
    function getRewardAd(){
         system.postMessage("requestRewardAd");
    }
  
    function setResult(str) {
        document.getElementById("nativeAdDataResult").innerHTML= str
    }
    function setResultnew(str) {
        document.getElementById("resultnew").innerHTML= str
    }
     
    function onLoadSuc(){
     console.info("onLoadSuc");
      reportNativeShow();
    }
  
    function openNewWeb(){
    system.go("https://www.huawei.com")
    }
     
    function openNewWindow(){
       window.open("http://www.w3school.com.cn")
    }
     
     

  



    H5 ad demo


    ResultNativeAd: 
 (unknown)


    ResultRewardAd: 
 (unknown)

  

Native Ad

  
Reward Ad

有关更多详细信息，请参阅以下链接：

Web组件

访问华为广告发布服务