鸿蒙NEXT开发之开屏广告实现

发布于：2025-03-20 ⋅ 阅读:(19) ⋅ 点赞:(0)

1. 广告请求服务的实现

首先，你需要创建一个广告请求服务来处理广告的加载和展示。你已经在代码中实现了 requestAd 函数，接下来需要处理广告加载、显示、点击等事件。可以考虑以下结构：

1.1 创建广告加载函数

import { advertising, identifier } from '@kit.AdsKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';

// 请求广告的方法
function requestAd(context: common.Context, callback: (ads: Array<advertising.Advertisement>) => void): void {
  const adRequestParam: advertising.AdRequestParams = {
    adType: 1, // 广告类型
    adId: 'testq6zq98hecj' // 测试广告位ID
  };
  
  const adOptions: advertising.AdOptions = {
    allowMobileTraffic: 0,
    tagForChildProtection: -1,
    tagForUnderAgeOfPromise: -1,
    adContentClassification: 'A'
  };

  const adLoaderListener: advertising.AdLoadListener = {
    onAdLoadFailure: (errorCode: number, errorMsg: string) => {
      hilog.error(0x0000, 'testTag', '%{public}s', `Request ad failed! ErrorCode: ${errorCode}, ErrorMsg: ${errorMsg}`);
    },
    onAdLoadSuccess: (ads: Array<advertising.Advertisement>) => {
      hilog.info(0x0000, 'testTag', '%{public}s', 'Request ad success!');
      callback(ads); // 返回广告数据给调用方
    }
  };

  const load: advertising.AdLoader = new advertising.AdLoader(context);
  load.loadAd(adRequestParam, adOptions, adLoaderListener);
}

1.2 解释说明

  • adRequestParam：广告请求参数，包括广告类型和广告位 ID。
  • adOptions：广告的附加配置项，比如流量使用、广告内容分类等。
  • adLoaderListener：广告加载监听器，用来处理广告请求成功与失败的回调。
    • onAdLoadFailure：请求失败时的处理，记录错误日志。
    • onAdLoadSuccess：请求成功时的处理，执行回调返回广告数据。

1.3 使用广告加载函数

你可以在 aboutToAppear 或其他合适的生命周期函数中调用 requestAd 函数，获取广告数据并传递给广告组件进行显示。

@Entry
@Component
struct Start {
  private ads: Array<advertising.Advertisement> = [];
  private displayOptions?: advertising.AdDisplayOptions;

  aboutToAppear(): void {
    // 获取广告数据
    requestAd(getContext(), (ads: Array<advertising.Advertisement>) => {
      this.ads = ads;  // 将广告数据赋值给组件
      // 创建广告显示选项，定制广告展示的行为
      this.displayOptions = {
        // 可设置显示方式等
      };
    });
  }

  build() {
    Column() {
      // 确保广告已加载再显示广告组件
      if (this.ads.length > 0) {
        AdComponent({
          ads: this.ads,  // 传递广告数据
          displayOptions: this.displayOptions,
          interactionListener: {
            onStatusChanged: (status: string, ad: advertising.Advertisement, data: string) => {
              switch (status) {
                case AdStatus.AD_OPEN:
                  hilog.info(0x0000, 'testTag', '%{public}s', '广告打开');
                  break;
                case AdStatus.AD_CLICKED:
                  hilog.info(0x0000, 'testTag', '%{public}s', '广告点击');
                  break;
                case AdStatus.AD_CLOSED:
                  hilog.info(0x0000, 'testTag', '%{public}s', '广告关闭');
                  break;
              }
            }
          }
        })
        .width('100%')
        .height('100%');
      }
    }
  }
}

1.4 解释说明

  • requestAd(getContext(), ...)：调用广告请求函数，获取广告数据并处理成功或失败回调。
  • AdComponent：用于展示广告的组件，传入广告数据和显示选项。
  • interactionListener：用于监听广告状态变化（打开、点击、关闭等），可以添加一些业务逻辑，比如广告点击后的跳转。

2. 广告错误处理和重试机制

在广告加载过程中，可能会发生一些网络错误或广告服务错误。在这种情况下，添加错误处理和重试机制是很重要的。

