[Flutter] Admob

2021-05-03 hit count image

이번 블로그 포스트에서는 Flutter로 생성한 앱에 google_mobile_ads 패키지를 사용해서 Admob 광고를 표시하는 방법에 대해서 살펴봅시다.

개요

이번 블로그 포스트에서는 google_mobile_ads 패키지를 사용해서 Admob 광고를 표시하는 방법에 대해서 소개합니다.

이 블로그 포스트에서 Admob의 배너 광고를 표시하는 방법에 대해서 알아볼 예정이며, 소스 코드는 아래에 링크에서 확인할 수 있습니다.

Admob 설정

Flutter 프로젝트에서 Admob을 사용하기 위해서는, Admob 서비스를 이용할 필요가 있습니다.

구글 애드몹 가입

구글 애드몹(Google Admob) 사이트로 이동하여 회원가입을 합니다. 일반적인 회원가입/로그인 절차임으로 설명을 생략합니다.

Admob 생성

구글 애드몹(Google Admob) 사용법에 대해서 알아봅니다. 구글 애드몹(Google Admob)을 사용하기 위해 구글 애드몹(Google Admob) 사이트에 회원가입을 하고 로그인을 하면 아래와 같은 화면을 볼 수 있습니다.

signin google admob

하단에 있는 GET STARTED 버튼을 눌러 구글 애드몹(Google Admob) 사용을 시작합니다.

configure admob

이미 앱이 마켓에 등록되어있는지 여부를 선택합니다. 우리는 아직 앱을 등록하지 않은 상태이므로 NO를 선택합니다.

configure app name on admob

구글 애드몹(Google Admob)을 사용하기 위해 앱 이름을 작성하고 사용할 플랫폼을 선택합니다. 우리는 우선 iOS를 선택하여 진행하겠습니다.

completed to configure

구글 애드몹(Google Admob) 등록이 완료되었습니다. 친절하게 하단에 다음 단계에 대한 설명이 잘 나와있습니다.

  1. Flutter에 Admob을 설정할때 필요한 App ID를 복사해둡니다.
  2. 광고 타입(ad unit)을 구글 애드몹(Google Admob)에서 설정합니다.
  3. 앱을 앱스토어에 등록하면 구글 애드몹(Google Admob)에서 연결해줘야합니다.

하단에 있는 NEXT: CREATE AD UNIT을 눌러 광고 타입 설정화면으로 이동합니다.

select advertisement type

우리는 일단 배너 광고 사용해 보겠습니다. Banner의 하단에 SELECT버튼을 선택합니다.

input banner name

해당 배너의 이름을 설정합니다. 구글 애드몹(Google Admob) 서비스에서 해당 배너를 쉽게 찾기 위한 이름이므로 자신이 쉽게 인식할 수 있는 이름을 설정합니다. 입력을 완료했으면 CREATE AD UNIT 버튼을 눌러 설정을 끝냅니다.

finished configuration

구글 애드몹(Google Admob)의 배너 설정을 완료했습니다. 다시 나온 App ID와 배너의 Ad Unit ID를 잘 복사해 둡니다.

안드로이드도 위와 같은 방식으로 배너 광고를 생성하여 App ID와 Ad Unit ID를 생성합니다.

프로젝트 생성

그럼 google_mobile_ads 패키지를 사용해서 Admob 광고를 표시하기 위해서, Flutter 프로젝트를 새로 만들어 봅시다. 다음 명령어를 사용하여 Flutter 프로젝트를 생성합니다.

flutter create admob_example
cd admob_example

google_mobile_ads 패키지 설치

Flutter 프로젝트에서 Admob 광고를 표시하기 위해서는 google_mobile_ads 패키지를 설치할 필요가 있습니다. 다음 명령어를 실행하여 google_mobile_ads 설치합니다.

flutter pub pub add google_mobile_ads

App ID 설정

이제 google_mobile_ads 사용하여 Admob 광고를 표시하기 위해서, iOS/Android 에 App ID를 설정할 필요가 있습니다.

Android에 App ID 설정

안드로이드에 Admob의 App ID를 설정하기 위해, android/app/src/main/AndroidManifest.xml 파일을 열고 다음과 같이 수정합니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.admob_example">
   <application
        ...>
        <meta-data
              android:name="com.google.android.gms.ads.APPLICATION_ID"
              android:value="[YOUR ANDROID APP ID]"/>
        ...
    </application>
</manifest>

iOS에 App ID 설정

iOS에 Admob의 App 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>[YOUR iOS APP ID]</string>
  <key>LSRequiresIPhoneOS</key>
  <true/>
  <key>SKAdNetworkItems</key>
  <array>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>cstr6suwn9.skadnetwork</string>
    </dict>
  </array>
</dict>
</plist>

google_mobile_ads 사용방법

그럼 이제 google_mobile_ads을 사용해서 Admob 광고를 표시하기 위해, main.dart 파일을 열고 다음과 같이 수정합니다.

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

const Map<String, String> UNIT_ID = kReleaseMode
    ? {
        'ios': '[YOUR iOS AD UNIT ID]',
        'android': '[YOUR ANDROID AD UNIT ID]',
      }
    : {
        'ios': 'ca-app-pub-3940256099942544/2934735716',
        'android': 'ca-app-pub-3940256099942544/6300978111',
      };

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await MobileAds.instance.initialize();

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    TargetPlatform os = Theme.of(context).platform;

    BannerAd banner = BannerAd(
      listener: AdListener(
        onAdFailedToLoad: (Ad ad, LoadAdError error) {},
        onAdLoaded: (_) {},
      ),
      size: AdSize.banner,
      adUnitId: UNIT_ID[os == TargetPlatform.iOS ? 'ios' : 'android']!,
      request: AdRequest(),
    )..load();

    return Scaffold(
      appBar: AppBar(
        title: Text('Admob'),
      ),
      body: Center(
        child: Container(
          height: 50,
          child: AdWidget(
            ad: banner,
          ),
        ),
      ),
    );
  }
}

