Integrating Ads Kit

Overview

Petal Ads Publisher Service is a monetization service that leverages Huawei's extensive data capabilities to display targeted, high quality ad content in your apps to the vast user base of Huawei devices.

HUAWEI Quick App supports native, rewarded, banner, and interstitial ads.

• Native ads fit seamlessly into the content of an app. These ads are less disruptive, so that users are generally more willing to view the ad content.
• Rewarded ads offer users in-app rewards for watching videos in their entirety.
• Banner ads are rectangular images that occupy a spot within an app's layout, either at the top, middle, or bottom of the device screen. Banner ads refresh automatically at regular intervals. When a user taps a banner ad, the user is redirected to the advertiser's page.
• Interstitial ads are displayed in full-screen mode when an app is launched, paused, or exited.

The integration procedure is as follows.

Restrictions

Petal Ads Publisher Service places restrictions on the integration entity, media, device, and service area.

Before You Start

Registering a HUAWEI ID and Enabling the Merchant Service

Petal Ads Publisher Service can only be integrated by company and individual developers who have completed identity verification and enabled Merchant Service.

Adding a Quick App

Add an app to integrate Petal Ads Publisher Service.

Adding an Ad Unit

Add an ad unit for your app.

Integrating the Petal Ads SDK

Requesting User Consent

Petal Ads supports both personalized and non-personalized ads. This section describes how to use the Petal Ads APIs to request user consent and how to request ads based on users' consent status.

1. When your quick app is launched for the first time, determine whether to display a pop-up to obtain user consent.

• If so, run ad.setUnderAgeOfPromise(false).
• If not, run ad.setUnderAgeOfPromise(true).

  For ad.setUnderAgeOfPromise(true), the users are under the age of consent, and only non-personalized ads can be requested. In this way, the fail method is called back for each ad.requestConsentUpdate request, and the pop-up asking for user consent does not need to be displayed. The value false indicates that a user has reached the age of consent.

2. In this case, call ad.requestConsentUpdate to update the user's consent status.
   • Upon failure callback, request non-personalized ads.
   • Upon success callback, return ad technology provider information and check the value of isNeedConsent.
     • If the value of isNeedConsent is false, personalized ads can be requested without asking for user consent.
     • If the value of isNeedConsent is true and the value of consentStatus is 2, display a pop-up to collect user consent.
3. Collect user consent.

   You need to collect the consent (for example, in a custom pop-up) from a user and display the complete list of ad technology providers. Demo effect for your reference as follows.

   Figure 1 Effect of a pop-up	Figure 2 Ad provider displayed after a user taps here in Figure 1

4. Call ad.setConsentStatus to set the user consent obtained from a pop-up in 3.
   注意

   You must allow users to modify or withdraw their comments at any time. If they do so, call the API to update the comments.

5. Call ad.setTagForUnderAgeOfPromise by ad type to set the tag for users under the age of consent.
6. Call ad.setNonPersonalizedAd by ad type to set the requested ad type (personalized or non-personalized).
7. Request an ad. If a user skips the pop-up, your app can request only non-personalized ads.

   You can call APIs to integrate native ads, rewarded ads, and banner ads.

Native Ads

1. Call ad.getProvider to check whether Ads Kit is supported. If an empty character string is returned, the service is not available.
2. Use const nativeAd=ad.createNativeAd to create a native ad.
3. Call nativeAd.load to obtain ad data.

   The nativeAd.onLoad callback is executed when successful.

   nativeAd.onLoad((adlist) => {
   })

   The nativeAd.onError callback is executed when unsuccessful.

   nativeAd.onError((errorObj) => {
   })

4. Use the ad-button element to download the advertiser app in the native ad.
5. Call nativeAd.reportAdShow to report ad impressions.
   注意

   This API should be called if the ad is still displayed after the page is switched from the background (home screen, landing page, etc.) to the foreground.

6. Call nativeAd.reportAdClick to report the data from each user ad tap.
7. When an app page is destroyed, call nativeAd.destroy to destroy the native ad.

For more details, please refer to the demo.

Rewarded Ads