2.1 添加错误处理

在 onAdLoadFailure 回调中，可以根据错误代码做更细致的处理，比如网络错误时进行重试：

onAdLoadFailure: (errorCode: number, errorMsg: string) => {
  hilog.error(0x0000, 'testTag', '%{public}s', `Request ad failed! ErrorCode: ${errorCode}, ErrorMsg: ${errorMsg}`);
  
  // 根据错误码进行处理
  if (errorCode === 21800001) {
    hilog.error(0x0000, 'testTag', '%{public}s', '广告请求失败，可能是网络问题，进行重试');
    // 可以在这里实现广告加载的重试逻辑
  }
}

2.2 重试机制

可以设置一个简单的重试机制，尝试多次加载广告，直到成功为止：

function requestAdWithRetry(context: common.Context, callback: (ads: Array<advertising.Advertisement>) => void, retries: number = 3): void {
  const tryRequest = (retriesLeft: number) => {
    requestAd(context, (ads: Array<advertising.Advertisement>) => {
      callback(ads);
    });
    
    if (retriesLeft > 0) {
      setTimeout(() => {
        tryRequest(retriesLeft - 1);
      }, 2000);  // 延迟2秒后重试
    } else {
      hilog.error(0x0000, 'testTag', '%{public}s', '广告加载失败，重试已达到最大次数');
    }
  };
  
  tryRequest(retries);
}

2.3 解释说明

  • requestAdWithRetry：这是一个带重试机制的广告请求函数。它会尝试加载广告，直到成功或达到最大重试次数。
  • setTimeout：延迟2秒后再重试一次广告加载。

3. 广告展示组件

广告展示组件是用于将加载的广告显示到界面上的。你可以使用 AdComponent 来展示广告，并通过 interactionListener 来监听广告的状态变化（打开、点击、关闭等）。

AdComponent({
  ads: this.ads,
  displayOptions: this.displayOptions,
  interactionListener: {
    onStatusChanged: (status: string, ad: advertising.Advertisement, data: string) => {
      switch (status) {
        case AdStatus.AD_OPEN:
          hilog.info(0x0000, 'testTag', '%{public}s', '广告打开');
          break;
        case AdStatus.AD_CLICKED:
          hilog.info(0x0000, 'testTag', '%{public}s', '广告点击');
          break;
        case AdStatus.AD_CLOSED:
          hilog.info(0x0000, 'testTag', '%{public}s', '广告关闭');
          break;
      }
    }
  }
})
.width('100%')
.height('100%');

华为开屏广告集成笔记

1. 开屏广告概述

开屏广告是一种在应用启动时且在应用主界面显示之前展示的广告。它分为以下两种类型：

  • 全屏开屏广告：广告覆盖整个屏幕。
  • 半屏开屏广告：广告占据部分屏幕，并可自定义布局，通常会显示广告的图标和版权信息。
2. 开发步骤

开屏广告的集成分为以下几个主要步骤：

2.1 获取OAID
  • OAID（Open Advertising ID）是设备的唯一广告标识符，用于精准推送广告。建议在请求广告时传递 OAID 以提升广告投放的精准度。
  • 获取 OAID 示例代码：
identifier.getOAID().then((data: string) => {
  this.oaid = data;
}).catch((error: BusinessError) => {
  hilog.error(0x0000, 'testTag', 'Failed to get OAID');
});
2.2 请求广告
  • 创建一个 AdLoader 对象来请求广告，并通过 AdRequestParams 设置广告请求参数。
  • 广告请求接口如下：
loadAd(adParam: AdRequestParams, adOptions: AdOptions, listener: AdLoadListener): void
2.3 设置广告请求参数
  • adType：广告类型（开屏广告类型为 1）。
  • adId：广告位ID。测试阶段使用提供的测试广告位ID（例如：testq6zq98hecj 半屏图片广告）。
  • adCount：广告数量。

示例：

private splashVideoAdReqParams: advertising.AdRequestParams = {
  adId: 'testd7c5cewoj6',  // 测试广告位ID
  adType: AdType.SPLASH_AD,
  adCount: 1,
  oaid: this.oaid
};
2.4 加载广告并监听回调

  • 通过 AdLoadListener 监听广告加载的回调：

    • onAdLoadFailure：广告加载失败。
    • onAdLoadSuccess：广告加载成功。

