HarmonyOS鸿蒙Next中Flutter开发接入鲸鸿动能-开屏广告

Flutter鸿蒙开发接入鲸鸿动能

在本文中，我们将讲解如何在Flutter应用中接入鸿蒙的鲸鸿动能广告系统。本文重点介绍如何展示开屏广告。如果您对Flutter与原生ArkTS交互还不了解，请先阅读：Flutter与原生ArkTS交互实现。

原生端实现：创建开屏广告页面

首先，在原生端创建一个用于展示开屏广告的页面。以下是代码示例：

import { router } from '@kit.ArkUI';
import { advertising, AdComponent } from '@kit.AdsKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG = 'Ads Demo-SplashFullScreenAdPage';

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

  aboutToAppear() {
    hilog.info(0x0000, TAG, '%{public}s', 'Start to splashFullScreenAdPage aboutToAppear');
    const params: Record<string, Object> = router.getParams() as Record<string, Object>;
    if (params && params.ads as Array<advertising.Advertisement> &&
      params.displayOptions as advertising.AdDisplayOptions) {
      this.ads = params.ads as Array<advertising.Advertisement>;
      this.displayOptions = params.displayOptions as advertising.AdDisplayOptions;
    } else {
      hilog.info(0x0000, TAG, '%{public}s', 'Router params are empty');
    }
  }

  build() {
    Column() {
      // 运行在提供方进程里
      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, TAG, '%{public}s', 'Status is onAdOpen');
                break;
              case AdStatus.AD_CLICKED:
                hilog.info(0x0000, TAG, '%{public}s', 'Status is onAdClick');
                break;
              case AdStatus.AD_CLOSED:
                hilog.info(0x0000, TAG, '%{public}s', 'Status is onAdClose');
                router.back()
                break;
            }
          }
        }
      })
        .width('100%')
        .height('87%');
      Column({}) {
        Row() {
          Image($r('app.media.launch_logo')).width('50%').height('50%').align(Alignment.Center)
        }.alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center)
      }.width('100%').height('13%').alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)

    }.width('100%').height('100%')
  }
}

export enum AdStatus {
  AD_OPEN = 'onAdOpen',
  AD_CLICKED = 'onAdClick',
  AD_CLOSED = 'onAdClose'
}

其中我配置的广告页面高度占比87%，底部 13% 用于显示名称和Logo。可以根据实际需求调整布局比例。

获取用户设备的OAID

为确保能够正确请求个性化广告，需要获取用户设备的OAID，并确保在 module.json5 中添加相关权限：

{
  "name": "ohos.permission.APP_TRACKING_CONSENT",
  "reason": "$string:AppTrackingConsentReason",
  "usedScene": {
    "abilities": ["EntryAbility"],
    "when": "always"
  }
}

注意：如果使用OAID请求广告，根据隐私政策，请务必添加一个个性化推荐开关，并允许用户关闭。

以下是获取OAID的函数：

async function checkPermissionGrant(permission: Permissions): Promise<abilityAccessCtrl.GrantStatus> {
  let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
  let grantStatus: abilityAccessCtrl.GrantStatus = abilityAccessCtrl.GrantStatus.PERMISSION_DENIED;

  // 获取应用程序的accessTokenID
  let tokenId: number = 0;
  try {
    let bundleInfo: bundleManager.BundleInfo = await bundleManager.getBundleInfoForSelf(bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION);
    let appInfo: bundleManager.ApplicationInfo = bundleInfo.appInfo;
    tokenId = appInfo.accessTokenId;
  } catch (error) {
    const err: BusinessError = error as BusinessError;
    console.error(`Failed to get bundle info for self. Code is ${err.code}, message is ${err.message}`);
  }

  // 校验应用是否被授予权限
  try {
    grantStatus = await atManager.checkAccessToken(tokenId, permission);
  } catch (error) {
    const err: BusinessError = error as BusinessError;
    console.error(`Failed to check access token. Code is ${err.code}, message is ${err.message}`);
  }
  return grantStatus;
}

