programming코딩

리얼 Flutter #10 애드몹 광고 추가하기

Posted kowana

Flutter App을 Play Store에 등록하였으니 이제 애드몹 광고 추가를 해볼겠습니다.

애드몹 광고 추가하기 글에 적은대로 광고 단위를 추가했습니다.

해당 광고 단위를 idea note 앱에 등록하는 것을 진행하겠습니다.

먼저 애드몹 광고 추가는 Platform와 연관이 있으므로 이번 글은 Android에 대해서 한정합니다.

iOS는 별도의 iOS 에 대한 글에서 나중에 설명하겠습니다.

아직 안해봐서 해보고 글을 작성할 예정입니다.

설명과 함께 구현하는 코드는 github repository에 있고 본 글은  commit c41128c 기준입니다.

지금 코드에서 AndroidManifest.xml의 app id와 ad_info.dart에서 ad unit id 는 본인의 것으로 적용해야 합니다. No Ads 버전 코드를 만들어야 하는데 다음에 하겠습니다.

firebase_core와 firebase_admob library 설치

가장 먼저 firebase_core와 firebase_admob library를 설치합니다.

Chapter #4 pubget 에 설명한대로 pubspec.yaml에 추가해줍니다.

Meta Data로 애드몹 App ID 등록

Meta Data로 애드몹 광고용 App ID 등록

그림과 같이 meta-data를 추가해주었습니다.

APP ID 노출을 막고자 저의 APP_ID는 github에 Update하지는 않겠습니다.

<meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="[ADMOB_APP_ID]"/>

Firebase google-service.json 가져오기

Firebase console로 이동합니다.

그리고 새 프로젝트를 만듭니다.

프로젝트 생성후 Android를 추가하여 시작합니다.

package name을 등록하고 나면 다음과 같이 json 파일을 다운로드 받을 수 있게됩니다.

다운 받은 파일을 아래와 같이 android/app 폴더 밑에 복사해줍니다.

그 다음 3단계와 4단계는 다음을 눌러서 완료합니다.

com.google.gms:google-services 추가

다음 내용은 firebase document에서 가져왔습니다.

android/build.gradle

android/app/build.gradle

Main 함수에서 Firebase와 애드몹 초기화하기

runApp을 하기 전에 초기화를 해야 하는 사항들이 있을때 실행해주어야 하는 Code입니다.

Firebase를 초기화해줍니다.

초기화를 대기하기 위해서 await를 사용하고 따라서 main 함수가 Future type을 갖게 되고 async 함수가 됩니다.

Banner 생성하고 노출 그리고 제거하기

_ad = BannerAd(adUnitId: 광고 단위 Id, size: 배너 사이즈)..load()..show();

위 코드만 실행해주면 어떤 화면에서든지 광고나 하단에 오버랩되어 나옵니다.

위치나 배너 사이즈등 다양한 Option들이 있으나 저는 일단 Default인 하단에 보이도록 하겠습니다.

제거하는 방법은 _ad.dispose() 헤주면 됩니다.

여기까지만 하면 광고를 노출하는 것은 완성되었습니다.

하지만 Flutter의 특성상 Layout에 오버랩이 되고 여기에 따라서 앱 영역을 조정을 해주어야 하는 문제가 있습니다.

그래서 다음 내용은 이를 해결하기 위해서 제가 bloc로 구현한 ad 관리 모듈 관련 내용입니다.

Flutter에서 배너 광고 노출의 단점

Android Native App을 만들때에는 광고 노출 위치가 자동으로 처리가 되었는데 Flutter는 저 위치에 WebView로 된 Widget이 오버랩됩니다.

그래서 광고 영역에 대해서 Padding을 해주어야 합니다.

애드몹 광고용 module

따라서 별도로 광고를 위한 모듈을 별도로 만들었습니다.

AdBannerContainer

그래서 AdBanner를 자동으로 Padding을 넣는 Container Widget을 별도로 만들었습니다.

AdBloc

AdBannerContainer에서 Padding을 처리해주기 위해서는 배너 광고의 상태 관리가 필요합니다.

그래서 InheritedWidget, Provider 모두 다 사용해봤지만 Bloc가 가장 깔끔하게 사용이 가능했습니다.

다음은 AdMob 광고 상태를 관리하기 위해 만든 AdBloc입니다.

  • AdStateNone – 광고 없음
  • AdStateBannerBottomLoading – 하단 배너 광고 로딩중
  • AdStateBannerBottom – 하단 배너 광고 노출

다사 AdBannerContainer를 볼까요?

AdBloc의 State에 따라서 처리를 해주도록 하였습니다.

AdBannerInfo

Smart Banner 높이 구하기

Banner의 사이즈는 기본적으로 Smart Banner를 사용하겠습니다.

그럼 아래 _getSmartBannerHeight function에 있는것과 같이 계산이 됩니다.

AdUnitId

BannerAd.testAdUnitId 를 사용하면 Test 광고가 됩니다.

따라서 testAd 인자가 default는 false이지만 이를 true로 호출하면 test 광고가 나옵니다.

그리고 별도의 ad_info.dart 파일을 별도로 만들어서 다음과 같이 추가했던 애드몹 광고 단위의 ID를 넣어서 사용하도록 하였습니다.

여기에 만드신 직접 애드몹 광고를 넣으시면 됩니다.

마치며

좀 복잡한 설명이 되었는데요.

util/ads에 파일을 모아놨고 main.dart만 참조하면 되므로 github에 있는 code 참조를 하시면 이해하시기 도움이 될것 같습니다.

Leave a Reply