コンテンツにスキップ
Support Center | AppLovin

ネイティブ広告

ネイティブ広告は、既存デザインと同じ形式でアプリのマネタイズを行うものです。 AppLovin MAX React Nativeモジュールでは、広告の個々のアセットにアクセスできます。 これにより、広告レイアウトの外観や操作性をアプリのデザインに合わせることができます。 画像キャッシュと指標のトラッキングは、SDKが自動で行うため、広告表示の方法、時期、場所などの決定に集中して取り組むことができます。

このモジュールは手動による連携のみをサポートしており、ネイティブ広告アセットをカスタムビューに手動でロードできます。 連携するには、以下の3つの手順を実行します。

  1. React Native UIコンポーネントを宣言する。
  2. ネイティブ広告を更新する。
  3. ネイティブ広告を破棄する。

手動APIを使用するには、Create New Ad Unit画面でManualテンプレートを選択してください。

Template: ☐ Small, ☐ Medium, ☒ Manual

React Native UIコンポーネントを宣言

NativeAdViewは、ネイティブ広告のコンポーネントを格納するコンテナです。 マウントすると、提供した広告ユニット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>
  );
};

広告をリロード

AppLovin React Nativeプラグインは、NativeAdViewがマウントされると自動的に最初のネイティブ広告をロードします。マウントしたら、広告が提供するリファレンスを使って、次の広告をリロードできます。

nativeAdViewRef.current?.loadAd();

アセットのサイズ

AppLovinは、アプリ全体のデザインに合う範囲で、可能な限りネイティブ要素を取り入れることを推奨しています。 これには、TitleやMedia View、Iconなどが含まれます。 より多くの情報を提供すれば、広告をクリックするかどうかをユーザーが判断しやすくなります。

AppLovin Exchangeデマンドの場合、タイトル、説明文、CTAに使用できる最大文字数は以下のとおりです。

アセット最大文字数数
タイトル50文字
説明150文字。149文字の後に省略記号（…）を150番目の文字として追加できます。
CTA15文字

SDKメディエーションネットワークの場合、ネットワークが最大文字数を設定します。

メディアコンテンツのアスペクト比の取得

MediaViewのメディアコンテンツのアスペクト比を、onAdLoadedコールバックの引数であるadInfoから取得できます。

adInfo.nativeAd.mediaContentAspectRatio

サポート対象のアダプターバージョン

アドネットワークアダプターバージョン
BidMachineAndroid 1.9.10.5 / iOS 1.9.5.0.2
Google アド マネージャーAndroid 22.1.0.1 / iOS 10.3.0.2
Google Biddingおよび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のみ 5.3.0.1

星評価

AppLovin MAX React Nativeプラグインv5.2.0では、広告で宣伝したアプリの星評価にアクセスしてレンダリングできます。 評価されている場合、値は[0.0, 5.0]の範囲の浮動小数点数となります。

React Nativeプラグインは、自動的にStarRatingViewコンポーネントの星の数をレンダリングします。 ネットワークが星評価を提供しない場合、React Nativeプラグインは星評価コンポーネントに何も入力しません。 その場合は、各自レイアウトを調整してください。

adInfo.nativeAd.starRatingから、現在の広告の星評価を取得できます。

© 2025 AppLovin
ご利用規約 | プライバシー | EULA | DMCA | Cookie設定