본문 바로가기

APP/Flutter

[플러터] Admob 전면 광고 - 애드몹, Flutter

반응형

기본 배너 광고에 대한 글은 여기에서!!

2021.12.27 - [플러터] Admob 기본 배너 사용법 - 안드로이드, flutter, 애드몹, 광고

 

[플러터] Admob 기본 배너 사용법 - 안드로이드, flutter, 애드몹, 광고

Admob 사용법을 설명하기 앞서 이 글은 기본적인 배너 광고 사용법 및 안드로이드를 대상으로 한 설명글이다. Admob 설정 앱 추가 Admob 홈페이지에서 앱 -> 앱 추가를 클릭하여 앱을 추가해준다. 광

zzangwoo.tistory.com


전면 광고

  전면 광고는 앱의 화면을 완전히 덮는 전체 화면 광고다. 일반적으로 활동이 바뀌는 시점 또는 게임에서 다음 레벨로 넘어갈 때처럼 앱 이용이 잠시 중단될 때 자연스럽게 광고를 게재하는 것을 권장한다.


<추가>

  글에 빼먹은 점이 있어서 추가한다.

1. 테스트는 무조건 테스트 유닛 아이디를 사용해야한다.

2. Admob '광고 단위' 메뉴에서 전면 광고 단위를 추가하고 밑의 글대로 진행하면 된다.


광고 로드

InterstitialAd.load(
  adUnitId: InterstitialAd.testAdUnitId,
  request: AdRequest(),
  adLoadCallback: InterstitialAdLoadCallback(
    onAdLoaded: (InterstitialAd ad) {
      Logger().d('전면광고 onAdLoaded 호출');
      this._interstitialAd = ad;
    },
    onAdFailedToLoad: (LoadAdError error) {
      Logger().d('전면광고 onAdFailedToLoad 호출');
      Logger().d('에러 내용 : $error');
    },
  ),
);
  • 패키지 업데이트가 되면서 이전과 전면광고 불러오는 방법이 바뀐 듯 하다.
  • _interstitialAd라는 InterstitialAd 변수를 전역변수로 선언하고 onAdLoaded 메서드를 통해서 InterstitialAd를 인스턴스화 시켜준다.

 

전면 광고 이벤트

/// 전면 광고 이벤트
/// 광고 게재, 광고 닫기와 같은 생명 주기 이벤트를 수진할 수 있다.
_interstitialAd?.fullScreenContentCallback = FullScreenContentCallback(
  onAdShowedFullScreenContent: (InterstitialAd ad) =>
    /// 광고가 로드되면 호출되는 이벤트
  onAdDismissedFullScreenContent: (InterstitialAd ad) {
    /// 사용자가 광고를 종료하면 호출되는 이벤트
    ad.dispose();
  },
  onAdFailedToShowFullScreenContent: (InterstitialAd ad, AdError error) {
    ad.dispose();
  },
  onAdImpression: (InterstitialAd ad) => print('$ad impression occurred.'),
);
  • FullscreenContentCallback을 사용하면 광고 게재, 광고 닫기와 같은 생명 주기 이벤트를 수신할 수 있다.
  • onAdShowedFullScreenContent 이벤트는 사용자 앱에서 광고가 로드되면 호출되는 이벤트다.
  • onAdDismissedFullscreenContent 이벤트는 사용자가 광고를 종료하면 호출되는 이벤트다.
  • 광고가 종료되는 이벤트에서 InterstitialAd를 dispose 해주라고 한다.

 

전면 광고 게재

_interstitialAd?.show();
  • InterstitialAd는 모든 앱 컨텐츠 위에 오버레이로 표시되며 정적으로 배치되기 때문에 Flutter의 위젯 트리에는 추가할 수 없다.
  • show() 메서드를 이용하여 전면 광고를 게재하게 되면 프로그램적으로 닫을 수 없고 사용자가 닫기 버튼을 클릭해야만 닫을 수 있다.

 

전체 코드

  테스트로 코드를 작성했기 때문에 버튼을 클릭하면 전면광고가 나오게 했다.

InterstitialAd? _interstitialAd;

... 버튼 위젯 & 버튼 클릭 이벤트 코드는 생략 ...

/// 버튼 클릭 시 호출하는 메서드
_callFullScreenAd() {
    InterstitialAd.load(
      adUnitId: InterstitialAd.testAdUnitId,
      request: AdRequest(),
      adLoadCallback: InterstitialAdLoadCallback(
        onAdLoaded: (InterstitialAd ad) {
          Logger().d('전면광고 onAdLoaded 호출');
          this._interstitialAd = ad;
        },
        onAdFailedToLoad: (LoadAdError error) {
          Logger().d('전면광고 onAdFailedToLoad 호출');
          Logger().d('에러 내용 : $error');
        },
      ),
    );

    /// 전면 광고 이벤트
    /// 광고 게재, 광고 닫기와 같은 생명 주기 이벤트를 수진할 수 있다.
    _interstitialAd?.fullScreenContentCallback = FullScreenContentCallback(
      onAdShowedFullScreenContent: (InterstitialAd ad) =>
        /// 광고가 로드되면 호출되는 이벤트
        Logger().d('$ad onAdShowedFullScreenContent.'),
      onAdDismissedFullScreenContent: (InterstitialAd ad) {
        /// 사용자가 광고를 종료하면 호출되는 이벤트
        Logger().d('$ad onAdDismissedFullScreenContent.');
        ad.dispose();
      },
      onAdFailedToShowFullScreenContent: (InterstitialAd ad, AdError error) {
        Logger().d('$ad onAdFailedToShowFullScreenContent: $error');
        ad.dispose();
      },
      onAdImpression: (InterstitialAd ad) => print('$ad impression occurred.'),
    );

    _interstitialAd?.show();
  }

 

결과

반응형