플러터 앱에 구글 애드몹(admob) 광고 넣기

플러터 앱에 광고를 달아서 수익 창출을 해보아요.💰

배너광고와 전면광고를 플러터 앱에 구현해 보겠습니다.

 

 

 

1. google_mobile_ads 패키지 설치

패키지를 설치해 주세요.

https://pub.dev/packages/google_mobile_ads

google_mobile_ads | Flutter package

flutter pub add google_mobile_ads

 

 

 

2. admob에 앱 ID, 광고 ID 생성하기

아래 링크로 들어가서 애드몹 계정을 생성합니다. 구글 계정을 사용하시면 됩니다.

https://apps.admob.com/

AdMob

 

저는 이미 만들어둔 것이 있어서 아래 화면처럼 보이는데요.

첫 번째로 앱 추가를 할 때는 화면만 다르고 아래 화면의 앱 추가 버튼과 동일한 기능이에요.

앱 추가 버튼을 클릭합니다.

 

안드로이드를 선택하고 아직 스토어에 앱이 등록되어있지 않으므로 아니요를 선택하고 계속을 클릭합니다.

앱 이름을 입력하고 앱 추가를 클릭합니다.

완료버튼을 클릭하면 안드로이드 앱 추가가 완료되었습니다.

완전히 동일한 방식으로 ios 앱 추가도 진행해 주세요.

 

앱을 추가하고 나면, 앱에 광고 단위를 추가해주어야 하는데요.

광고 단위는 광고의 종류를 말하는데, 자신의 앱에 구현할 광고의 종류를 선택해 주시면 됩니다.

 

광고 단위는 6가지가 있는데요. 저는 배너와 전면 광고를 구현할 예정이어서 먼저 배너를 선택합니다.

 

광고 단위 이름은 간단하게 배너광고라고 입력하고 광고 단위 만들기를 클릭합니다.

 

광고 단위가 생성이 되었습니다.

그리고 아래 앱 ID와 광고 ID를 메모장에 복사해 둡니다.

앱 ID는 공통이고 광고 ID는 광고단위마다 다른 값으로 생성이 돼요.

실제로 이 아이디들을 이용하여 광고 수익화가 가능해요.

 

동일한 방식으로 전면광고도 하나 만들어두고 광고 ID를 복사해 둡니다.

 

등록을 완료하게 되면 2개의 안드로이드 앱과 ios앱을 추가한 상태가 되고,

각각의 플랫폼마다 배너광고와 전면광고를 등록해 준 상태입니다.

 

 

 

3. 설정

1) AndroidManifest.xml

아래 새로 추가한 meta-data 태그에 위에서 발급받은 안드로이드 앱 ID를 입력해 주세요.

 

android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    ...
    <application
        android:label="Timer!"
        android:name="${applicationName}"
        android:icon="@mipmap/launcher_icon">
       	...
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
        <meta-data 
            android:name="com.google.android.gms.ads.APPLICATION_ID" 
            android:value="안드로이드 앱ID를 입력해주세요." />
        ...

    </application>
</manifest>

 

 

 

2) info.plist

info.plist 파일에 마찬가지로 ios 앱 ID도 입력해 주세요.

ios/Runner/Info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	...
	<key>GADApplicationIdentifier</key>
	<string>ios 앱ID를 넣어주세요</string>
</dict>
</plist>

 

 

 

4. 코드 작성

1) main 함수

admob을 사용하기 위해 메인함수에 초기화 함수를 호출해주어야 합니다.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize(); //광고 초기화
  ...
}

 

 

 

2) AdMobService 클래스

클래스를 작성하기 앞서 개발환경에서 광고 테스트를 위해서는 테스트 광고 ID값을 알아야 하는데요.

테스트 광고 ID값은 아래 링크에서 확인하실 수 있어요.

 

[안드로이드]

https://developers.google.com/admob/android/test-ads?hl=ko#sample_ad_units

테스트 광고 사용 설정  |  Android  |  Google for Developers

안드로이드 테스트 광고 ID 목록

App Open	ca-app-pub-3940256099942544/9257395921
Adaptive Banner	ca-app-pub-3940256099942544/9214589741
Fixed Size Banner	ca-app-pub-3940256099942544/6300978111
Interstitial	ca-app-pub-3940256099942544/1033173712
Interstitial Video	ca-app-pub-3940256099942544/8691691433
Rewarded	ca-app-pub-3940256099942544/5224354917
Rewarded Interstitial	ca-app-pub-3940256099942544/5354046379
Native Advanced	ca-app-pub-3940256099942544/2247696110
Native Advanced Video	ca-app-pub-3940256099942544/1044960115

 

[IOS]

https://developers.google.com/admob/ios/test-ads?hl=ko#demo_ad_units

테스트 광고 사용 설정  |  iOS  |  Google for Developers

ios 테스트 광고 ID 목록

 

