[Flutter] 구글 admob 적용

AdMob(Advertising on Mobile)이란, 구글에서 제공하는 모바일 광고 네트워크 및 수익 창출 플랫폼이다.

AdMob에서는 앱 오프닝 광고, 배너 광고, 전면 광고, 네이티브 광고, 보상형 광고 등을 지원한다.

 

1. 먼저 터미널 창에 아래 명령어를 입력하여 패키지를 설치한다.

(참고: https://pub.dev/packages/google_mobile_ads/install)

$ flutter pub add google_mobile_ads //작성일 기준 버전 3.0.0

설치 후 pubspec.yaml 파일에 아래와 같이 보인다면 정상적으로 설치에 성공한 것이다.

/* pubspec.yaml */
...
dependencies:
    ...
    google_mobile_ads: ^3.0.0 //버전명

 

2. 아래 링크를 클릭하여 AdMob 가입을 진행하고 "시작하기" 버튼을 눌러 AdMob을 사용할 앱을 추가해준다.

Google AdMob: 모바일 앱 수익 창출

앱 추가가 완료되면 좌측 메뉴 중 [앱] - [앱 설정] - [앱 정보] 에 있는 "앱 ID"를 복사한다.

3. 다시 코드로 돌아와 아래 코드들을 추가해준다.

- Android 설정 : android/app/src/main/ 위치의 AndroidManifest.xml 파일을 열어 아래 코드 입력

/* AndroidManifest.xml */
...
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application
        ...
        //아래 3줄 추가
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="좀 전에 복사한 앱ID"/>
    </application>
</manifest>

- iOS 설정 : ios/Runner/ 위치의 Info.plist 파일을 열어 아래 코드 입력

/* Info.plist */
...
<dict>
    ...
    //아래 2줄 추가
    <key>GADApplicationIdentifier</key>
    <string>좀 전에 복사한 앱ID</string>
</dict>
</plist>

4. 앱에서 사용할 수 있게 하기 위해 앱을 처음 시작할 때 MobileAds를 초기화해준다.

/* main.dart */
import 'package:google_mobile_ads/google_mobile_ads.dart';

void main() {
    MobildAds.instance.initialize();
    ...
}

5. 아래 코드를 통해 배너광고와 전면광고를 화면에 띄울 수 있다. (각 광고의 객체를 만든 후 load 해주기)

import 'dart:io'; //dart:html import 하지않도록 주의

...
class SamplePage extends StatefulWidget {
    ...
}
class _SamplePageState extends State<SamplePage> {
    InterstitialAd? _interstitialAd; //전면광고 객체 선언
    void loadInterAd() { //전면광고 load 메소드
        InterstitialAd.load(
            //Test ID이므로 광고 승인 후 실제 unit ID로 변경
            adUnitId: Platform.isAndroid
                ? 'ca-app-pub-3940256099942544/1033173712' //Android ad unit ID
                : 'ca-app-pub-3940256099942544/4411468910', //iOS ad unit ID
            request: const AdRequest(),
            adLoadCallback: InterstitialAdLoadCallback(
                onAdLoaded: (ad) {
                    _interstitialAd = ad;
                    _interstitialAd!.show();
                },
                onAdFailedToLoad: (LoadAdError error) {},
            ),
        );
    }
    
    //배너광고 객체 선언
    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();
            },
        },
    };
    
    @override
    void initState() { 
    //StatefulWidget에서 initState함수 코드 작성 시 위젯 처음 그려질 때 해당 코드 실행
        super.initState();
        loadInterAd(); //전면광고 load
        myBanner.load(); //배너광고 load
    }
    
    @override
    Widget build(BuildContext context) {
        ...
        //bottomNavigationBar에 넣는다면(예시)
        bottomNavigationBar: Container(
            alignment: Alignment.center,
            width: myBanner.size.width.toDouble(),
            height: myBanner.size.height.toDouble(),
            child: AdWidget(ad: myBanner), //myBanner의 인자를 가진 광고를 보여주겠다는 의미
        ),
    }
}

그 외 다른 광고도 아래 사이트를 참고하여 만들 수 있다.

배너  |  Flutter  |  Google for Developers