HarmonyOS 鸿蒙Next中应用闪屏页如何实现广告接入？

场景介绍

闪屏页广告接入是各类应用中的高频使用场景之一，如用户打开应用时加载广告界面。

本示例在应用启动闪屏页接入广告，支持点击广告跳转第三方应用，或点击"跳过"进入应用主页面。

效果预览

实现思路

1. 应用启动，在闪屏页aboutToAppear生命周期函数中调用loadAd加载广告。

aboutToAppear() {
  window.getLastWindow(this.context, (err: BusinessError, win: window.Window) => {
    // 开启全屏模式沉浸页面
    win.setWindowLayoutFullScreen(true);
    // 设置屏幕方向为竖屏
    win.setPreferredOrientation(window.Orientation.PORTRAIT);
  });
  // 调用loadAd加载广告
  let isFullScreen = PreferencesUtil.getSync('isFullScreen', false) as boolean;
  let adId = isFullScreen ? VIDEO_TEST_AD_ID : IMAGE_TEST_AD_ID;
  this.loadAd(adId)
}

1. 广告加载成功后，闪屏页展示广告内容。

AdComponent({
  ads: [this.ad!],
  displayOptions: this.adDisplayOptions,
  interactionListener: {
    onStatusChanged: (status: string, ad: advertising.Advertisement, data: string) => {
      switch (status) {
        case AdStatus.AD_OPEN:
          break;
        case AdStatus.AD_CLICKED:
          break;
        case AdStatus.AD_CLOSED:
          RouterManager.routeToHome();
          break;
      }
    }
  }
})

完整代码：

代码地址：链接

import { common } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { window } from '@kit.ArkUI';
import { advertising } from '@kit.AdsKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { RouterManager } from '../router/RouterManager';
import { AdView } from '../view/AdView';
import { PreferencesUtil } from '../utils/PreferencesUtil';

// 'testd7c5cewoj6'、'testq6zq98hecj'为测试专用的广告位ID，App正式发布时需要改为正式的广告位ID
const VIDEO_TEST_AD_ID = 'testd7c5cewoj6';
const IMAGE_TEST_AD_ID = 'testq6zq98hecj';

@Entry
@Component
struct Index {
  @State ad: advertising.Advertisement | undefined = undefined;
  private uiContext: UIContext = this.getUIContext();
  private context: common.UIAbilityContext = this.uiContext.getHostContext() as common.UIAbilityContext;
  // 是否超时
  private isTimeOut: boolean = false;
  // 超时时间(单位毫秒)，开发者可根据实际情况修改
  private timeOutDuration: number = 2000;
  // 超时index
  private timeOutIndex: number = -1;

  aboutToAppear() {
    window.getLastWindow(this.context, (err: BusinessError, win: window.Window) => {
      // 开启全屏模式沉浸页面
      win.setWindowLayoutFullScreen(true);
      // 设置屏幕方向为竖屏
      win.setPreferredOrientation(window.Orientation.PORTRAIT);
    });
    // 调用loadAd加载广告
    let isFullScreen = PreferencesUtil.getSync('isFullScreen', false) as boolean;
    let adId = isFullScreen ? VIDEO_TEST_AD_ID : IMAGE_TEST_AD_ID;
    this.loadAd(adId);
  }

  aboutToDisappear(): void {
    window.getLastWindow(this.context, (err: BusinessError, win: window.Window) => {
      // 关闭全屏模式，开发者可根据实际情况修改
      win.setWindowLayoutFullScreen(false);
      // 设置屏幕方向为默认值，开发者可根据实际情况修改
      win.setPreferredOrientation(window.Orientation.UNSPECIFIED);
    });
  }

  build() {
    RelativeContainer() {
      // Slogan 图片
      Image($r('app.media.slogan'))
        .width('100%')
        .height('90%');
      // 展示媒体自定义icon、应用名称、版权信息
      Column() {
        Row() {
          Image($r('app.media.startIcon'))
            .width(20)
            .height(20)
            .margin(8);
          Text($r('app.string.app_name'))
            .fontColor('#1A1A1A')
            .fontSize(16);
        };
      }
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .alignRules({ bottom: { anchor: '__container__', align: VerticalAlign.Bottom } })
      .width('100%')
      .height('10%');

      AdView({ ad: this.ad });
    }
    .width('100%')
    .height('100%');
  }

  // 请求广告
  private async loadAd(adId: string): Promise<void> {
    // 广告请求参数
    const adRequestParams: advertising.AdRequestParams = {
      // 广告位ID
      adId: adId,
      // 开屏广告类型
      adType: 1,
      // 请求的广告数量
      adCount: 1,
      // 开放匿名设备标识符
      oaid: ''
    };
    // 广告配置参数
    const adOptions: advertising.AdOptions = {
      // 是否允许流量下载 0：不允许，1：允许，不设置以广告主设置为准
      allowMobileTraffic: 1,
      // 是否希望根据 COPPA 的规定将您的内容视为面向儿童的内容: -1: 默认值，不确定 0: 不希望 1: 希望
      tagForChildProtection: -1,
      // 是否希望按适合未达到法定承诺年龄的欧洲经济区 (EEA) 用户的方式处理该广告请求 -1: 默认值，不确定 0: 不希望 1: 希望
      tagForUnderAgeOfPromise: -1,
      // 设置广告内容分级上限 W: 3+,所有受众 PI: 7+,家长指导 J: 12+,青少年 A: 16+/18+,成人受众
      adContentClassification: 'A'
    };
    // 广告请求回调监听
    const adLoadListener: advertising.AdLoadListener = {
      // 广告请求失败回调
      onAdLoadFailure: (errorCode: number, errorMsg: string) => {
        hilog.error(0x0000, 'testTag', `Failed to load ad. Code is ${errorCode}, message is ${errorMsg}`);
      },
      // 广告请求成功回调
      onAdLoadSuccess: (ads: Array<advertising.Advertisement>) => {
        clearTimeout(this.timeOutIndex);
        if (this.isTimeOut) {
          return;
        }
        hilog.info(0x0000, 'testTag', 'Succeeded in loading ad');
        this.ad = ads[0];
      }
    };
    // 创建AdLoader广告对象
    const adLoader: advertising.AdLoader = new advertising.AdLoader(this.context);
    this.timeOutHandler();
    // 调用广告请求接口
    adLoader.loadAd(adRequestParams, adOptions, adLoadListener);
  }

  private timeOutHandler(): void {
    this.isTimeOut = false;
    // 超时处理
    this.timeOutIndex = setTimeout(() => {
      this.isTimeOut = true;
      RouterManager.routeToHome(this.uiContext);
      hilog.error(0x0000, 'testTag', 'Load ad time out');
    }, this.timeOutDuration);
  }
}