华为HarmonyOS打造开放、合规的广告生态 - 开屏广告

青瓷看世界2024-11-06 13:03

场景介绍

开屏广告是一种在应用启动时且在应用主界面显示之前需要被展示的广告。您需要预先为App设计一张开屏默认的Slogan图片，确保在未获得到开屏广告之前展示默认的Slogan，提供良好的用户体验。

开屏广告分为全屏开屏广告、半屏开屏广告，其中全屏开屏广告展示形式为广告铺满整个页面；半屏开屏广告展示形式会根据媒体页面自定义布局渲染广告、icon和版权信息，一般情况下建议将icon和版权信息展示在广告下方。

接口说明

接口名 描述
loadAd(adParam: AdRequestParams, adOptions: AdOptions, listener: AdLoadListener): void 请求单广告位广告，通过AdRequestParams、AdOptions进行广告请求参数设置，通过AdLoadListener监听广告请求回调。
AdComponent(ads: advertising.Advertisement[], displayOptions: advertising.AdDisplayOptions, interactionListener: advertising.AdInteractionListener, @BuilderParam adRenderer?: () => void): void 展示广告，通过AdDisplayOptions进行广告展示参数设置，通过AdInteractionListener监听广告状态回调。

开发步骤

  1. 获取OAID。

    如果想要为用户更精准的推送广告，可以在请求参数AdRequestParams中添加oaid属性。

    如何获取OAID参见获取OAID信息。

    说明

    使用以下示例中提供的测试广告位必须先获取OAID信息。

  2. 请求单广告位广告。

    需要创建一个AdLoader对象，通过AdLoader的loadAd方法请求广告，最后通过AdLoadListener来监听广告的加载状态。测试开屏广告时，需要使用专门的测试广告位来获取测试开屏广告，示例代码中提供了两种开屏广告类型对应的广告位：半屏开屏（图片）（testq6zq98hecj）和全屏开屏（视频）（testd7c5cewoj6），测试广告位ID仅作为调试使用，不可用于广告变现。

    请求广告关键参数如下所示：

    请求广告参数名 类型 必填 说明
    adType number 是 请求广告类型，开屏广告类型为1。
    adId string 是 广告位ID。 * 如果仅调测广告，可使用测试广告位ID：testq6zq98hecj半屏开屏（图片）和testd7c5cewoj6全屏开屏（视频）。 * 如果要接入正式广告，则需要申请正式的广告位ID。可在应用发布前进入流量变现官网，点击"开始变现"，登录鲸鸿动能媒体服务平台进行申请，具体操作详情请参见展示位创建。
    adCount number 否 广告数量。
    返回广告参数名 类型 说明
    isFullScreen boolean 标识返回的广告是否为全屏，true为全屏广告，false为半屏广告。

    示例代码如下所示：

    说明

    请求广告之前需要展示默认的Slogan图片，在请求广告时，在onAdLoadSuccess回调中切换展示广告页面。如果超时没有请求到广告，应用自行跳到默认首页。

    复制代码
    1. import { router, Prompt } from '@kit.ArkUI';
    2. import { advertising, identifier } from '@kit.AdsKit';
    3. import { common } from '@kit.AbilityKit';
    4. import { hilog } from '@kit.PerformanceAnalysisKit';
    5. import { BusinessError } from '@kit.BasicServicesKit';
    7. @Entry
    8. @Component
    9. export struct Index {
    10. private context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
    11. private oaid: string = '';
    12. // 广告展示参数
    13. private adDisplayOptions: advertising.AdDisplayOptions = {
    14. // 是否静音，默认不静音
    15. mute: false
    16. }
    17. // 广告配置
    18. private adOptions: advertising.AdOptions = {
    19. // 是否允许流量下载0：不允许，1：允许，不设置以广告主设置为准
    20. allowMobileTraffic: 0,
    21. // 是否希望根据 COPPA 的规定将您的内容视为面向儿童的内容: -1默认值，不确定 0不希望 1希望
    22. tagForChildProtection: -1,
    23. // 是否希望按适合未达到法定承诺年龄的欧洲经济区 (EEA) 用户的方式处理该广告请求： -1默认值，不确定 0不希望 1希望
    24. tagForUnderAgeOfPromise: -1,
    25. // 设置广告内容分级上限: W: 3+,所有受众 PI: 7+,家长指导 J:12+,青少年 A: 16+/18+，成人受众
    26. adContentClassification: 'A'
    27. }
    28. // 开屏视频广告请求参数
    29. private splashVideoAdReqParams: advertising.AdRequestParams = {
    30. // 'testd7c5cewoj6'为测试专用的广告位ID，App正式发布时需要改为正式的广告位ID
    31. adId: 'testd7c5cewoj6',
    32. adType: AdType.SPLASH_AD,
    33. adCount: 1,
    34. oaid: this.oaid
    35. }
    36. // 开屏图片广告请求参数
    37. private splashImageAdReqParams: advertising.AdRequestParams = {
    38. // 'testq6zq98hecj'为测试专用的广告位ID，App正式发布时需要改为正式的广告位ID
    39. adId: 'testq6zq98hecj',
    40. adType: AdType.SPLASH_AD,
    41. adCount: 1,
    42. oaid: this.oaid
    43. }
    45. aboutToAppear() {
    46. hilog.info(0x0000, 'testTag', '%{public}s', 'Start to aboutToAppear');
    47. try {
    48. // 使用Promise回调方式获取OAID
    49. identifier.getOAID().then((data: string) => {
    50. this.oaid = data;
    51. hilog.info(0x0000, 'testTag', '%{public}s', 'Succeeded in getting adsIdentifierInfo by promise');
    52. }).catch((error: BusinessError) => {
    53. hilog.error(0x0000, 'testTag', '%{public}s',
    54. `Failed to get adsIdentifierInfo, code: ${error.code}, message: ${error.message}`);
    55. })
    56. } catch (error) {
    57. hilog.error(0x0000, 'testTag', '%{public}s', `Catch err, code: ${error.code}, message: ${error.message}`);
    58. }
    59. }
    61. build() {
    62. Column() {
    63. Column() {
    64. // 跳转到开屏全屏视频广告展示页面
    65. CustomButton({
    66. mText: 'splash full screen request', mOnClick: () => {
    67. this.requestAd(this.splashVideoAdReqParams, this.adOptions);
    68. }
    69. });
    71. // 跳转到开屏半屏图片广告展示页面
    72. CustomButton({
    73. mText: 'splash half screen request', mOnClick: () => {
    74. this.requestAd(this.splashImageAdReqParams, this.adOptions);
    75. }
    76. });
    77. }.width('100%').height('80%').justifyContent(FlexAlign.Center)
    78. }
    79. .width('100%')
    80. .height('100%')
    81. }
    83. private requestAd(adReqParams: advertising.AdRequestParams, adOptions: advertising.AdOptions): void {
    84. // 广告请求回调监听
    85. const adLoaderListener: advertising.AdLoadListener = {
    86. // 广告请求失败回调
    87. onAdLoadFailure: (errorCode: number, errorMsg: string) => {
    88. hilog.error(0x0000, 'testTag', '%{public}s',
    89. `Failed to request ad. errorCode is: ${errorCode}, errorMsg is: ${errorMsg}`);
    90. Prompt.showToast({
    91. message: `Failed to request ad, code is: ${errorCode} , errorMsg is: ${errorMsg}`,
    92. duration: 1000
    93. });
    94. },
    95. // 广告请求成功回调
    96. onAdLoadSuccess: (ads: Array<advertising.Advertisement>) => {
    97. hilog.info(0x0000, 'testTag', '%{public}s', 'Succeeded in requesting ad!');
    98. // 保存请求到的广告内容用于展示
    99. hilog.info(0x0000, 'testTag', '%{public}s', `ads[0].adType is : ${ads[0].adType}`);
    100. if (canIUse("SystemCapability.Advertising.Ads")) {
    101. if (ads[0].adType === AdType.SPLASH_AD) {
    102. // 调用开屏广告展示页面
    103. if (ads[0]?.isFullScreen === true) {
    104. routePage('pages/SplashFullScreenAdPage', ads, this.adDisplayOptions);
    105. } else {
    106. routePage('pages/SplashHalfScreenAdPage', ads, this.adDisplayOptions);
    107. }
    108. } else {
    109. hilog.error(0x0000, 'testTag', '%{public}s', 'Error adType');
    110. }
    111. }
    112. }
    113. };
    114. // 创建AdLoader广告对象
    115. const load: advertising.AdLoader = new advertising.AdLoader(this.context);
    116. // 调用广告请求接口
    117. hilog.info(0x0000, 'testTag', '%{public}s', 'Request ad!');
    118. adReqParams.oaid = this.oaid;
    119. load.loadAd(adReqParams, adOptions, adLoaderListener);
    120. }
    121. }
    123. async function routePage(pageUri: string, ads: Array<advertising.Advertisement | null>,
    124. displayOptions: advertising.AdDisplayOptions) {
    125. let options: router.RouterOptions = {
    126. url: pageUri,
    127. params: {
    128. ads: ads,
    129. displayOptions: displayOptions
    130. }
    131. }
    132. try {
    133. hilog.info(0x0000, 'testTag', '%{public}s', `RoutePage: ${pageUri}`);
    134. router.pushUrl(options);
    135. } catch (error) {
    136. hilog.error(0x0000, 'testTag', '%{public}s',
    137. `Failed to routePage callback, code: ${error.code}, msg: ${error.message}`);
    138. }
    139. }
    141. export enum AdType {
    142. // 开屏广告的类型
    143. SPLASH_AD = 1
    144. }
    146. @Component
    147. export struct CustomButton {
    148. private mText: string | Resource = '';
    149. private mHeight: number = 40;
    150. private mOnClick: (event?: ClickEvent) => void = (): void => {
    151. };
    153. build() {
    154. Column() {
    155. Button(this.mText)
    156. .backgroundColor('#d3d4d6')
    157. .fontSize(20)
    158. .fontColor('#000')
    159. .fontWeight(FontWeight.Normal)
    160. .align(Alignment.Center)
    161. .type(ButtonType.Capsule)
    162. .width('90%')
    163. .height(this.mHeight)
    164. .margin({ top: 10, bottom: 5 })
    165. .onClick(this.mOnClick);
    166. }
    167. }
    168. }

  3. 展示广告。

    说明

    1、由在步骤2请求广告中获取的isFullScreen参数判断展示全屏或者半屏广告，同时媒体可在AdComponent中绘制自身的半屏部分，可参考展示半屏代码。

    2、在枚举的AdStatus状态中，媒体可根据各种状态来进行下一步操作，如在AD_CLOSED时展示首页。

    3、目前只支持展示竖屏广告。

    在您的页面中使用AdComponent组件展示开屏广告。示例代码如下所示：

    您需要在entry/src/main/resources/base/profile/main_pages.json文件中添加页面，如下图所示。

    展示半屏广告：

    复制代码
    1. import { Prompt, router } from '@kit.ArkUI';
    2. import { advertising, AdComponent } from '@kit.AdsKit';
    3. import { hilog } from '@kit.PerformanceAnalysisKit';
    5. @Entry
    6. @Component
    7. export struct SplashHalfScreenAdPage {
    8. private ads: Array<advertising.Advertisement> = [];
    9. private displayOptions?: advertising.AdDisplayOptions;
    11. aboutToAppear() {
    12. hilog.info(0x0000, 'testTag', '%{public}s', 'Start to splashHalfScreenAdPage aboutToAppear');
    13. const params: Record<string, Object> = router.getParams() as Record<string, Object>;
    14. if (params && params.ads as Array<advertising.Advertisement> &&
    15. params.displayOptions as advertising.AdDisplayOptions) {
    16. this.ads = params.ads as Array<advertising.Advertisement>;
    17. this.displayOptions = params.displayOptions as advertising.AdDisplayOptions;
    18. } else {
    19. hilog.info(0x0000, 'testTag', '%{public}s', 'Router params are empty');
    20. }
    21. }
    23. build() {
    24. Column() {
    25. // 运行在提供方进程里
    26. AdComponent({
    27. ads: this.ads, displayOptions: this.displayOptions,
    28. interactionListener: {
    29. onStatusChanged: (status: string, ad: advertising.Advertisement, data: string) => {
    30. switch (status) {
    31. case AdStatus.AD_OPEN:
    32. hilog.info(0x0000, 'testTag', '%{public}s', 'Status is onAdOpen');
    33. Prompt.showToast({
    34. message: 'splash ad open',
    35. duration: 1000
    36. });
    37. break;
    38. case AdStatus.AD_CLICKED:
    39. hilog.info(0x0000, 'testTag', '%{public}s', 'Status is onAdClick');
    40. Prompt.showToast({
    41. message: 'splash ad click',
    42. duration: 1000
    43. });
    44. break;
    45. case AdStatus.AD_CLOSED:
    46. hilog.info(0x0000, 'testTag', '%{public}s', 'Status is onAdClose');
    47. Prompt.showToast({
    48. message: 'splash ad close',
    49. duration: 1000
    50. });
    51. router.replaceUrl({
    52. url: 'pages/Index',
    53. })
    54. break;
    55. }
    56. }
    57. }
    58. })
    59. .width('100%')
    60. .height('87%')
    62. // 展示媒体自定义icon、应用名称、版权信息
    63. Column({}) {
    64. Row() {
    65. Image($r('app.media.video')).width(24).height(24).margin({ right: 8 })
    66. Text($r('app.string.video')).fontColor('#1A1A1A').fontSize(16).width(32).height(21)
    67. }.margin({ bottom: 8 })
    69. Column() {
    70. Text($r('app.string.copyright')).fontColor('#1A1A1A').fontSize(9).height(15)
    71. }
    72. }.width('100%').height('100%')
    73. }
    74. }
    75. }
    77. export enum AdStatus {
    78. AD_OPEN = 'onAdOpen',
    79. AD_CLICKED = 'onAdClick',
    80. AD_CLOSED = 'onAdClose'
    81. }

    展示全屏广告：

    复制代码
    1. import { Prompt, router } from '@kit.ArkUI';
    2. import { advertising, AdComponent } from '@kit.AdsKit';
    3. import { hilog } from '@kit.PerformanceAnalysisKit';
    5. const TAG = 'Ads Demo-SplashFullScreenAdPage';
    7. @Entry
    8. @Component
    9. export struct SplashFullScreenAdPage {
    10. private ads: Array<advertising.Advertisement> = [];
    11. private displayOptions?: advertising.AdDisplayOptions;
    13. aboutToAppear() {
    14. hilog.info(0x0000, 'testTag', '%{public}s', 'Start to splashFullScreenAdPage aboutToAppear');
    15. const params: Record<string, Object> = router.getParams() as Record<string, Object>;
    16. if (params && params.ads as Array<advertising.Advertisement> &&
    17. params.displayOptions as advertising.AdDisplayOptions) {
    18. this.ads = params.ads as Array<advertising.Advertisement>;
    19. this.displayOptions = params.displayOptions as advertising.AdDisplayOptions;
    20. } else {
    21. hilog.info(0x0000, 'testTag', '%{public}s', 'Router params are empty');
    22. }
    23. }
    25. build() {
    26. Column() {
    27. // 运行在提供方进程里
    28. AdComponent({
    29. ads: this.ads, displayOptions: this.displayOptions,
    30. interactionListener: {
    31. onStatusChanged: (status: string, ad: advertising.Advertisement, data: string) => {
    32. switch (status) {
    33. case AdStatus.AD_OPEN:
    34. hilog.info(0x0000, 'testTag', '%{public}s', 'Status is onAdOpen');
    35. Prompt.showToast({
    36. message: 'splash ad open',
    37. duration: 1000
    38. });
    39. break;
    40. case AdStatus.AD_CLICKED:
    41. hilog.info(0x0000, 'testTag', '%{public}s', 'Status is onAdClick');
    42. Prompt.showToast({
    43. message: 'splash ad click',
    44. duration: 1000
    45. });
    46. break;
    47. case AdStatus.AD_CLOSED:
    48. hilog.info(0x0000, 'testTag', '%{public}s', 'Status is onAdClose');
    49. Prompt.showToast({
    50. message: 'splash ad close',
    51. duration: 1000
    52. });
    53. router.replaceUrl({
    54. url: 'pages/Index',
    55. })
    56. break;
    57. }
    58. }
    59. }
    60. })
    61. .width('100%')
    62. .height('100%')
    64. }.width('100%').height('100%')
    65. }
    66. }
    68. export enum AdStatus {
    69. AD_OPEN = 'onAdOpen',
    70. AD_CLICKED = 'onAdClick',
    71. AD_CLOSED = 'onAdClose'
    72. }