1. Call ad.getProvider to check whether Ads Kit is supported. If an empty character string is returned, the service is not available.
2. Use const rewardedVideoAd=ad.createRewardedVideoAd to create a rewarded ad.
3. Call rewardedVideoAd.load to obtain ad data. If successful, the ad playback entry is displayed.

   The rewardedVideoAd.onLoad callback is executed when successful.

   rewardedVideoAd.onLoad((adlist) => {
   })

   The rewardedVideoAd.onError callback is executed when unsuccessful.

   rewardedVideoAd.onError((errorObj) => {
   })

4. Call rewardedVideoAd.show to report ad impressions.
5. Call rewardedVideoAd.onClose to listen to the closing of a rewarded ad.
6. Call rewardedVideoAd.load to obtain the next ad before closing an ad.
7. When an app page is destroyed, call rewardedVideoAd.destroy to destroy the rewarded ad.

For more details, please refer to the demo.

Banner Ads

1. Call ad.getProvider to check whether Ads Kit is supported. If an empty character string is returned, the service is not available.
2. Use const bannerAd=ad.createBannerAd to create a banner ad.
   注意

   You are advised not to change the banner ad size. If you change it, error code 1004 is returned at a high probability. Set the width and height based on the parameter description of style.

3. Call bannerAd.show to obtain an ad.

   The bannerAd.onLoad callback is executed when successful.

   bannerAd.onLoad(()=>{
       console.log('bannerAd  onload success')
   })

   The bannerAd.onError callback is executed when unsuccessful.

   bannerAd.onError((e)=>{
       console.log('bannerAd  onError '+ JSON.stringify(e))
   })

4. Call bannerAd.hide to hide an ad. To display the ad again, call bannerAd.show.
5. Call bannerAd.onClose to listen to the closing of the banner ad.
6. Call bannerAd.destroy to destroy a banner ad. If you create a destroyed ad again, it is a totally new ad.

For more details, please refer to the demo.

Interstitial Ads

1. Call ad.getProvider to check whether Ads Kit is supported. If an empty character string is returned, the service is not available.
2. Use const interstitialAd=ad.createInterstitialAd to create an interstitial ad.
3. Call interstitialAd.load to load ad data.

   The interstitialAd.onLoad callback function is successfully executed, and interstitialAd.show is called to display ads.

   interstitialAd.onLoad(function (data) {
       console.log('onLoad data ' + JSON.stringify(data));
       interstitialAd.show();
   });

   The interstitialAd.onError callback is executed when unsuccessful.

   interstitialAd.onError((e)=>{
       console.log('interstitialAd onError '+ JSON.stringify(e))
   })

4. Call interstitialAd.onClick to listen to taps on interstitial ads.
5. Call interstitialAd.onClose to listen to the closing of interstitial ads. If an ad is closed, call interstitialAd.destroy to destroy this ad.

   interstitialAd.onClose(()=>{
       console.log('interstitialAd closed');
       interstitialAd.destroy();
   })

For more details, please refer to the demo.

Testing Ads and Releasing Your Quick App

You need to test ads prior to commercial release, and the ads must be accepted by Huawei.

Before the testing, ensure that:

1. You are using a Huawei device to debug your ads on a test ad unit.
2. Your test mobile phone has installed HMS Core (APK) 4.0.0.300 or later. You can download or update HMS Core (APK) on AppGallery.
3. The system time of your test mobile phone is the current time.
4. Make sure the Disable personalized ads function is disabled on your test mobile phone. To set the parameter, go to Settings > Security & privacy > More settings > Device identifier.

Perform self-check based on the following rules:

1. Do not set a timer to cyclically request ads.
2. Do not repeatedly request ads after a failure.

   [Incorrect] Request the ad again in onError after the failure. If onError is called back each time, the request-fail-request cycle starts.

   [Recommended] Do not send a request again regardless of whether the request is successful or fails. The service can have one more try only for rewarded ads.

3. An ad cannot be displayed repeatedly for one request. After being displayed, it will need to be reloaded in real time for the next request.

   [Incorrect] Display the same global ad on multiple pages.

   [Recommended] The ad object on each page is independent. You need to use the createXX method to create ads and register a callback.

4. For a pre-loaded ad, such as rewarded and interstitial ads, the interval between calling the load and show APIs cannot be too long. If the interval exceeds one hour, request the ad again. Otherwise, the ad display will not be counted as valid for settlement.
5. You are advised to pre-load the rewarded ad before calling the show API. If the loading fails, the ad entry is not displayed. Otherwise, the video data may not be completely loaded when users enter the ad entry, and they may view a blank screen.

   [Recommended] Add a delay of several seconds or minutes before calling the show API in the onLoad callback.

   注意

   The delay cannot exceed one hour. Otherwise, the ad is regarded as invalid and will not be charged.

