플러터] AdMob 광고 추가하기

플러터에서 AdMob 광고를 추가하는 방법에 대해서 알아보자.

 

 

 

1. google_mobile_ads 패키지 추가하기

AdMob 광고를 추가하기 위해서 패키지를 이용해야 한다. pub.dev에서 admob으로 검색하면 다양한 패키지가 나오는데, 나는 google_mobile_ads 패키지를 이용하려고 한다.

 

프로젝트의 pubspec.yaml 파일에 google_mobile_ads를 추가하고 pub get을 실행한다.

 

 

 

2. AdMob에서 광고를 추가할 앱을 만들고, 광고 단위 만들기

AdMob에 회원가입을 한 후 광고를 추가할 앱을 추가한다. 그리고 해당 앱을 위한 광고 단위를 만든다. 광고 단위를 만들면 앱ID와 광고 ID를 확인할 수 있다. ID는 "ca-app-pub-XXXXXX"와 같은 형식을 가진다.

광고 단위를 만들 때, 사용되는 플랫폼(Android, iOS)를 선택해야 한다. 만약 둘다 사용한다면 둘 다 만들어야 한다.

 

 

 

3. 플랫폼 별 환경설정

안드로이드는 Android > app > src > main > AndroidManifest.xml 에 다음 정보를 추가한다.

<manifest>
    ...
    <application>
        ...
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="앱 ID" />
    </application>
</mainfest>

 

iOS는 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>앱 ID</string>

동일한 파일에 아래 코드도 추가한다.

<key>io.flutter.embedded_views_preview</key>
<true/>

 

 

 

4. 테스트 광고 ID를 가져올 AdHeler 클래스 만들기

앱을 출시하기 전에는 테스트 광고를 활성화해서 개발해야 한다. 만약 테스트 광고가 아닌 상태에서 광고를 너무 많이 클릭하면 계정이 무효 활동으로 신고될 위험이 있다.

 

테스트 광고 ID는 플랫폼마다 다르므로 다음과 같이 프로그래밍 방식으로 플랫폼에 맞는 테스트 광고 ID가 사용되도록 하자.

// ad_helper.dart
import 'dart:io';

class AdHelper {

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return 'ca-app-pub-3940256099942544/6300978111';
    } else if (Platform.isIOS) {
      return 'ca-app-pub-3940256099942544/2934735716';
    } else {
      throw new UnsupportedError('Unsupported platform');
    }
  }

  static String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/1033173712";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/4411468910";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get rewardedAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/5224354917";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/1712485313";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }
}

 

 

5. SDK 초기화하기

광고를 로드하기 전에 앱에서 SDK를 초기화하고 초기화가 완료되거나 30초의 제한 시간이 지나면 완료되는 MobildAds.instance.initialize()를 호출하여 앱에서 SDK를 초기화해야 한다. 이 작업은 앱을 실행하기 직전에 한 번만 하는 것이 좋다. 그래서 main()에 다음과 같이 작성하는 것이 좋다.

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();

  runApp(MyApp());
}

 

 

 

6. 릴리즈 모드 확인하는 방법

kRealeaseMode를 사용하면 현재 앱이 릴리즈모드인지 확인할 수 있다. 릴리즈 모드인 경우, true가 된다.

반대로 kDebugMode를 사용하면 현재 앱이 디버그모드인지 확인할 수 있다. 디버그모드인 경우, true가 된다.

이것을 이용해서 릴리즈 모드일 때는 자신의 광고 ID를 사용하고 디버그 모드일 때는 테스트 광고 ID를 사용하도록 하자.

import 'package:flutter/foundation.dart';

if (kReleaseMode) {
    // 릴리즈 모드에서 할 일
}

if (kDebugMode) {
    // 디버그 모드에서 할 일
}

 

 

 

7. 광고 형식에 따라 구현하기

AdMod은 다양항 광고 형식을 제공한다. 광고 형식에 따라 사용되는 위젯이 달라지게 된다.

 

여기서는 배너 광고를 생성하는 방법에 대해서 알아보겠다.

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();

  runApp(MaterialApp(
    home: const HomePage(),
  ));
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  @override
  void initState() {
    super.initState();

    _bannerAd = BannerAd(
      size: AdSize.banner,
      adUnitId: AdHelper.bannerAdUnitId,
      listener: BannerAdListener(
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        onAdFailedToLoad: (ad, err) {
          debugPrint('BannerAD failed to load: $err');
          ad.dispose();
        },
        onAdOpened: (ad) {
          // Called when an ad opens an overlay that covers the screen.
        },
        onAdClosed: (ad) {
          // Called when an ad removes an overlay that covers the screen.
        },
        onAdImpression: (ad) {
          // Called when an impression occurs on the ad.
        },
      ),
      request: const AdRequest(),
    );
    _bannerAd?.load();
  }

  @override
  void dispose() {
    super.dispose();
    if (_isLoaded && _bannerAd != null) {
      _bannerAd?.dispose();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AD Test')),
      body: Column(
        children: [
          const Expanded(
            child: Center(child: Text("HI")),
          ),
          if (_bannerAd != null  && _isLoaded)
            SizedBox(
              height: 60,
              child: AdWidget(ad: _bannerAd!),
            )
        ],
      ),
    );
  }
}

 

 

 

코드 작성 중 발생한 에러 내용

나는 google_mobile_ads 3.0.0을 사용하였다. 그러니 minSdkVersion이 19보다 낮다고 에러가 발생했다. 

uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [:google_mobile_ads] /Users/1986hz/StudioProjects/prayer_notebook/build/google_mobile_ads/intermediates/merged_manifest/debug/AndroidManifest.xml as the library might be using APIs not available in 16
Suggestion: use a compatible library with a minSdk of at most 16,
  or increase this project's minSdk version to at least 19,
  or use tools:overrideLibrary="io.flutter.plugins.googlemobileads" to force usage (may lead to runtime failures)

FAILURE: Build failed with an exception.

 

그래서 build.gradle에 있는 minSdkVersion을 19로 바꾸니 다음과 같은 에러가 발생했다.

ERROR:D8: Cannot fit requested classes in a single dex file (# methods: 78915 > 65536)
com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives: 
The number of method references in a .dex file cannot exceed 64K.
Learn how to resolve this issue at https://developer.android.com/tools/building/multidex.html

 

첨부된 주소의 내용을 확인해보니 21부터는 이 에러를 해결할 수 있다고 한다. 그래서 minSdkVersion을 21로 수정하였더니 에러가 없이 잘 작동한다.