因为我把函数放在了class之外，所以使用function的方式定义了函数，请根据自己的需求定义函数。

请求广告与路由跳转

添加 requestAd 和 routePage 函数的实现：

function requestAd(adReqParams: advertising.AdRequestParams, adOptions: advertising.AdOptions,context: common.UIAbilityContext,oaid:string): void {
  // 广告请求回调监听
  const adLoaderListener: advertising.AdLoadListener = {
    // 广告请求失败回调
    onAdLoadFailure: (errorCode: number, errorMsg: string) => {
      hilog.error(0x0000, 'testTag', '%{public}s',
        `Failed to request ad. errorCode is: ${errorCode}, errorMsg is: ${errorMsg}`);
    },
    // 广告请求成功回调
    onAdLoadSuccess: (ads: Array<advertising.Advertisement>) => {
      hilog.info(0x0000, 'testTag', '%{public}s', 'Succeeded in requesting ad!');
      // 保存请求到的广告内容用于展示
      hilog.info(0x0000, 'testTag', '%{public}s', `ads[0].adType is : ${ads[0].adType}`);
      if (canIUse("SystemCapability.Advertising.Ads")) {
        if (ads[0].adType === 1) {
          // 调用开屏广告展示页面
          const adDisplayOptions: advertising.AdDisplayOptions = {
            // 是否静音，默认不静音
            mute: false
          }
          routePage('pages/SplashFullScreenAdPage', ads, adDisplayOptions);
        } else {
          hilog.error(0x0000, 'testTag', '%{public}s', 'Error adType');
        }
      }
    }
  };
  // 创建AdLoader广告对象
  const load: advertising.AdLoader = new advertising.AdLoader(context);
  // 调用广告请求接口
  hilog.info(0x0000, 'testTag', '%{public}s', 'Request ad!');
  adReqParams.oaid = oaid;
  load.loadAd(adReqParams, adOptions, adLoaderListener);
}

async function routePage(pageUri: string, ads: Array<advertising.Advertisement | null>,
  displayOptions: advertising.AdDisplayOptions) {
  let options: router.RouterOptions = {
    url: pageUri,
    params: {
      ads: ads,
      displayOptions: displayOptions
    }
  }
  try {
    hilog.info(0x0000, 'testTag', '%{public}s', `RoutePage: ${pageUri}`);
    router.pushUrl(options);
  } catch (error) {
    hilog.error(0x0000, 'testTag', '%{public}s',
      `Failed to routePage callback, code: ${error.code}, msg: ${error.message}`);
  }
}

在Flutter端调用开屏广告

在Flutter端，我们需要使用MethodChannel与原生代码进行交互。以下是Flutter端的实现：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class SplashAdDemo extends StatefulWidget {
  @override
  _SplashAdDemoState createState() => _SplashAdDemoState();
}

class _SplashAdDemoState extends State<SplashAdDemo> {
  static const MethodChannel _channel = MethodChannel('com.example.adchannel');

  @override
  void initState() {
    super.initState();
    _showSplashAd();
  }

  Future<void> _showSplashAd() async {
    try {
      await _channel.invokeMethod('showSplashAd');
    } on PlatformException catch (e) {
      print("Failed to load splash ad: \${e.message}");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Welcome to the App!'),
      ),
    );
  }
}

在原生代码中，我们需要通过 MethodCallHandler 监听 showSplashAd 方法，触发开屏广告展示逻辑。

通过以上步骤，您可以在Flutter应用中成功接入鸿蒙鲸鸿动能的开屏广告功能。 上面的实例代码可以直接完成测试广告的显示，需要注意的是，在应用启动时，开发者需要判断用户是否已经同意隐私协议，如用户还没有同意，请不要请求和展示广告，也不要获取用户的oaid信息