6. Ads should not be placed on screens that are not content-based.
7. An ad must have a close button, especially for native ads with custom layout.
8. Ad assets must display without being compressed. Ads can only be resized proportionally, with aspect ratio unchanged.
9. Do not set the ad background, which is the area without ad assets, as a tappable area. Users should only be allowed to go to the landing page when they tap ad assets, including the images, title, and buttons.
10. Do not request or display ads using prohibited methods.
11. Each time a native ad is tapped, the reportAdClick API is called to report a click event.

    [Incorrect] When a native ad is tapped for multiple times, only one click event is reported.

12. Each time a native ad is displayed, an impression event needs to be reported.

    [Incorrect] Only one impression event is reported when the native ad is displayed for multiple times. For example, when an ad is displayed for the first time, the reportAdShow API is called to report the ad. When a user switches from another page to the ad page, the ad is still displayed, but no impression event is reported.

    [Recommended] When a user switches from another page to the ad page and the native ad is still displayed, the impression event needs to be reported again. Generally, this logic is processed in the page lifecycle function onShow.

13. When a user taps the native ad image, the reportAdClick API is called to jump to the landing page.
14. When the layout of a native ad is implemented, the ad title (title) and source (source) need to be displayed.
15. Rewarded and interstitial ads need to be pre-loaded. Other types of ads are loaded upon request success.

    [Incorrect] The native ad is requested but not displayed.

16. Ads can be requested and displayed only after user consent to the privacy statement is obtained.

After the test and Huawei acceptance have been completed, you can release your quick app.

Demo

Watch video

Requesting User Consent

<template>
  <stack class="container">
    <div class="item-container">
      <input type="button" class="btn" value="requestRewardedAd" onclick="showRewardedAd(allowAdNonPersonnal)" />
      <input type="button" class="btn" value="requestBannerAd" onclick="showBannerAd(allowAdNonPersonnal)" />
    </div>

    <div if="{{isShowConsent}}" class="modal">
      <div class="dialog">
        <text class="dialogContenttxt">{{ consent_title }}</text>
        <list show="{{!showmore}}">
          <list-item type="content1">
            <text class="dialogContenttxt">{{ consent_init_text1 }}</text>
          </list-item>
          <list-item type="content2">
            <text class="dialogContenttxt">
              {{ consent_init_text2 }}
              <a style="color: #0000ff;text-decoration: underline;" onclick="more">here</a>
            </text>
          </list-item>

          <list-item type="content3">
            <text class="dialogContenttxt">{{ consent_init_text3 }}</text>
          </list-item>
        </list>

        <list show="{{showmore}}">
          <list-item type="content1">
            <text class="dialogContenttxt">{{ consent_more_info_text1 }}</text>
          </list-item>

          <list-item type="content2" style="flex-direction: column;">
            <block for="{{adproviders}}">
              <a style="color: #0000ff;text-decoration: underline;" href="{{$item.privacyPolicyUrl}}" value="{{$item.name}}"></a>
            </block>

            <text class="dialogContenttxt">{{ consent_more_info_text2 }}</text>
          </list-item>
        </list>

        <!-- bottom buttons -->
        <div style="width: 100%; flex-direction: row;justify-content: center;margin-top: 26px;">
          <input type="button" value="SKIP" class="dlgbtn" show="{{!showmore}}" onclick="skip"></input>
          <input type="button" value="AGREE" class="dlgbtn" show="{{!showmore}}" onclick="agree">AGREE</input>
          <input type="button" value="Back" class="dlgbtn" onclick="backInitConsent" show="{{showmore}}"></input>
        </div>
      </div>
    </div>
  </stack>