소스 코드를 하나하나 자세히 살펴봅시다.

import 'package:flutter/foundation.dart';

Admob 광고는 개발 환경일 때, 자신의 AD UNIT ID를 사용하면 안됩니다. 자신의 개발 환경에서 자신의 AD UNIT ID를 사용할 경우, 실제 광고 트래픽이 아닌 부정 트래픽으로 간주될 수 있으며, 자주 사용되면 광고 게제를 차단 당할 수 있습니다. 따라서 이번 예제에서는 kReleaseMode을 사용해서 현재 실행중인 상태가 debug인지 release인지 구별할 예정입니다. kReleaseMode를 사용하기 위해서는 foundation.dart를 추가해야합니다.

import 'package:google_mobile_ads/google_mobile_ads.dart';

google_mobile_ads을 사용하기 위해 추가하였습니다.

const Map<String, String> UNIT_ID = kReleaseMode
    ? {
        'ios': '[YOUR iOS AD UNIT ID]',
        'android': '[YOUR ANDROID AD UNIT ID]',
      }
    : {
        'ios': 'ca-app-pub-3940256099942544/2934735716',
        'android': 'ca-app-pub-3940256099942544/6300978111',
      };

kReleaseMode을 사용해서 현재 환경이 release인 경우, 우리가 만든 AD UNIT ID를 사용하도록 설정하였습니다. 그렇지 않은 경우, Admob에서 제공하는 테스트용 AD UNIT ID를 사용하도록 하였습니다.

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await MobileAds.instance.initialize();

  runApp(MyApp());
}

이제 google_mobile_ads을 사용하여 Admob 광고를 표시하기 위해 MobileAds을 초기화할 필요가 있습니다. WidgetsFlutterBinding.ensureInitialized();을 사용하여 Flutter가 초기화가 잘 되었는지 확인한 후, await MobileAds.instance.initialize();을 호출하여 MobileAds를 초기화 합니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
}

간단한 샘플 코드를 작성하기 위해 Stateless 위젯을 생성하였습니다.

이제 실제 배너 광고를 표시하는 소스 코드를 자세히 살펴봅시다.

@override
Widget build(BuildContext context) {
  TargetPlatform os = Theme.of(context).platform;

  BannerAd banner = BannerAd(
    listener: AdListener(
      onAdFailedToLoad: (Ad ad, LoadAdError error) {},
      onAdLoaded: (_) {},
    ),
    size: AdSize.banner,
    adUnitId: UNIT_ID[os == TargetPlatform.iOS ? 'ios' : 'android']!,
    request: AdRequest(),
  )..load();

  return Scaffold(
    appBar: AppBar(
      title: Text('Admob'),
    ),
    body: Center(
      child: Container(
        height: 50,
        child: AdWidget(
          ad: banner,
        ),
      ),
    ),
  );
}

각 플랫폼별 AD UNIT ID가 다르므로, 현재 Flutter가 실행중인 플랫폼을 구별할 필요가 있습니다. 이를 위해 TargetPlatform을 사용했습니다.

TargetPlatform os = Theme.of(context).platform;

그리고 google_mobile_ads에서 제공하는 BannerAd 클래스를 사용하여 배너 광고를 생성하였으며, Cascade operator를 사용하여, 생성과 동시에 load() 함수를 실행하여, 광고를 불러왔습니다.

BannerAd banner = BannerAd(
  listener: AdListener(
    onAdFailedToLoad: (Ad ad, LoadAdError error) {},
    onAdLoaded: (_) {},
  ),
  size: AdSize.banner,
  adUnitId: UNIT_ID[os == TargetPlatform.iOS ? 'ios' : 'android']!,
  request: AdRequest(),
)..load();

이때, AdListener를 사용하여 광고 관련 이벤트에 콜백 함수를 등록할 수 있으며, AdRequest의 여러 파라메터들을 통해 좀 더 효율적으로 광고를 표시할 수 있습니다.

이렇게 생성한 광고를 AdWidget를 통해 화면에 표시할 수 있습니다.

AdWidget(
  ad: banner,
)

현재 예제는 간단히 광고를 표시하기 위한 방법을 Stateless 위젯을 사용하여 살펴보았습니다. 만약, Stateful 위젯을 사용한다면, 다음과 같이 위젯이 사라질 때, 광고를 제거해 줘야합니다.

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

완료

이것으로 google_mobile_ads 패키지를 사용하여 Admob 광고를 표시하는 방법에 대해서 알아보았습니다. 이제 여러분도, 여러분의 앱에 광고를 추가하여 수익을 발생시켜 보시기 바랍니다!

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

책 홍보

저도 블로그를 시작한지 1년만에...책을 다 써봅니다...인생에서 이런 날도 오는군요...타국에서 책 출판도 할 수 있고, 참 좋은 세상입니다.

이번에 쓴 책은 스무디 한 잔 마시며 끝내는 React Native입니다. 다양한 예제를 통해 리액트 네이티브를 공부할 수 있도록 구성해 보았습니다. 또한 설치부터 배포까지 실전에서도 사용할 수 있는 내용들을 담고 있습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
Posts