跳转到内容

原生广告

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

该模块仅支持手动集成,您可以手动将原生广告资源加载到自定义视图中。 这种集成方法主要涉及三个步骤:

  1. 声明 React Native UI 组件。
  2. 刷新原生广告。
  3. 销毁原生广告。

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

Template: ☐ Small, ☐ Medium, ☒ Manual

声明 React Native UI 组件

NativeAdView 是保存原生广告组件的容器, 挂载后会自动为您提供的 ad unit ID 加载原生广告。

该插件提供了多种组件,能渲染原生广告的各类资源。 您可以设置这些组件的样式,方法与应用中其他组件一样。 根据 AppLovin 的政策,您的广告必须包含隐私信息图标。 此图标链接至重要隐私声明。 您可以使用 OptionsView 组件对其进行绑定。

下表中列出了渲染原生广告资源的各种组件:

组件类型
TitleViewText
AdvertiserViewText
BodyViewText
IconViewImage
MediaViewView
CallToActionViewTouchableOpacity
OptionsViewView
StarRatingViewNumber

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

import {
NativeAdView,
TitleView,
AdvertiserView,
BodyView,
CallToActionView,
IconView,
OptionsView,
MediaView,
StarRatingView,
} from 'react-native-applovin-max';
const NativeAd = () => {
const nativeAdViewRef = useRef();
// Loads a new native ad
const onLoadPressed = () => {
nativeAdViewRef.current?.loadAd();
};
return (
<NativeAdView adUnitId={«ad-unit-ID»}
ref={nativeAdViewRef}
style={styles.nativead}
onAdLoaded={(adInfo: AdInfo) => {
console.log('Native ad loaded from ' + adInfo.networkName);
}}
onAdLoadFailed={(errorInfo: AdLoadFailedInfo) => {
console.log('Native ad failed to load with error code ' + errorInfo.code + ' and message: ' + errorInfo.message);
}}
onAdClicked={(adInfo; AdInfo) => {
console.log('Native ad clicked');
}}
onAdRevenuePaid={(adInfo: AdRevenueInfo) => {
console.log('Native ad revenue paid: ' + adInfo.revenue);
}}>
<View style={{flex: 1, flexDirection: 'column'}}>
<View style={{flexDirection: 'row'}}>
<IconView style={styles.icon}/>
<View style={{flexDirection: 'column', flexGrow: 1}}>
<TitleView style={styles.title}/>
<AdvertiserView style={styles.advertiser}/>
<StarRatingView style={styles.starating}/>
</View>
<OptionsView style={styles.optionsView}/>
</View>
<BodyView style={styles.body}/>
<MediaView style={styles.mediaView}/>
<CallToActionView style={styles.callToAction}/>
</View>
</NativeAdView>
);
};

广告重新加载

挂载 NativeAdView 时,AppLovin React Native plugin 会自动加载第一个原生广告。 挂载完毕后,您可以使用它提供的 ref 重新加载下一个广告。

nativeAdViewRef.current?.loadAd();

资源规模

AppLovin 建议您根据应用整体情况,添加尽可能多的原生元素,包括标题、媒体视图和图标等。 为用户提供更多信息,有助于他们决定是否点击广告。

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

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

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

如何获取媒体内容长宽比

您可以从 onAdLoaded 回传的参数 adInfo 中调取用于 MediaView 的媒体内容长宽比:

adInfo.nativeAd.mediaContentAspectRatio

受支持的适配器版本

广告平台适配器版本
BidMachineAndroid 1.9.10.5 / iOS 1.9.5.0.2
Google Ad ManagerAndroid 22.1.0.1 / iOS 10.3.0.2
Google 竞价和 Google AdMobAndroid 22.1.0.1 / iOS 10.3.0.2
InMobiAndroid 10.1.2.1 / iOS 10.1.1.1
LINEAndroid 2022.2.16.3 / iOS 2.4.20220630.1
Meta Audience NetworkAndroid 6.12.0.1 / iOS 6.12.0.1
MintegralAndroid 16.2.61.2 / iOS 7.2.6.0.1
PangleAndroid 4.8.0.8.2 / iOS 4.7.0.8.2
SmaatoAndroid 21.8.5.1 / iOS 21.7.8.1
VK Ad NetworkAndroid 5.16.0.1 / iOS 5.16.0.1
Yandex仅限 Android 5.3.0.1

星级评分

自 AppLovin MAX React Native plugin 5.2.0 版本起,您可以访问并显示所推广应用的星级。 在可用情况下,该值是 [0.0, 5.0] 范围内的浮点数。

React Native plugin 会自动渲染 StarRatingView 组件中的星级。 如果平台未提供星级评分,那么 React Native plugin 就不会填充星级评级组件。 您需要自行进行对应的布局调整。

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