</template>
<style>
  .container {
    flex-direction: column;
  }

  .modal {
    position: fixed;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: auto;
    background-color: rgba(48, 47, 47, 0.8);
    animation-name: Modal;
    animation-duration: 130ms;
    animation-timing-function: ease-in;
  }

  .dialogContenttxt {
    font-size: 31px;
    margin-top: 20px;
    color: #1b1515;
  }
  .dialog {
    flex-direction: column;
    width: 80%;
    height: 80%;
    background-color: #f8f8ff;
    align-items: center;
    justify-content: center;
    padding: 0 34px 34px;
    border-radius: 34px;
  }

  .dlgbtn {
    width: 100%;
    color: white;
    border-radius: 16px;
    height: 80px;
    margin-bottom: 20px;
    background-color: #00bfff;
    margin-left: 20px;
  }

  .item-container {
    margin-top: 50px;
    margin-right: 60px;
    margin-left: 60px;
    flex-direction: column;
    justify-content: center;
  }
  .btn {
    height: 80px;
    width: 80%;
    background-color: #00bfff;
    color: #ffffff;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .btn:active {
    background-color: #058fbd;
  }

  .btn1 {
    height: 80px;
    background-color: #dc143c;
    color: #ffffff;
    border-radius: 20px;
    position: fixed;
  }

  .btn1:active {
    background-color: #058fbd;
  }

  .adbtn {
    width: 100px;
    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;
  }

  .item-content {
    flex-direction: column;
    background-color: #ffffff;
    padding: 30px;
    margin-bottom: 100px;
    align-items: flex-start;
  }
  image {
    width: 100%;
  }
  .ad-video {
    object-fit: contain;
    width: 100%;
    height: 415px;
  }
