原生广告
借助原生广告,您可以按照应用现有设计制定变现方式。 通过 AppLovin MAX React Native 模块,您可以访问广告的单个素材资源,让广告布局的设计与应用外观保持一致。 SDK 会自动处理图像缓存和指标跟踪,让您将更多时间和精力用于设计广告展示的方式、时机和位置。
该模块仅支持手动集成,您可以手动将原生广告资源加载到自定义视图中。 这种集成方法主要涉及三个步骤:
- 声明 React Native UI 组件。
- 刷新原生广告。
- 销毁原生广告。
要使用手动 API,在 Create New Ad Unit 界面中选择 Manual 模板:
声明 React Native UI 组件
NativeAdView
是保存原生广告组件的容器,
挂载后会自动为您提供的 ad unit ID 加载原生广告。
该插件提供了多种组件,能渲染原生广告的各类资源。
您可以设置这些组件的样式,方法与应用中其他组件一样。
根据 AppLovin 的政策,您的广告必须包含隐私信息图标。
此图标链接至重要隐私声明。
您可以使用 OptionsView
组件对其进行绑定。
下表中列出了渲染原生广告资源的各种组件:
组件 | 类型 |
---|---|
TitleView | Text |
AdvertiserView | Text |
BodyView | Text |
IconView | Image |
MediaView | View |
CallToActionView | TouchableOpacity |
OptionsView | View |
StarRatingView | Number |
在下方示例代码中,展示了使用所有原生广告组件的原生广告。 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 个字符。 |
CTA | 15 个字符 |
对于 SDK 聚合的广告平台,最大字符数由广告平台设置。
如何获取媒体内容长宽比
您可以从 onAdLoaded
回传的参数 adInfo
中调取用于 MediaView 的媒体内容长宽比:
adInfo.nativeAd.mediaContentAspectRatio
受支持的适配器版本
广告平台 | 适配器版本 |
---|---|
BidMachine | Android 1.9.10.5 / iOS 1.9.5.0.2 |
Google Ad Manager | Android 22.1.0.1 / iOS 10.3.0.2 |
Google 竞价和 Google AdMob | Android 22.1.0.1 / iOS 10.3.0.2 |
InMobi | Android 10.1.2.1 / iOS 10.1.1.1 |
LINE | Android 2022.2.16.3 / iOS 2.4.20220630.1 |
Meta Audience Network | Android 6.12.0.1 / iOS 6.12.0.1 |
Mintegral | Android 16.2.61.2 / iOS 7.2.6.0.1 |
Pangle | Android 4.8.0.8.2 / iOS 4.7.0.8.2 |
Smaato | Android 21.8.5.1 / iOS 21.7.8.1 |
VK Ad Network | Android 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
中调取星级评分,用于当前的广告。