App Open	ca-app-pub-3940256099942544/5575463023
Adaptive Banner	ca-app-pub-3940256099942544/2435281174
Fixed Size Banner	ca-app-pub-3940256099942544/2934735716
Interstitial	ca-app-pub-3940256099942544/4411468910
Interstitial Video	ca-app-pub-3940256099942544/5135589807
Rewarded	ca-app-pub-3940256099942544/1712485313
Rewarded Interstitial	ca-app-pub-3940256099942544/6978759866
Native Advanced	ca-app-pub-3940256099942544/3986624511
Native Advanced Video	ca-app-pub-3940256099942544/2521693316

 

AdMobService 클래스는 배너광고 ID값과 전면광고ID값을 가져오는 함수를 static으로 구현합니다.

개발환경에서는 반드시 테스트 광고ID 값을 사용해야 합니다.

import 'dart:io';

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

class AdMobService {
  //배너광고
  //앱 개발시 테스트광고 ID로 입력
  static String? get bannerAdUnitId {
    if (Platform.isAndroid) {
      return 'ca-app-pub-3940256099942544/6300978111';
    } else if (Platform.isIOS) {
      return 'ca-app-pub-3940256099942544/2934735716';
    }
    return null;
  }

  //전면 광고
  static String? get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return 'ca-app-pub-3940256099942544/1033173712';
    } else if (Platform.isIOS) {
      return 'ca-app-pub-3940256099942544/4411468910';
    }
    return null;
  }

  static final BannerAdListener bannerAdListener = BannerAdListener(
    onAdLoaded: (ad) => debugPrint('Ad loaded'),
    onAdFailedToLoad: (ad, error) {
      ad.dispose();
      debugPrint('Ad fail to load: $error');
    },
    onAdOpened: (ad) => debugPrint('Ad opened'),
    onAdClosed: (ad) => debugPrint('Ad closed'),
  );
}

 

스토어에 앱 출시를 할 때는 잊지 말고 admob에서 발급받은 광고 ID로 교체해주셔야 해요.

 

 

 

3) UI

저는 타이머 앱의 하단에 배너가 노출이 되도록 할 것이고, 타이머를 새로 추가할 때 전면광고가 보이도록 해보았어요.

 

(1) 배너 광고 추가

_bannerAd 변수를 선언해주고 객체를 초기화 해줍니다.

그리고 Scaffold 위젯의 하단에 위젯을 배치해주었습니다. 

...
class HomePage extends StatefulWidget {
  const HomePage({
    super.key,
  });
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  BannerAd? _bannerAd; //추가

  @override
  void initState() {
    super.initState();
    _createBannerAd(); //추가
  }
  //배너 광고 생성
  void _createBannerAd() {
    _bannerAd = BannerAd(
      size: AdSize.fullBanner, //배너 사이즈
      adUnitId: AdMobService.bannerAdUnitId!, //광고ID 등록
      listener: AdMobService.bannerAdListener, //리스너 등록
      request: const AdRequest(),
    )..load();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
	  ...
      //화면의 하단에 배너 노출
      bottomNavigationBar: _bannerAd == null
          ? Container()
          : Container(
              margin: const EdgeInsets.only(bottom: 12),
              height: 75,
              child: AdWidget(
                ad: _bannerAd!,
              ),
            ),
    );
  }
}

 

 

 

(2) 전면 광고 추가

저는 새로운 타이머를 추가할 때 전면 광고를 노출 시키기로 했기 때문에, 저장 버튼을 클릭하면 _showInterstitialAd 함수를 호출하여 전면광고가 보이도록 했습니다.

...
class TimerBottomSheet extends StatefulWidget {
  const TimerBottomSheet({super.key});

  @override
  State<TimerBottomSheet> createState() => _TimerBottomSheetState();
}

class _TimerBottomSheetState extends State<TimerBottomSheet> {
  InterstitialAd? _interstitialAd; //추가

  @override
  void initState() {
    super.initState();
    _createInterstitialAd(); //추가
  }
  //전면 광고 생성
  void _createInterstitialAd() {
    InterstitialAd.load(
      adUnitId: AdMobService.interstitialAdUnitId!,
      request: const AdRequest(),
      adLoadCallback: InterstitialAdLoadCallback(
        onAdLoaded: (ad) => _interstitialAd = ad,
        onAdFailedToLoad: (error) => _interstitialAd = null,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      ...
 	);
  }
  //타이머 저장 버튼 클릭시 전면광고가 보이도록 함
  Future<void> onSavePressed() async {
  	...
    _showInterstitialAd();
  }

  void _showInterstitialAd() {
    if (_interstitialAd != null) {
      _interstitialAd!.fullScreenContentCallback = FullScreenContentCallback(
        onAdDismissedFullScreenContent: (ad) {
          ad.dispose();
        },
        onAdFailedToShowFullScreenContent: (ad, error) {
          ad.dispose();
          _createInterstitialAd();
        },
      );
      _interstitialAd!.show();
      _interstitialAd = null;
    }
  }
}

 

 

 

5. 테스트

배너 광고 모습입니다.

테스트 광고ID를 사용해야 하기 때문에 테스트 모드라는 표시가 뜹니다.

 

그리고 타이머를 추가하고 나면 전면 광고가 보입니다.😅