</style>
<script>
  import ad from "@service.ad";
  import prompt from "@system.prompt";
  import storage from "@system.storage";
  let rewardedVideoAd;
  let bannerAd;
  export default {
    data: {
      consentflag: "consentflag",
      provider: "",
      allowAdNonPersonnal: 0,
      adproviders: [],
      showmore: false,
      isShowConsent: false,
      consent_title: "Consent Example of HUAWEI X",
      consent_init_text1: "The Ads in HUAWEI X are provided in collaboration with our advertising partners. To provide this service, we need to share certain information about you with these partners, including your city-level location as well as your usage records for the news service.",
      consent_init_text2: "For more information about our partners and how your data is processed, please touch ",
      consent_init_text3: `By touching AGREE, you indicate that you agree to share the above personal information with our partners so that they can provide you with personalized advertisements on behalf of their customers, based on interests and preferences identified or predicted through analysis of your personal information.\n\nYou can withdraw your consent at any time by going to [app settings].\n\nIf you touch SKIP, your data will not be shared with our partners and you will not receive personalized ads.`,

      consent_more_info_text1: "The Ads in HUAWEI X are provided in collaboration with our partners. You can find a full list of our partners for each country/region here:",

      consent_more_info_text2: `In order to provide you with personalized advertisements, we need to share the following information with our partners: \n\n
       	User information, including advertising ID, city of residence, country, and language.\n\n
       	Device information, including device name and model, operating system version, screen size, and network type.\n\n
       	Service usage information, including news ID and records of views, clicks, dislikes, shares, and comments for news content and advertisements.\n\n
    With your consent, the above information will be shared with our partners so that they can provide you with personalized advertisements on behalf of their customers, based on interests and preferences identified or predicted through analysis of your personal information.\n\n
    You can withdraw your consent at any time by going to app settings.\n\n
    Without your consent, no data will be shared with our partners and you will not receive personalized ads.`,

      rewarded: {
        adUnitId: "testx9dtjwj8hp",
        isShow: true,
        errStr: ""
      },
      bannerAD: {
        adUnitId: "testw6vs28auh3",
        adIntervals: 30,
        style: {
          left: 20,
          top: 1000,
          width: 360,
          height: 57
        }
      }
    },
    onInit() {
      this.$page.setTitleBar({ text: "Consent Ad Sample" });
    },

    onReady(options) {
      this.checkAdConsent();
    },

    getAdProvider: function () {
      this.provider = ad.getProvider();
      prompt.showToast({
        message: "getProvider : " + this.provider,
        duration: 2000,
        gravity: "center"
      });
    },
    hideAll() {
      this.native.isShow = false;
      this.native.isShowImg = false;
      this.native.isShowVideo = false;
      this.rewarded.isShow = false;
    },

    checkAdConsent: function () {
      console.info("checkAdConsent start");
      var that = this;
      this.getAdProvider();
      if (this.provider !== "huawei") {
        console.info("Petal Ads capabilities are not supported.");
        return;
      }
      // When a quick app is launched for the first time, check whether a pop-up needs to be displayed to obtain user consent.
      // true indicates that the user is under the age of consent, and personalized ads cannot be requested. In this case, callback will always fail when requestConsentUpdate is called, and a pop-up is not required.
      // When user consent is required, call ad.setUnderAgeOfPromise(false).
      ad.setUnderAgeOfPromise(false);
      ad.requestConsentUpdate({
        success: function (data) {
          console.log("requestConsentUpdate success data " + JSON.stringify(data));

          // Ensure that a dialog box is displayed each time you access the code demo. In normal cases, the code does not need to be added.
          that.checkShowConsentDialog(data);

          //   If isNeedConsent is set to false, personalized ads can be requested from the Petal Ads SDK.
          // If the value is true, the user is in the EEA or another sensitive region, and user consent must be obtained.
          if (data.isNeedConsent) {
            if (data.consentStatus === 2) {
              // Display a pop-up to obtain user consent and call ad.setConsentStatus to set user consent. If a pop-up has been displayed, you do not need to display it again.
              that.checkShowConsentDialog(data);
            } else {
              // Personalized ads can be requested.
              that.allowAdNonPersonnal = 0;
            }
          } else {
            // Personalized ads can be requested.
            that.allowAdNonPersonnal = 0;
          }
        },
        fail: function (data) {
          // Callback upon failure. Non-personalized ads can be requested.
          console.log("requestConsentUpdate fail data " + JSON.stringify(data));
          that.allowAdNonPersonnal = 1;
        },
        complete: function () { }
      });
    },

    showConsentDialog() {
      this.isShowConsent = true;
    },

    hideConsentDialog() {
      this.isShowConsent = false;
    },

    checkShowConsentDialog: function (data) {
      this.adproviders = data.AdProviderList;
      var that = this;
      storage.get({
        key: this.consentflag,
        success: function (data) {
          console.log("checkShowConsentDialog storage.get handling success data= " + data);
          if (data !== "") {
            that.allowAdNonPersonnal = data;
          } else {
            that.showConsentDialog();
          }
        },
        fail: function (data, code) {
          console.log("checkShowConsentDialog storage.get handling fail, code = " + code);
          that.showConsentDialog();
        }
      });
    },

    showRewardedAd(contentStatus) {
      this.getAdProvider();
      if (this.provider !== "huawei") {
        console.info("the device does not support ad.");
        return;
      }

      ad.setTagForUnderAgeOfPromise(1);
      ad.setNonPersonalizedAd(contentStatus);

      rewardedVideoAd = ad.createRewardedVideoAd({
        adUnitId: this.rewarded.adUnitId
      });

      rewardedVideoAd.onLoad(() => {
        this.rewarded.errStr = "";
      });
      rewardedVideoAd.onError(e => {
        console.error("load rewarded video ad error:" + JSON.stringify(e));
        this.rewarded.errStr = JSON.stringify(e);
      });
      rewardedVideoAd.onClose(() => {
        console.info("rewarded video ad onClose");
      });

      rewardedVideoAd.load();

      setTimeout(() => {
        rewardedVideoAd.show();
        this.rewarded.isShow = true;
      }, 1000);
    },

    showBannerAd: function (contentStatus) {
      this.getAdProvider();
      if (this.provider !== "huawei") {
        console.info("the device does not support ad.");
        return;
      }

      ad.setTagForUnderAgeOfPromise(1);
      ad.setNonPersonalizedAd(contentStatus);

      if(bannerAd){
         bannerAd.destroy();
       }
      bannerAd = ad.createBannerAd({
        adUnitId: this.bannerAD.adUnitId,
        style: this.bannerAD.style,
        adIntervals: this.bannerAD.adIntervals
      });
      bannerAd.onLoad(e => {
        console.info("load bannerAd  onload success");
        console.info("load bannerAd  onload success e=" + JSON.stringify(e));
        console.info("show bannerAd  style:" + JSON.stringify(bannerAd.style));
      });
      bannerAd.onError(e => {
        console.error("load bannerAd  onError " + JSON.stringify(e));
      });
      bannerAd.onClose(e => {
        console.info("load bannerAd  onClose");
      });
      console.info("create bannerAd  success:");
      bannerAd.show();
    },

    onDestroy() {
      rewardedVideoAd && rewardedVideoAd.destroy();
      bannerAd && bannerAd.destroy();
    },
    more: function () {
      this.showmore = true;
    },
    backInitConsent: function () {
      this.showmore = false;
    },

    agree: function () {
      // 0: The user has agreed to receive personalized and non-personalized ads.
      this.updateConsentStatus(0);
      this.hideConsentDialog();
    },
    skip: function () {
      // 2 (UNKNOWN): The user neither agrees nor declines to receive personalized or non-personalized ads.
      // 1 (NON_PERSONALIZED): The user has agreed to receive only non-personalized ads. If a user has not selected a consent option, only non-personalized ads can be requested.
      this.updateConsentStatus(1);
      this.hideConsentDialog();
    },

    saveContentStatus: function (consentStatus) {
      console.info("saveContentStatus consentStatus=" + consentStatus);
      storage.set({
        key: this.consentflag,
        value: consentStatus,
        success: function (data) {
          console.log("saveContentStatus handling success");
        },
        fail: function (data, code) {
          console.log("handling fail, code = " + code);
        }
      });
    },

    updateConsentStatus: function (consentStatus) {
      console.info("updateConsentStatus consentStatus=" + consentStatus);
      this.allowAdNonPersonnal = consentStatus;
      // Set user consent.
      ad.setConsentStatus(consentStatus);
      // Save user consent.
      this.saveContentStatus(consentStatus);
    }
  };
