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

バナーおよびMREC広告

次のセクションでは、バナーまたはMREC広告をロードし、表示または非表示にする方法について説明します。

バナーまたはMRECのローディング

以下のコードは、広告ユニットID、希望する広告表示位置、バナーの場合は希望する背景色を使用して、バナーまたはミディアムレクタングル（MREC）広告をロードする方法を示したものです。MAXは自動的に広告のサイズを調整します。

import { BannerAd, AdViewPosition } from 'react-native-applovin-max';


const BANNER_AD_UNIT_ID = Platform.select({
  android: '«android-ad-unit-ID»',
  ios: '«ios-ad-unit-ID»',
});


function initializeBannerAds()
{
  // Banners are automatically sized to 320x50 on phones and 728x90 on tablets
  // You may use the utility method `AppLovinMAX.isTablet()` to help with view sizing adjustments
  BannerAd.createAd(BANNER_AD_UNIT_ID, AdViewPosition.BOTTOM_CENTER);


  // Set background or background color for banners to be fully functional
  // In this case we set it to black - USE HEX STRINGS ONLY
  BannerAd.setBackgroundColor(BANNER_AD_UNIT_ID, '#000000');
}

バナーまたはMRECを表示

バナーまたはMRECを表示するには、以下の呼び出しを行います。

BannerAd.showAd(«ad-unit-ID»);

バナーまたはMRECを非表示にするには、以下の呼び出しを行います。

BannerAd.hideAd(«ad-unit-ID»);

ネイティブUIコンポーネントメソッド

次の例のように、バナーとMRECをネイティブUIコンポーネントとして直接DOMで表示することもできます。

import { AdView, AdFormat } from 'react-native-applovin-max';


<AdView adUnitId={«ad-unit-ID»}
        adFormat={AdFormat.BANNER}
        style={styles.banner}
        onAdLoaded={(adInfo: AdInfo) => {
          console.log('Banner ad loaded from ' + adInfo.networkName);
        }}
        onAdLoadFailed={(errorInfo: AdLoadFailedInfo) => {
          console.log('Banner ad failed to load with error code ' + errorInfo.code + ' and message: ' + errorInfo.message);
        }}
        onAdClicked={(adInfo: AdInfo) => {
          console.log('Banner ad clicked');
        }}
        onAdExpanded={(adInfo: AdInfo) => {
          console.log('Banner ad expanded')
        }}
        onAdCollapsed={(adInfo: AdInfo) => {
          console.log('Banner ad collapsed')
        }}
        onAdRevenuePaid={(adInfo: AdRevenueInfo) => {
          console.log('Banner ad revenue paid: ' + adInfo.revenue);
        }}/>
⋮
// This example anchors the bottom of the banner to the bottom of the screen
const styles = StyleSheet.create({
  banner: {
    // Set background color for banners to be fully functional
    backgroundColor: '#000000',
    position: 'absolute',
    width: '100%',
    height: 'auto', // Defined by AdView per type of AdView and device
    bottom:  Platform.select({
      ios: 36, // For bottom safe area
      android: 0,
    })
  }
});

広告のプリロード

React Nativeプラグインバージョン7.0.0では、AdViewをマウントする前に、ネイティブUIコンポーネントの広告をプリロードできます。 プリロードした広告ユニットIDでAdViewをマウントすると、プリロードしたネイティブUIコンポーネントでAdViewが構成され、広告を素早く表示できるようになります。

React Nativeプラグインバージョン8.1.0では、このプリロード機能で複数のAdViewインスタンスをサポートできるようになりました。 preloadNativeUIComponentAdView()メソッドはAdViewIdを返します。これは、AdViewをマウントするときに、プリロードした広告を指定する際に使用できます。

preloadNativeUIComponentAdView(«ad-unit-ID», AdFormat.BANNER)
  .then((adViewId: AdViewId) => {
    console.log('Started preloading a banner ad for ' + «ad-unit-ID» + ' with AdView ID: ' + adViewId);
  });

AdViewをマウントするときにAdViewIdを指定できます。

<AdView
  adUnitId={«ad-unit-ID»}
  adViewId={«ad-view-ID»}
  adFormat={AdFormat.BANNER}
  style={styles.banner}
  onAdLoaded={(adInfo: AdInfo) => {
    console.log('Banner ad ( ' + adInfo.adViewId + ' ) loaded from ' + adInfo.networkName);
  }}
  ⋮
/>

AdViewをアンマウントしても、プリロードされたネイティブUIコンポーネントは破棄されません。 キャッシュされて、次のマウントで再利用されます。 そのリソースを解放するには、不要になった時点で、手動で破棄する必要があります。

destroyNativeUIComponentAdView(adViewId)
  .then(() => {
    console.log('Destroyed the preloaded banner ad with AdView ID ' + adViewId);
  });

AdViewIdを使用せずにAdViewをマウントすると、コンポーネントが動的に広告をロードします。 この場合、AdViewをアンマウントすると自動的に破棄され、再利用はできません。

完全な実装例については、AppLovin-MAX-React-Native GitHubプロジェクトのサンプルアプリを参照してください。

アダプティブバナー

アダプティブバナーは、デバイスの種類やバナーの幅に基づいて高さが調整される、レスポンシブバナーです。 プラグインバージョン2.3.0より、アダプティブバナーをサポートするアドネットワークからのバナーは、デフォルトで「アダプティブ」に設定されます。 アダプティブバナーを無効にするには、以下の例のように追加のフラグを設定します。

BannerAd.setExtraParameter(«ad-unit-ID», "adaptive_banner", "false");

アダプティブバナーのサイズに基づいてUIを調整する必要がある場合、ロードされた広告の幅と高さをdpで取得できます。 以下のコードは、これを行う方法を示したものです。

BannerAd.addAdLoadedEventListener((adInfo: AdInfo) => {
  const widthDp = adInfo.size.width;
  const heightDp = adInfo.size.height;
});

自動更新の停止と開始

広告を非表示にする場合や、手動で更新する場合などに、広告の自動更新を停止できます。 以下のコードで、バナーまたはMREC広告の自動更新を停止します。

BannerAd.showAd(«ad-unit-ID»);
BannerAd.stopAutoRefresh(«ad-unit-ID»);

以下のコードで、バナーまたはMREC広告の自動更新を開始します。

BannerAd.startAutoRefresh(«ad-unit-ID»);
© 2025 AppLovin
ご利用規約 | プライバシー | EULA | DMCA | Cookie設定