[flutter] 플러터에 구글 애드몹 (광고)붙이기 android, ios 적용방법

목차

플러터에 광고 붙이고 수익을 내보자!

 

1. 사전 준비

- 애드몹은 구글에서 제공하는 광고 서비스 입니다. 간단한 가입만으로 누구든 광고를 게시하고 수익화를 할 수 있습니다. 플로터 뿐만 아니라 거의 모든 서비스에 적용할수 있으니 참고 바랍니다.

배너의 종류에는 크게 4가지 형태가 있습니다.

1-0 애드몹에서 사용가능한 배너의 종류와 형태를 알아보자

배너 : 가장 일반적인 광고 형태. 앱에서 일정 공간을 배너 형태의 광고로  채울 수 있다.

 

전면 : 화면 전체를 덮는 전체 화면 광고. 사용자가 닫을 때까지 게재되어 다음 화면을 넘어가는 과정에 주로 사용합니다.

 

보상형 전면 광고 : 짧은 동영상 시청하고 보상을 받을 수 있는 광고입니다.

 

리워드 : 광고 시청을 선택한 사용자에게 리워드를 제공하는 전체 페이지 광고 형식입니다. 보상형 전면 광고와는 달리 사용자가 광고 시청을 선택해야 합니다.

 

네이티브 고급광고 앱의 디자인과 스타일에 최적화된 형태로 실행할 수 있는 광고. 광고 배치 방법 및 위치를 정할 수 있다.

 

앱 열기 : 사용자가 앱을 열거나 앱으로 전환하는 경우 표시되는 광고 형식입니다. 광고 오버레이 로드 화면입니다.

1-1. pubspec.yaml 파일 설정하기

- 프로젝트에 광고를 추가하려면 google_mobile_ads플러그인을 사용해야 한다. flutter프로젝트의 pubspec.yaml파일에 추가한다.

* 플러그인 버전에 따라서 설정이 달라질수 있으니 특별한 이유가 없다면 아래 버전을 사용하자

dependencies:
  flutter:
    sdk: flutter
  .
  .
  .
  google_mobile_ads: ^2.3.0

1-2 애드몹 사이트 설정, 배너 설정

- https://apps.admob.com 사이트 접속후 사용중인 구글계정으로 로그인을 합니다.

- 가입이 완료되면 왼쪽의 [앱] 탭을 누르고 [첫 번째 앱 추가]버튼을 눌러줍니다.

- Android, iOS앱을 따로 생성해줘야 합니다. 

- 앱스토어에 앱이 등록되어 있나요 질문에 [아니요]클릭

- 앱이름은 프로젝트 이름및 내가 알기 쉬운 이름을 넣어주고 [완료] 버튼을 누릅니다.

- [앱 개요]탭에서 [광고 단위 추가]버튼을 눌러주세요

- [배너] 광고 선택-> 광고 만들기

- 아래 같은 화면에서 [앱 ID], [단위ID]가 나중에 필요하니 메모해둡니다.

2. Android, iOS 앱ID설정 및 프로젝트 설정

- 위의 항목에서 생성한 광고를 앱에 삽입하기 위해선 몇가지 프로젝트 설정이 필요합니다.

- 설정하는 방법은 네이티브 안드로이드와 iOS앱을 설정하는 방법과 같으니 참고 바랍니다.

2-1. Android-AndroidManifest.xml AppID설정하기

- 프로젝트경로에서 android/app/src/main/AndroidManifest.xml파일을 다음과 같이 수정합니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    .
    .
    .
    <application
        android:label="xxx"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        
        //이부분 부터~~
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxx-xxxxxx"
            />
       // 이 부분까지 입력    
       
        <activity
            android:name=".MainActivity"
            android:showWhenLocked="true"
            android:turnScreenOn="true"
            android:exported="true"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">

 

2-2. iOS Info.plist AppID설정하기

- 플루터 프로젝트내 경로에서 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>ca-app-pub-xxxxxxing>
    
    .
    .
    .
    .
</dict>
</plist>

3. BannerAd 프로젝터에 적용하기 및 API사용 방법

1. 메인 함수 광고 기능 초기화 하기

import 'package:google_mobile_ads/google_mobile_ads.dart';

void main() async {

//메인함수에서 async,await키워드를 사용할 수 있도록 해준다.
  WidgetsFlutterBinding.ensureInitialized();
  
  //광고 초기화 함수
  await MobileAds.instance.initialize();
  .
  .
  .
  .
  .
}

2. 프로젝트 페이지에 광고 (BannerAD 넣기)

  @override
  Widget build(BuildContext context, WidgetRef ref) {
  
    //배너 생성
    BannerAd banner = BannerAd(
      listener: BannerAdListener(
        onAdFailedToLoad: (Ad ad, LoadAdError error) {},
        onAdLoaded: (_) {},
      ),
      size: AdSize.banner,
      adUnitId: Platform.isAndroid
          ? "ca-app-pub-xxxx"
          : "ca-app-pub-xxxx",
      request: AdRequest(),
    )..load();
    
  return Container(
  			Column(children: [
                SizedBox(
                width: MediaQuery.of(context).size.width,
                height: 50,
                child: AdWidget(
                  ad: banner,
                ),
              ),
            ],
  );

* 주의 - 광고 테스트하기 

개발도중에 실제 광고 ID를 사용하는건 규정 위반입니다. 규정을 지키기 위해서 아래 두가지 방법중 하나를 선택하여 개발해야 합니다.

1. 테스트 광고 ID를 사용해서 개발한다. (배포 시 실제 광고 ID로 교체)

2. Admob사이트에서 [설정] - [기기 테스트]에서 개발중인 테스트 기기를 등록합니다. (추천)

 

자세한 방법을 아래 사이트를 참고해 주세요.

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

4. BannerAdListener이벤트 조금더 자세히 알아보기

- 배너를 생성할 때 리스너 함수에 여러가지 이벤트 들을 설정할 수 있습니다.

listener: BannerAdListener(
    onAdFailedToLoad: (Ad ad, LoadAdError error) {},
    onAdLoaded: (_) {},
    .
    .
    .
    .
  ),

 

onAdLoaded	광고가 성공적으로 로딩됐을 때
onAdFailedToLoad	광고 로딩이 실패했을 때
onAdOpened	광고를 눌렀을 때
onAdClosed	광고를 닫았을 때
onAdImpression	광고를 조회했을 때