Flutter AdMob 광고 달기

앱에 AdMob 광고를 적용하는 일은 꽤나 복잡하다.

따라서 오늘은 적용한 내용들을 정리해 보고자 한다.

 

 

AdMob Android/iOS 앱 추가

 

일단은 AdMob에 가입이 되어 있어야 한다.

admob.google.com/intl/ko/home/

Google AdMob: 모바일 앱 수익 창출

AdMob에 가입하고 새로운 앱을 추가한다.

왼쪽의 앱을 선택하면 앱 추가 버튼이 보인다. 눌러보자.

AdMob 앱 추가

 

 

 

Admob 새 앱 설정

 

그러면 app-abs.txt 를 추가해야 한다는 말이 나오면서 광고 단위를 추가할 수 있다.

광고 단위 만들기를 선택한다.

 

Admob 광고단위 만들기

728x90

가볍게 배너 광고를 추가해 본다.

광고 단위 이름을 입력하고 광고 단위 만들기 버튼을 클릭한다.

Admob 광고단위 만들기

 

광고 단위를 만들면 아래와 같이 앱ID와 광고 단위 ID를 보여준다. 

해당 ID들은 나중에 앱 메뉴에서 앱설정과 광고단위를 누르면 다시 볼 수 있다.

Admob 구현안내

 

동일하게 iOS용 앱을 추가한 후, 앱ID를 Flutter 앱에 적용해 보자.

 

 

Android 앱ID 추가

 

android/app/src/main/AndroidManifast.xml 에 아래와 같이 앱ID를 추가한다.

AdMob 안드로이드 앱ID 추가

 

<meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="YOUR APP ID" />

 

 

iOS 앱ID 추가

ios/Runner/Info.plist에도 아래의 내용을 추가한다.

입력하는 김에 GADIsAdManagerApp 과 io.flutter.embedded_views_preview 항목도 추가한다.

<key>GADApplicationIdentifier</key>
<string>YOUR APP ID</string>
<key>GADIsAdManagerApp</key>
<true/>
<key>io.flutter.embedded_views_preview</key>
<true/>

 

google_mobile_ads 플러그인 적용

Flutter에서 적용하기 위해 AdMob 플러그인을 설치 해 보자.

 

기존에 admob_flutter 을 이용할 때는 firebase에 앱을 등록하고 구성 파일을 등록했어야 했는데 

구글에서 만든 이 플러그인을 사용하면 그 과정이 생략되는 듯 하여 매우 좋다.

 

pubspec.xml 파일에 아래와 같이 플러그인을 추가한다.

google_mobile_ads: ^0.12.1

Visual Studio Code에서는 자동으로 패키지를 받는데 만약 받아지지 않는다면 터미널에서 flutter pub get을 입력하면 패키지가 받아진다.

 

 

안드로이드 최소 SDK 버전이 19 이상이어야 한다고 한다.

android/app/build.gradle 에서 minSdkVersion을 19로 변경한다.

 

defaultConfig {
        applicationId "com.alice.in_the_fridge"
        minSdkVersion 19
        targetSdkVersion 30
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
}

 

광고를 표시할 화면의 상단에 설치한 플러그인을 추가한다.

 

 

import 'package:google_mobile_ads/google_mobile_ads.dart';

 

 

아래는 google_mobile_ads 에서 제공하는 소스이다.

 

 

import 'dart:async';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:flutter/material.dart';

class BannerAdWidget extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => BannerAdState();
}

class BannerAdState extends State<BannerAdWidget> {
  late BannerAd _bannerAd;
  final Completer<BannerAd> bannerCompleter = Completer<BannerAd>();

  @override
  void initState() {
    super.initState();
    _bannerAd = BannerAd(
      adUnitId: BannerAd.testAdUnitId,
      request: AdRequest(),
      size: AdSize.banner,
      listener: AdListener(
        onAdLoaded: (Ad ad) {
          print('$BannerAd loaded.');
          bannerCompleter.complete(ad as BannerAd);
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          ad.dispose();
          print('$BannerAd failedToLoad: $error');
          bannerCompleter.completeError(error);
        },
        onAdOpened: (Ad ad) => print('$BannerAd onAdOpened.'),
        onAdClosed: (Ad ad) => print('$BannerAd onAdClosed.'),
        onApplicationExit: (Ad ad) => print('$BannerAd onApplicationExit.'),
      ),
    );
    Future<void>.delayed(Duration(seconds: 1), () => _bannerAd.load());
  }

  @override
  void dispose() {
    super.dispose();
    _bannerAd.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<BannerAd>(
      future: bannerCompleter.future,
      builder: (BuildContext context, AsyncSnapshot<BannerAd> snapshot) {
        Widget child;

        switch (snapshot.connectionState) {
          case ConnectionState.none:
          case ConnectionState.waiting:
          case ConnectionState.active:
            child = Container();
            break;
          case ConnectionState.done:
            if (snapshot.hasData) {
              child = AdWidget(ad: _bannerAd);
            } else {
              child = Text('Error loading $BannerAd');
            }
        }

        return Container(
          width: _bannerAd.size.width.toDouble(),
          height: _bannerAd.size.height.toDouble(),
          color: Colors.blueGrey,
          child: child,
        );
      },
    );
  }
}

 

 

안드로이드 앱을 빌드하니 아래와 같은 에러가 뜬다.

D8: Cannot fit requested Classes in a single dex file (# methods: 68442 > 65536)

 

 

 

구글 검색을 해보니 이 오류는 앱과 참조하는 라이브러리가 65,536 개의 메서드를 초과 할 때 발생한다고 한다. 즉 앱이 Android 빌드 아키텍처의 한계에 도달했음을 의미 한다고 했다.

어쨌튼 가르쳐 준데로 android/app/build.gradle 에 아래의 내용을 추가한다.

 

defaultConfig {
        ........
        multiDexEnabled true
    }


dependencies {
    ...........
    implementation 'com.android.support:multidex:2.0.1'
}

 

안드로이드도 iOS도 정상적으로 작동된다.

인더프리지 광고 추가 - 안드로이드

 

인더프리지 광고추가 - iOS