Banner 및 MREC 광고

Banner 및 MREC 광고는 앱 레이아웃의 일부(주로 화면 상단이나 하단, 또는 스크롤 가능한 콘텐츠 내부)를 차지하는 직사각형 광고 포맷입니다. 사용자가 앱과 상호작용하는 동안에도 계속 표시되므로 게임 플레이나 앱 사용을 방해하지 않으며, 설정된 시간 후에 자동으로 새로고침될 수 있습니다.

다음 섹션에서는 Banner 또는 MREC 광고를 로드, 표시 및 숨기는 방법을 설명합니다.

info

함께 보기

AppLovin 블로그의 “비디오와 플레이어블의 시대에 모바일 배너 광고가 여전히 건재한 이유”를 확인해 보세요.

Banner 또는 MREC 로드하기

다음 코드는 Ad Unit ID, 원하는 위치, 그리고 (Banner의 경우) 원하는 배경색을 사용하여 Banner 또는 MREC 광고를 로드하는 방법을 보여줍니다. 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 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');
}


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

function initializeMRecAds()
{
  // MRECs are sized to 300x250 on phones and tablets
  MRecAd.createAd(MREC_AD_UNIT_ID, AdViewPosition.CENTERED);
}

Banner 또는 MREC 표시하기

Banner 또는 MREC를 표시하려면 다음 메서드를 호출합니다:

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

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

Banner 또는 MREC를 숨기려면 다음 메서드를 호출합니다:

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

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

네이티브 UI 컴포넌트 방식

다음 예시와 같이 Banner 및 MREC를 네이티브 UI 컴포넌트로서 DOM에 직접 렌더링할 수도 있습니다:


<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: AdInfo) => {
          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,
    })
  }
});


<AdView adUnitId={«ad-unit-ID»}
        adFormat={AdFormat.MREC}
        style={styles.mrec}
        onAdLoaded={(adInfo: AdInfo) => {
          console.log('MREC ad loaded from ' + adInfo.networkName);
        }}
        onAdLoadFailed={(errorInfo: AdLoadFailedInfo) => {
          console.log('MREC ad failed to load with error code ' + errorInfo.code + ' and message: ' + errorInfo.message);
        }}
        onAdClicked={(adInfo: AdInfo) => {
          console.log('MREC ad clicked');
        }}
        onAdExpanded={(adInfo: AdInfo) => {
          console.log('MREC ad expanded')
        }}
        onAdCollapsed={(adInfo: AdInfo) => {
          console.log('MREC ad collapsed')
        }}
        onAdRevenuePaid={(adInfo: AdInfo) => {
          console.log('MREC ad revenue paid: ' + adInfo.revenue);
        }}/>

광고 프리로드 (Preloading)

React Native 플러그인 버전 7.0.0부터는 AdView를 마운트하기 전에 네이티브 UI 컴포넌트용 광고를 미리 로드(preload)할 수 있습니다. 프리로드한 Ad Unit 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);
  });

preloadNativeUIComponentAdView(«ad-unit-ID», AdFormat.MREC)
  .then((adViewId: AdViewId) => {
    console.log('Started preloading a MREC 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
  adUnitId={«ad-unit-ID»}
  adViewId={«ad-view-ID»}
  adFormat={AdFormat.MREC}
  style={styles.mrec}
  onAdLoaded={(adInfo: AdInfo) => {
    console.log('MREC ad ( ' + adInfo.adViewId + ' ) loaded from ' + adInfo.networkName);
  }}
  ⋮
/>

AdView를 언마운트할 때 프리로드된 플랫폼 위젯은 파괴되지 않고 캐시되므로 다음 마운트 시 재사용할 수 있습니다. 리소스를 해제하려면 더 이상 필요하지 않을 때 수동으로 파괴해야 합니다:

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

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

AdView를 마운트할 때 AdViewId를 생략하면 컴포넌트가 광고를 동적으로 로드합니다. 이러한 경우 AdView를 언마운트하면 자동으로 파괴되며 다음 마운트 시 재사용되지 않습니다.

전체 작동 예시는 AppLovin-MAX-React-Native GitHub 프로젝트의 예시 앱을 참조하세요.

Adaptive banners

info

Note

Google bidding 및 Google AdMob, Google Ad Manager, Liftoff Monetize, Pangle, Yandex는 adaptive banners를 지원합니다. MAX는 adaptive banners를 지원하지 않는 다른 네트워크의 banner 크기를 비적응형 방식으로 조정합니다.

Google은 개발자가 banner 배치 영역과 앱 콘텐츠 사이에 50 px의 패딩을 포함할 것을 권장합니다. 이렇게 하면 사용자가 실수로 banner를 클릭할 가능성이 줄어듭니다. 자세한 정보 및 모범 사례는 Google의 “확인된 클릭 정보” 정책을 참조하세요.

Adaptive banners는 기기 유형과 banner 너비에 따라 높이가 결정되는 반응형 banner입니다. adaptive banners를 지원하는 광고 네트워크의 banner는 기본적으로 적응형으로 설정됩니다. adaptive banners를 비활성화하려면 다음 예시와 같이 해당 파라미터를 false로 설정하세요:

BannerAd.createAd(«ad-unit-ID», AdViewPosition.BOTTOM_CENTER, 0, 0, false);

<AdView adUnitId={«ad-unit-ID»}
        adFormat={AdFormat.BANNER}
        adaptiveBannerEnabled={false} />

adaptive banners 크기에 따라 UI를 조정해야 하는 경우, 로드된 광고의 너비와 높이를 dp 단위로 가져올 수 있습니다. 다음 코드는 이를 수행하는 방법을 보여줍니다:

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

<AdView adUnitId={«ad-unit-ID»}
        adFormat={AdFormat.BANNER}
        onAdLoaded={(adInfo: AdInfo) => {
          const widthDp = adInfo.size.width;
          const heightDp = adInfo.size.height;
        }} />

자동 새로고침 중지 및 시작

광고의 자동 새로고침을 중지하고 싶을 수 있습니다. 예를 들어 광고를 숨기거나 수동으로 새로고침하려는 경우가 이에 해당합니다. 다음 코드를 사용하여 Banner 또는 MREC 광고의 자동 새로고침을 중지합니다:

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

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

<AdView adUnitId={«ad-unit-ID»}
        adFormat={AdFormat.«format»}
        autoRefresh={false} />

다음 코드를 사용하여 Banner 또는 MREC 광고의 자동 새로고침을 시작합니다:

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

MRecAd.startAutoRefresh(«ad-unit-ID»);

<AdView adUnitId={«ad-unit-ID»}
        adFormat={AdFormat.«format»}
        autoRefresh={true} />

AppOpen 광고

Interstitial 광고

운영정책 이용약관 퍼블리셔 정책 디맨드 파트너 정책 플랫폼 규제 프라이버시 Your Privacy Choices

쿠키설정