ネイティブ広告

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

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

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

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

Template: ☐ Small, ☐ Medium, ☒ Manual

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

NativeAdViewは、ネイティブ広告のコンポーネントを格納するコンテナです。マウントすると、提供した広告ユニットIDのネイティブ広告が自動的にロードされます。

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. According to 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 components that help you render native ad assets:

コンポーネント	タイプ
`TitleView`	`Text`
`AdvertiserView`	`Text`
`BodyView`	`Text`
`IconView`	`Image`
`MediaView`	`View`
`CallToActionView`	`TouchableOpacity`
`OptionsView`	`View`
`StarRatingView`	`Number`

The following code sample demonstrates a sample native ad that uses all 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();
  };

  // Destroys the current native ad
  const onDestroyPressed = () => {
    nativeAdViewRef.current?.destroyAd();
  }

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

広告をリロード

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

nativeAdViewRef.current?.loadAd();

ネイティブ広告を破棄

ネイティブ広告を使用しなくなった場合は、そのリソースをクリーンアップする必要があります。 destroyAd()メソッドを呼び出して、これを実行してください。これを行わないと、アプリのパフォーマンスが低下します。

nativeAdViewRef.current?.destroyAd();

アセットのサイズ

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

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

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

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

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

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

adInfo.nativeAd.mediaContentAspectRatio

星評価

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

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

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

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