示例：

const adLoaderListener: advertising.AdLoadListener = {
  onAdLoadFailure: (errorCode: number, errorMsg: string) => {
    hilog.error(0x0000, 'testTag', `Failed to load ad. errorCode: ${errorCode}, errorMsg: ${errorMsg}`);
  },
  onAdLoadSuccess: (ads: Array<advertising.Advertisement>) => {
    hilog.info(0x0000, 'testTag', 'Ad loaded successfully!');
    // 展示广告
  }
};
2.5 设置广告展示
  • AdComponent 组件用于展示广告，配置广告展示参数并监听广告交互状态。

示例：

AdComponent({
  ads: this.ads,
  displayOptions: this.displayOptions,
  interactionListener: {
    onStatusChanged: (status: string, ad: advertising.Advertisement, data: string) => {
      switch (status) {
        case AdStatus.AD_OPEN:
          hilog.info(0x0000, 'testTag', 'Ad opened');
          break;
        case AdStatus.AD_CLICKED:
          hilog.info(0x0000, 'testTag', 'Ad clicked');
          break;
        case AdStatus.AD_CLOSED:
          hilog.info(0x0000, 'testTag', 'Ad closed');
          break;
      }
    }
  }
});
3. 广告展示页面
  • 全屏广告展示页面
@Component
export struct SplashFullScreenAdPage {
  private ads: Array<advertising.Advertisement> = [];
  private displayOptions?: advertising.AdDisplayOptions;

  aboutToAppear() {
    const params: Record<string, Object> = router.getParams() as Record<string, Object>;
    if (params && params.ads as Array<advertising.Advertisement>) {
      this.ads = params.ads as Array<advertising.Advertisement>;
    }
  }

  build() {
    Column() {
      AdComponent({
        ads: this.ads,
        displayOptions: this.displayOptions,
        interactionListener: { ... }
      })
      .width('100%')
      .height('100%');
    }
  }
}
  • 半屏广告展示页面
@Component
export struct SplashHalfScreenAdPage {
  private ads: Array<advertising.Advertisement> = [];
  private displayOptions?: advertising.AdDisplayOptions;

  aboutToAppear() {
    const params: Record<string, Object> = router.getParams() as Record<string, Object>;
    if (params && params.ads as Array<advertising.Advertisement>) {
      this.ads = params.ads as Array<advertising.Advertisement>;
    }
  }

  build() {
    Column() {
      AdComponent({
        ads: this.ads,
        displayOptions: this.displayOptions,
        interactionListener: { ... }
      })
      .width('100%')
      .height('87%');
    }
  }
}
4. 超时处理
  • 在请求广告时设置超时，如果超过一定时间未加载广告，则跳转到默认首页。

示例：

private timeOutHandler(): void {
  this.isTimeOut = false;
  this.timeOutIndex = setTimeout(() => {
    this.isTimeOut = true;
    router.pushUrl({
      url: 'pages/Index',  // 超时后跳转的页面
    });
    hilog.error(0x0000, 'testTag', 'Ad load timeout');
  }, this.timeOutDuration);
}
5. 总结
  • 请求开屏广告时，必须提供广告位 ID、广告类型和 OAID。
  • 通过 AdLoader 请求广告，并通过 AdLoadListener 监听广告加载回调。
  • 通过 AdComponent 展示广告，并根据广告状态进行交互操作（如打开、点击、关闭）。
  • 开屏广告的展示类型（全屏或半屏）可通过广告返回的 isFullScreen 属性判断。
  • 在请求广告时，要处理超时情况，防止应用在等待广告时卡死。

4. 总结

  • 广告请求：通过 AdLoader 请求广告并处理回调。
  • 广告显示：使用 AdComponent 组件展示广告数据，并通过 interactionListener 监听广告状态。
  • 错误处理与重试机制：在广告加载失败时添加错误处理，并实现重试机制以增强稳定性。

这样，就能实现一个完整的广告服务，包括广告的请求、加载、展示、状态监听和错误处理。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布