跳转到内容

Native Ads

此内容尚不支持你的语言。

Native ads let you monetize your app in a way that’s consistent with its existing design. The AppLovin MAX React Native module gives you access to an ad’s individual assets. This way, you can design the ad layout to be consistent with the look and feel of your app. The SDK automatically handles image caching and metrics tracking. You can focus on how, when, and where to display ads.

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

  1. Declare React Native UI components.
  2. Refresh the native ad.
  3. Destroy the native ad.

To use the manual API, select the Manual template in the Create New Ad Unit screen:

Template: ☐ Small, ☐ Medium, ☒ Manual

Declare React Native UI Components

The NativeAdView is the container that holds your native ad components. When it mounts, it automatically loads a native ad for the ad unit ID you provide.

The plugin provides various components that render various assets of the native ad. You can style these components as you do with other components in your app. As per 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 OptionsView component.

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

ComponentType
TitleViewText
AdvertiserViewText
BodyViewText
IconViewImage
MediaViewView
CallToActionViewTouchableOpacity
OptionsViewView
StarRatingViewNumber

The following code sample demonstrates a sample native ad that uses all of these native ad components. AppLovin does not guarantee a network will return certain assets. For a complete working example, see the example app at the AppLovin-MAX-React-Native GitHub project.

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>
);
};

Ad Reloading

The AppLovin React Native plugin automatically loads the first native ad when the NativeAdView mounts. Once it mounts, you can reload the next ad by using a ref that it provides.

nativeAdViewRef.current?.loadAd();

Asset Sizes

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

For AppLovin Exchange demand, the maximum numbers of characters allowed for Title, Description, and CTA are as follows:

AssetMaximum Character Count
Title50 characters
Description150 characters. You can add an ellipsis () after 149 characters, as the 150th character.
CTA15 characters

For SDK-mediated networks, the network sets the maximum character counts.

How to Get the Media Content Aspect Ratio

You can retrieve the Media Content Aspect Ratio for MediaView from adInfo, an argument of the onAdLoaded callback:

adInfo.nativeAd.mediaContentAspectRatio

Supported Adapter Versions

Ad NetworkAdapter Version
BidMachineAndroid 1.9.10.5 / iOS 1.9.5.0.2
Google Ad ManagerAndroid 22.1.0.1 / iOS 10.3.0.2
Google Bidding and 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
YandexAndroid only 5.3.0.1

Star Rating

As of AppLovin MAX React Native plugin v5.2.0, you can access and render the star rating for the advertised app. The value, if available, is a floating point number in the range of [0.0, 5.0].

The React Native plugin automatically renders the stars in the StarRatingView component. If the network does not provide the star rating, the React Native plugin does not fill the star rating component. You are responsible for adjusting your layout accordingly.

You can retrieve the star rating for the current ad from adInfo.nativeAd.starRating.