相关推荐
HarmonyOS_SDK19 分钟前
【FAQ】HarmonyOS SDK 闭源开放能力 —Vision Kit
harmonyos
Forever_Hopeful2 小时前
华为 HarmonyOS NEXT 原生应用开发: 动画的基础使用（属性、显示、专场）动画
华为·harmonyos
青瓷看世界5 小时前
华为HarmonyOS借助AR引擎帮助应用实现虚拟与现实交互的能力3-获取设备位姿
华为·ar·harmonyos·虚拟现实
青瓷看世界7 小时前
华为HarmonyOS借助AR引擎帮助应用实现虚拟与现实交互的能力4-检测环境中的平面
平面·ar·harmonyos·虚拟现实
SoraLuna7 小时前
「Mac畅玩鸿蒙与硬件27」UI互动应用篇4 - 猫与灯的互动应用
macos·ui·harmonyos
SoraLuna8 小时前
「Mac畅玩鸿蒙与硬件29」UI互动应用篇6 - 多选问卷小应用
macos·ui·harmonyos
青瓷看世界13 小时前
华为HarmonyOS打造开放、合规的广告生态 - 原生广告
华为·harmonyos·广告投放
lqj_本人17 小时前
Flutter&鸿蒙next中封装一个列表组件
flutter·华为·harmonyos
热门推荐
01Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04制冷毛细管的计算方法介绍05(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明06【经验分享】Ubuntu22.04安装微信(linux官方版)07支付宝短视频平台创作分成激励项目08【Java】Ruoyi-Vue-Plus 整合 文件分片上传至 minio、阿里云、七牛云等OSS-【后端篇】09RAG 实践- Ollama+RagFlow 部署本地知识库10AI 绘画Stable Diffusion 研究（十四）SD 图生图+剪映制作人物说话视频