[Flutter] 구글 애드몹 연동 - ( week 5 )

AdMob

Advertising on Mobile의 줄임말로 구글에서 제공하는 모바일 광고 네트워크 및 수익 창출 플랫폼이다.

웹에서 널리 사용되는 AdSense의 모바일 버전으로 볼 수 있으며 앱에 코드를 연동하여 자동으로 사용자들에게 타기팅된 광고를 띄워주고 이로 인해 발생한 광고 수익을 분배해 준다.추가로 광고 네트워크 최적화, 광고 실적 및 사용자 참여도 분석 등의 기능도 제공된다.

 

GoogleAdMob

 

AdMob 수익 창출 전략

 

애드몹 연동

mymemo 앱에 구글 애드몹을 연동하는데 광고 종류 중 하단의 배너를 구현해 본다.

실제 광고가 올라가기 위해서는 심사가 필요하기 때문에 테스트 ID를 활용해서 앱에 띄워본다.

 

가입한 AdMob 사이트에 접속하면 관리자 페이지가 뜨는데 '시작하기'를 눌러 새로운 앱을 생성한다.

 

 

플랫폼은 안드로이드를 대상으로 하며 아직 앱이 스토어에 등록된 상태가 아니기 때문에 아니요를 선택한다.

 

 

앱의 이름은 원하는 대로 작성한다.  프로젝트 이름 그대로 mymemo로 진행하도록 할 것이다.

 

 

사용자 측정항목을 체크하면 보고서를 받아 볼 수 있다.

 

 

앱 추가가 완료되면 생성된 앱과 그 앱에 대한 정보가 표시된다.

 

그리고 앱설정을 눌러서 앱 아이디가 표시되는 창을 켜놓고 프로젝트로 돌아간다.

 

 

앱 아이디는 이후 프로젝트에서 앱을 연동할 때 필요한 정보이다.

 

패키지 설치

프로젝트에서 AdMob을 사용하기 위한 패키지를 설치한다.

 

google_mobile_ads

 

패키지 문서 페이지에서 설치 명령어를 복사하고 터미널에서 실행한다.

flutter pub add google_mobile_ads

 

설치가 끝난 후 설정이 필요하다.

 

' android > app > src > main > AndroidManifest.xml ' 파일에서 마지막 meta data 태그 뒤에 하나를 추가해 준다.

        <meta-data

            android:name="com.google.android.gms.ads.APPLICATION_ID"

            android:value="여기에 APP ID"/>

value에는 아까 띄워놓은 AdMob 페이지에서 AppID를 찾아서 붙여 넣는다.

 

ios의 경우에도 app id를 추가해 준다.

 

' ios > Runner > info.plist ' 에서 마지막 key뒤에 추가해 준다.

    <key>GADApplicationIdentifier</key>

    <string>여기에 APP ID</string>

 

마찬가지로 string안에는 앱 아이디를 입력한다.

 

MobileAds 인스턴스

MobileAds 클래스의 인스턴스를 초기화한다.

 

main.dart

void main() async {

  WidgetsFlutterBinding.ensureInitialized();

  prefs = await SharedPreferences.getInstance();

  MobileAds.instance.initialize();

 

그리고 _HomePageState 내부에 띄울 광고인 BannerAd 클래스를 생성한다.

class _HomePageState extends State<HomePage> {

  final BannerAd myBanner = BannerAd(

    // Test 광고 ID, 광고 승인받은 후 생성한 광고 unit ID 로 바꾸기

    adUnitId: Platform.isAndroid

        ? 'ca-app-pub-3940256099942544/6300978111' // Android ad unit ID

        : 'ca-app-pub-3940256099942544/2934735716', // iOS ad unit ID

    size: AdSize.fullBanner,

    request: AdRequest(),

    listener: BannerAdListener(

      onAdFailedToLoad: (ad, error) {

        ad.dispose();

      },

    ),

  );

이때 Platform은 dart:io 패키지의 클래스이다.

 

 

배너 광고의 인스턴스트를 초기화했으며 광고를 띄우기 위해서는 해당 인스턴스를 로드하는 과정이 필요하다.

 

 

  @override

  void initState() {

    // TODO: implement initState

    super.initState();

  }

 

 

super.initState()는 기존에 initState에 지정된 로직들을 실행하게 다는 의미로 여기에 추가적으로 로직을 작성하면 State가 처음 만들어질 때 원하는 동작을 실행할 수 있게 된다.

 

  @override

  void initState() {

    // TODO: implement initState

    super.initState();

    myBanner.load();

  }

 

배너 인스턴스를 로드한다.

 

배너를 로드할 위치는 앱의 최하단으로 BottomNavigationBar 자리에 광고를 넣어보도록 한다.

          bottomNavigationBar: Container(

            alignment: Alignment.center,

            width: myBanner.size.width.toDouble(),

            height: myBanner.size.height.toDouble(),

            child: AdWidget(ad: myBanner),

          ),

 

여기까지 만들고 실행해서 테스트를 해보려는데 에러가 발생한다.

 

Android SDK built for x86 in debug mode...

에러를 쭉 훑어보니 android > app > build.gradle 에서 버전을 수정해 보라고 한다. 최소 버전은 19

 

    defaultConfig {

        applicationId "com.example.mymemo_admob"

        minSdkVersion 19

 

그리고 다시 실행해 보니 이번에는 Multidex 관련 에러가 발생했다.

Flutter tool can add multidex support. The following file will be added by flutter: android/app/src/main/java/io/flutter/app/FlutterMultiDexApplication.java

 

아까 버전을 수정한 파일에서 다음 코드들을 추가한다.

 

    defaultConfig {

 

        multiDexEnabled true

    }

dependencies {

    implementation 'com.android.support:multidex:1.0.3'

}

이후 실행에서 문제없이 동작하게 된다.