</script>

Native Ads

<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)
    },
    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>

Rewarded Ads

<template>
  <div class="item-container">
    <text class="alert">This is a rewarded ad demo.</text>
    <text class="alert">Score:{{score}}</text>

    <input type="button" class="btn" value="Play" onclick="play" />
    <input
      type="button"
      class="btn"
      value="Watch Video"
      onclick="rewardAdShow"
    />
  </div>
</template>
<style>
  .alert {
    font-size: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

   .item-container {
    margin-top: 50px;
    padding: 20px;
    flex-direction: column;
    align-items: center;
    align-content: center;
  }

  .btn {
    height: 80px;
    width: 60%;
    background-color: #00bfff;
    color: #ffffff;
    border-radius: 20px;
    margin-bottom: 20px;

  }
  .btn:active {
    background-color: #058fbd;
  }
</style>
<script>
  import ad from "@service.ad";
  import prompt from "@system.prompt";
  let rewardedVideoAd;
  export default {
    data: {
      provider: "",
      score: 0,
      rewarded: {
        adUnitId: "testx9dtjwj8hp",
        errStr: ""
      }
    },
    onInit() {
      this.$page.setTitleBar({ text: "Rewarded Ad" });
    },
    onReady(options) {
     this.loadRewardAd();
    },


    getAdProvider: function () {
      this.provider = ad.getProvider();
      prompt.showToast({
        message: "getProvider : " + this.provider,
        duration: 2000,
        gravity: "center"
      });
    },

    loadRewardAd() {
      this.getAdProvider();
      if (this.provider !== "huawei") {
        console.info("the device does not support ad.");
        return;
      }

      rewardedVideoAd = ad.createRewardedVideoAd({
        adUnitId: this.rewarded.adUnitId
      });

      rewardedVideoAd.onLoad(() => {
        this.rewarded.errStr = "";
        prompt.showToast({
          message: "onRewardedLoaded",
          duration: 2000,
          gravity: "center"
        });

      });
      rewardedVideoAd.onError(e => {
        console.error("load rewarded video ad error:" + JSON.stringify(e));
        this.rewarded.errStr = JSON.stringify(e);
      });
      rewardedVideoAd.onClose(res => {
        console.log("rewarded ad onClose is watch end: " + res.isEnded);
        if (res.isEnded) {
          prompt.showToast({
            message: "Watch video show finished , add 5 scores",
            duration: 2000,
            gravity: "center"
          });
          this.score += 5;
        }
        // rewardedVideoAd.offError(() => { console.log('offError'); })
        // rewardedVideoAd.offLoad(() => { console.log('offLoad'); })
        // rewardedVideoAd.destroy();
        // Pre-load the next ad.
      rewardedVideoAd.load();
      });

      rewardedVideoAd.load();
    },

    onDestroy() {
      rewardedVideoAd && rewardedVideoAd.destroy();
    },
    rewardAdShow: function () {
        rewardedVideoAd.show();
    },
    play: function () {
      if (this.score === 0) {
        prompt.showToast({
          message: "Watch video ad to add score",
          duration: 2000,
          gravity: "center"
        });
        return;
      }

      let randomNum=parseInt(Math.random(), 1);
      console.info("play randomNum= "+randomNum);
      if(randomNum===1){
           this.score+=1;
           prompt.showToast({
             message: 'you win!',
             duration: 2000,
             gravity: 'center'
           })
      }else{
         this.score-=2;
         if(this.score<0){
           this.score=0;
             prompt.showToast({
             message: 'you lose!',
             duration: 2000,
             gravity: 'center'
           })
         }

      }

    },

  };
</script>

Banner Ads

<template>
    <div class="container">
        <text class="alert">This is a banner ad demo.</text>
      <input
        type="button"
        class="btn"
        value="requestBannerAd"
        onclick="showBannerAd(allowAdNonPersonnal)"
      />
      <input
        type="button"
        class="btn"
        value="hide bannerAd"
        onclick="hideBanerAd"
      />

      <input
        type="button"
        class="btn"
        value="show banner Ad"
        onclick="showBanner"
      />
      </div>
</template>
<style>
  .container {
    flex-direction: column;
    /* background-color: #4682b4; */
    padding: 20px;
     align-items: center;
  }

  .alert {
    font-size: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .btn {
    height: 80px;
    background-color: #00bfff;
    color: #ffffff;
    border-radius: 20px;
    width: 80%;
    margin-bottom: 20px;
  }

    .btn:active {
    background-color: #058fbd;
  }

</style>
<script>
  import ad from "@service.ad";
  import prompt from '@system.prompt';
  let bannerAd;
  export default {
    data: {
      provider: "",
      bannerAD: {
        adUnitId: "x0kvs12iu6",
        adIntervals: 60,
        style: {
          left: 20,
          top: 1000,
          width: 360,
          height: 57
        }
      }
    },
    onInit() {
      this.$page.setTitleBar({ text: "Banner ad" });
    },

    getAdProvider: function () {
      this.provider = ad.getProvider();
      prompt.showToast({
        message: "getProvider : " + this.provider,
        duration: 2000,
        gravity: "center"
      });
    },

    showBannerAd: function () {
      this.getAdProvider();
      if (this.provider !== "huawei") {
        console.info("the device does not support ad.");
        return;
      }
       if(bannerAd){
         bannerAd.destroy();
       }
      bannerAd = ad.createBannerAd({
        adUnitId: this.bannerAD.adUnitId,
        style: this.bannerAD.style,
        adIntervals: this.bannerAD.adIntervals
      });
       console.info("the device does not support ad.annerAd.style="+JSON.stringify(bannerAd.style));
      bannerAd.onLoad(e => {
        console.info("load bannerAd  onload success");
        console.info("load bannerAd  onload success e=" + JSON.stringify(e));
        console.info("show bannerAd  style:" + JSON.stringify(bannerAd.style));
      });
      bannerAd.onError(e => {
        console.error("load bannerAd  onError " + JSON.stringify(e));
      });
      bannerAd.onClose(e => {
        console.info("load bannerAd  onClose");
      });
      console.info("create bannerAd  success:");
      bannerAd.show();
    },
    hideBanerAd: function () {
      if (bannerAd) {
        bannerAd.hide();
      }
    },

    onDestroy() {
      bannerAd && bannerAd.destroy();
    },

    showBanner: function () {
      if (bannerAd) {
        bannerAd.show();
      }
    }
  };
</script>

Interstitial Ads

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container">
    <text class="alert">This is an interstitial ad demo.</text>
    <input
      type="button"
      class="btn"
      value="request image interstitialAd"
      onclick="requestImageAdAndShow"
    />
    <input
      type="button"
      class="btn"
      value="request video interstitialAd"
      onclick="requestVideoAdAndShow"
    />
  </div>
</template>

<style>
  .container {
    flex-direction: column;
    padding: 20px;
    align-items: center;
  }
  .alert {
    font-size: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .btn {
    height: 80px;
    width: 80%;
    background-color: #00bfff;
    color: #ffffff;
    border-radius: 20px;
    margin-top: 20PX;
    margin-bottom: 20px;
  }

    .btn:active {
    background-color: #058fbd;
  }
</style>

<script>
  import ad from "@service.ad";
  let interstitialAd;
  module.exports = {
    data: {
      adDta: {
        videoAdId: "testb4znbuh3n2",
        imageAdId: "teste9ih9j0rc3"
      }
    },
    onInit() {
      this.$page.setTitleBar({
        text: "Interstitial Ad ",
        textColor: "#ffffff",
        backgroundColor: "#007DFF",
        backgroundOpacity: 0.5,
        menu: true
      });
    },

    onReady(options) {

     },

    onShow(options) { },

    onDestroy: function () {
      if (interstitialAd) {
        interstitialAd.destroy(() => {
          console.log(" onDestroy destroy");
        });
      }
    },

    requestImageAdAndShow: function () {
      let provider = ad.getProvider();
      console.info("requestImageAdAndShow provider= " + provider);
         if (provider !== "huawei") {
          console.info("the device does not support ad.");
        return;
      }
      if(interstitialAd){
        interstitialAd.destroy();
      }

      interstitialAd = ad.createInterstitialAd({
        adUnitId: this.adDta.imageAdId
      });

      console.info("requestImageAdAndShow interstitialAd= " + interstitialAd);
      interstitialAd.load();
      interstitialAd.onLoad(function (data) {
        console.log(
          "requestImageAdAndShow onLoad data= " + JSON.stringify(data)
        );
        interstitialAd.show();
      });

      interstitialAd.onError(err => {
        console.log(" requestImageAdAndShow on error = " + JSON.stringify(err));
      });
      interstitialAd.onClose(() => {
        console.log("requestImageAdAndShow interstitialAd closed");
        interstitialAd.destroy(() => {
          console.log("destroy");
        });
      });

      interstitialAd.onClick(() => {
        console.log("requestImageAdAndShow interstitialAd clicked");
      });
    },

    requestVideoAdAndShow: function () {
      let provider = ad.getProvider();
      console.info("requestVideoAdAndShow provider= " + provider);
      if (provider !== "huawei") {
          console.info("the device does not support ad.");
        return;
      }

      console.info("requestVideoAdAndShow this.videoAdId=" + this.videoAdId);

      interstitialAd = ad.createInterstitialAd({
        adUnitId: this.adDta.videoAdId
      });

      interstitialAd.load().then(
        data => {
          console.info(
            "requestVideoAdAndShow load success data=" + JSON.stringify(data)
          );
        },
        data => {
          console.info(
            "requestVideoAdAndShow load fail data=" + JSON.stringify(data)
          );
        }
      );

      interstitialAd.onLoad(function (data) {
        console.log(
          "requestVideoAdAndShow onLoad data= " + JSON.stringify(data)
        );
        interstitialAd.show();
      });

      interstitialAd.onError(err => {
        console.log(" requestVideoAdAndShow on error = " + JSON.stringify(err));
      });
      interstitialAd.onClose(() => {
        console.log("requestVideoAdAndShow interstitialAd closed");
        interstitialAd.destroy(() => {
          console.log("requestVideoAdAndShow destroy");
        });
      });
      interstitialAd.onClick(() => {
        console.log("requestVideoAdAndShow interstitialAd clicked");
      });
    }
  };
</script>

Links

FAQs

• What can I do if the callback function is not executed or returns result code 1004 during ad loading?
• How can I obtain SDK logs during testing?
• When the onDestroy method of a page is called in a quick app, is the ad destroyed?
• How do I obtain a test ad unit ID?
• Can I just display the requested ad data? Do I need to perform other operations, for example, report data?
• Ads in my app were accepted, I have replaced the test ad unit ID with a formal one, and my app version was also approved. However, there is still no ad displayed. What can I do?
• Where can I make settlements on Petal Publisher Center?
• I submitted my quick app containing an ad with a formal ad unit ID to AppGallery for review but my app was rejected because it contains an empty ad. What can I do?
• How do I distinguish the test environment from the online environment for a quick app?
• How do I obtain the certificate fingerprint when I request an ad and why does the quick app not contain the AndroidManifest.xml file?

Cases

• Displaying a Banner Ad in a Quick App at the Bottom of a Phone Screen
• Error code 1001 is returned when the show method is called to stimulate a rewarded ad
• Only the Last Ad Can Be Redirected to the Landing Page When a Page Contains Multiple Ads
• Ads Download Process Tasks Started at Different Times Have the Same Progress
• No Ad Identity for the Native Ad
• Null Is Returned After device.getOAID Is Called