跳转到内容

原生广告

借助原生广告,您可以按照应用现有设计制定变现方式。通过 AppLovin MAX Flutter 插件,您可以访问广告的各个素材资源,让广告布局的设计与应用外观保持一致。SDK 会自动处理图像缓存和指标跟踪,让您将更多时间和精力用于设计广告展示的方式、时机和位置。

The plugin supports only manual integration: you can manually load native ad assets into your custom views. This integration method involves three high-level steps:

  • 声明 Flutter UI 组件。
  • 刷新原生广告。
  • 销毁原生广告。

要使用手动 API,在 Create New Ad Unit 界面中选择 Manual 模板:

Template: ☐ Small, ☐ Medium, ☒ Manual

声明 Flutter UI 组件

MaxNativeAdView 是保存原生广告组件的容器,挂载后会自动为您提供的 adUnitId 属性加载原生广告。

The plugin provides components that render assets of the native ad. You can style these components as you do with other components in your app. To accord with AppLovin’s policy, your ad must contain the Privacy Information icon. This icon links to an important privacy notice. You can bind to it by using the MaxNativeOptionsView component.

The following table shows the components that help you render native ad assets:

组件类型
MaxNativeAdAdvertiserViewText
MaxNativeAdBodyViewText
MaxNativeAdCallToActionViewElevatedButton
MaxNativeAdIconViewContainer
MaxNativeAdMediaViewContainer
MaxNativeAdOptionsViewContainer
MaxNativeAdStarRatingViewContainer
MaxNativeAdTitleViewText

下方示例代码中,示例原生广告使用了所有这些原生广告组件。 AppLovin 并不保证某个广告平台会返回特定资源。 要查看完整运行示例,请访问 AppLovin-MAX-Flutter GitHub 项目中的示例应用

Container(
margin: const EdgeInsets.all(8.0),
height: 300,
child: MaxNativeAdView(
adUnitId: widget.adUnitId,
controller: _nativeAdViewController,
listener: NativeAdListener(onAdLoadedCallback: (ad) {
logStatus('Native ad loaded from ${ad.networkName}');
setState(() {
_mediaViewAspectRatio = ad.nativeAd?.Mediacontentaspectratio ?? _kMediaViewAspectRatio;
});
}, onAdLoadFailedCallback: (adUnitId, error) {
logStatus('Native ad failed to load with error code ${error.code} and message: ${error.message}');
}, onAdClickedCallback: (ad) {
logStatus('Native ad clicked');
}, onAdRevenuePaidCallback: (ad) {
logStatus('Native ad revenue paid: ${ad.revenue}');
}),
child: Container(
color: const Color(0xffefefef),
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(4.0),
child: const MaxNativeAdIconView(
width: 48,
height: 48,
),
),
Flexible(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MaxNativeAdTitleView(
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
maxLines: 1,
overflow: TextOverflow.visible,
),
MaxNativeAdAdvertiserView(
style: TextStyle(fontWeight: FontWeight.normal, fontSize: 10),
maxLines: 1,
overflow: TextOverflow.fade,
),
MaxNativeAdStarRatingView(
size: 10,
),
],
),
),
const MaxNativeAdOptionsView(
width: 20,
height: 20,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Flexible(
child: MaxNativeAdBodyView(
style: TextStyle(fontWeight: FontWeight.normal, fontSize: 14),
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
),
],
),
const SizedBox(height: 8),
Expanded(
child: AspectRatio(
aspectRatio: _mediaViewAspectRatio,
child: const MaxNativeAdMediaView(),
),
),
const SizedBox(
width: double.infinity,
child: MaxNativeAdCallToActionView(
style: ButtonStyle(
backgroundColor: MaterialStatePropertyAll(Color(0xff2d545e)),
textStyle: MaterialStatePropertyAll(TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
),
),
),
],
),
),
),
),

广告重新加载

挂载 MaxNativeAdView 时,AppLovin Flutter plugin 会自动加载第一个原生广告。 挂载完毕后,您可以调用 MaxNativeAdViewControllerload() 方法,加载下一则广告。

final MaxNativeAdViewController _nativeAdViewController = MaxNativeAdViewController();
_nativeAdViewController.loadAd();

资源规模

AppLovin recommends that you incorporate as many native elements as are appropriate in the context of what the rest of your app looks like. Such elements may include the Title and Media View or Icon. Giving the user more information helps them decide whether they want to click the ad.

对于 AppLovin Exchange 广告需求,标题、描述和 CTA 所允许的最大字符数如下:

资源最大字符数
标题50 个字符
描述150 个字符。可以在第 149 个字符后添加省略号 (...)作为第 150 个字符。
CTA15 个字符

对于 SDK 聚合的广告平台,最大字符数由广告平台设置。

如何获取媒体内容长宽比

您可以从 adInfo 中调取用于 MediaView 的媒体内容长宽比。 这是 onAdLoaded() 回传的一个参数:

ad.nativeAd?mediaContentAspectRatio

星级评分

您可以访问并渲染所推广应用的星级评分。 在可用情况下,该值是 [0.0, 5.0] 范围内的浮点数。

AppLovin MAX Flutter plugin 会自动渲染 MaxNativeAdStarRatingView 组件中的星级。 如果平台未提供星级评分信息,那么 AppLovin MAX Flutter plugin 就会将星级评级留空。您需要自行进行对应的布局调整。

您可以从 ad.nativeAd?starRating 中调取星级评分,用于当前的广告。