배너

플랫폼 선택: Android iOS Unity Flutter

배너 광고는 기기 화면의 상단이나 하단에서 앱의 레이아웃 안에 게재됩니다. 배너 광고는 사용자가 앱과 상호작용하는 동안 화면에 표시되며 일정 시간이 지나면 자동으로 새로고침될 수 있습니다.

이 가이드에서는 앵커 적응형 배너 광고를 시작하는 방법을 설명합니다. 앵커 적응형 배너는 사용자가 지정한 광고 너비를 사용하여 각 기기에 맞게 광고 크기를 최적화합니다.

앵커 적응형 배너 광고는 고정 크기 광고가 아닌 고정 가로세로 비율 광고입니다. 가로세로 비율은 320x50과 비슷합니다. 사용 가능한 전체 너비를 지정하면 Google 모바일 광고 SDK가 해당 너비에 최적화된 높이의 광고를 반환합니다. 광고의 최적 높이는 광고 요청마다 일정하게 유지되며 광고가 새로고침될 때 광고를 둘러싼 콘텐츠는 그대로 유지됩니다.

항상 테스트 광고로 테스트

앱을 제작하고 테스트할 때는 운영 중인 실제 광고 대신 테스트 광고를 사용하세요. 이렇게 하지 않으면 계정이 정지될 수 있습니다.

테스트 광고를 로드하는 가장 쉬운 방법은 배너 광고 전용 테스트 광고 단위 ID를 사용하는 것입니다.

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

테스트 광고 단위는 모든 요청에 대해 테스트 광고를 반환하도록 구성되며 코딩, 테스트, 디버깅 중에 앱에서 자유롭게 사용할 수 있습니다. 단, 앱을 게시하기 전에 이 테스트 광고 단위 ID를 자체 광고 단위 ID로 바꿔야 합니다.

광고 크기 가져오기

올바른 광고 크기의 배너 광고를 요청하려면 다음 단계를 따르세요.

  1. MediaQuery.of(context)를 사용하여 기기 화면의 너비(밀도 독립형 픽셀(dp))를 가져옵니다. 전체 화면 너비를 사용하지 않으려면 너비를 직접 설정하면 됩니다.

  2. AdSize 클래스에서 적절한 정적 메서드를 사용하여 AdSize 객체를 가져옵니다. 예를 들어 AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)을 사용하여 현재 방향의 광고 크기를 가져옵니다.

// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
    MediaQuery.sizeOf(context).width.truncate());

광고 로드

다음 예에서는 배너 광고를 인스턴스화합니다.

class BannerExampleState extends State<BannerExample>{
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';

  /// Loads a banner ad.
  void loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      listener: BannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('BannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
      ),
    )..load();
  }
}

BannerAdListener를 사용하면 광고 로드와 같은 수명 주기 이벤트를 수신할 수 있습니다. 이 예에서는 각 메서드를 구현하고 콘솔에 메시지를 기록합니다.

class BannerExampleState extends State<BannerExample> {
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';


  /// Loads a banner ad.
  void loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      listener: BannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('BannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
        // Called when an ad opens an overlay that covers the screen.
        onAdOpened: (Ad ad) {},
        // Called when an ad removes an overlay that covers the screen.
        onAdClosed: (Ad ad) {},
        // Called when an impression occurs on the ad.
        onAdImpression: (Ad ad) {},
      ),
    )..load();
  }
}

광고 새로고침

광고 단위가 새로고침되도록 설정한 경우 광고가 로드되지 않더라도 다른 광고를 요청하지 않아도 됩니다. Google 모바일 광고 SDK는 AdMob UI에 지정된 새로고침 빈도를 따릅니다. 새로고침을 사용 설정하지 않았다면 새로 요청하세요. 새로고침 빈도 설정과 같은 광고 단위 새로고침에 대한 자세한 내용은 배너 광고에 자동 새로고침 사용을 참고하세요.

배너 광고 표시

BannerAd를 위젯으로 표시하려면 load()를 호출한 후 지원되는 광고를 사용하여 AdWidget을 인스턴스화해야 합니다. load()를 호출하기 전에 위젯을 만들 수 있지만 위젯 트리에 위젯을 추가하기 전에 load()를 호출해야 합니다.

AdWidget은 Flutter의 위젯 클래스에서 상속되며 다른 위젯처럼 사용할 수 있습니다. iOS에서는 지정된 너비와 높이를 바탕으로 위젯에 위젯을 배치해야 합니다. 그렇지 않으면 광고가 게재되지 않을 수 있습니다. BannerAd는 광고와 일치하는 크기의 컨테이너에 배치할 수 있습니다.

if (_bannerAd != null) {
  Align(
    alignment: Alignment.bottomCenter,
    child: SafeArea(
      child: SizedBox(
        width: _bannerAd!.size.width.toDouble(),
        height: _bannerAd!.size.height.toDouble(),
        child: AdWidget(ad: _bannerAd!),
      ),
    ),
  )
}

광고에 대한 액세스가 더 이상 필요하지 않으면 광고를 삭제해야 합니다. dispose()를 호출하기 가장 좋은 시점은 위젯 트리에서 AdWidget을 제거한 후나 BannerAdListener.onAdFailedToLoad() 콜백입니다.

작업이 끝났습니다. 이제 앱에서 배너 광고를 게재할 수 있습니다.

Android 9 이하의 스크롤 제한

Android 9 이하를 실행하는 일부 오래된 기기나 성능이 낮은 기기에서 스크롤 뷰 내에 인라인 배너 광고를 표시할 때 최적화되지 않은 성능이 나타날 수 있습니다. Android 10 이상에서만 이러한 유형의 배너를 사용하는 것이 좋습니다. 고정 위치 배너(예: 앵커 배너)는 영향을 받지 않으며 모든 Android API 수준에서 최적의 성능으로 사용할 수 있습니다.

GitHub의 전체 예

이 페이지에서 다루는 배너 통합의 전체 예는 banner_example을 참고하세요.

기타 배너 유형 알아보기

Flutter 애플리케이션에 대해 이 섹션에 정의된 다른 유형의 배너를 숙지합니다.

인라인 적응형 배너

인라인 적응형 배너는 높이가 다양하며 앵커 적응형 배너와 비교할 때 더 크고 더 높은 배너입니다. 스크롤 가능한 콘텐츠에 배너 광고를 게재하는 앱에는 앵커 적응형 배너 광고보다 인라인 적응형 배너가 권장됩니다. 자세한 내용은 인라인 적응형 배너를 참고하세요.

접을 수 있는 배너

접을 수 있는 배너 광고는 처음에는 더 큰 오버레이로 표시되며 광고를 더 작은 크기로 접을 수 있는 버튼이 함께 표시되는 배너 광고입니다. 이 배너를 사용하여 실적을 더욱 최적화해 보세요. 자세한 내용은 접을 수 있는 배너 광고를 참고하세요.