flutter admob 광고 추가하기

오늘은 flutter로 만든 앱에 구글의 Firebase AdMob API를 사용하여 admob 광고를 첨부할 수 있는 firebase_admob 패키지에 대하여 알아보려 합니다.

이 포스팅을 쓰고 있는 현재는 배너 광고와 전면 광고, 그리고 보상형 광고만 지원합니다.

네이티브 광고는 아직 지원하지 않습니다.

AndroidManifest.xml

샘플 admob 앱 아이디는 아래와 같으므로, 해당 아이디 값을 참고하여 AndroidManifest 파일에 메타 데이터를 기록해줍니다.

ca-app-pub-3940256099942544~3347511713
<meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-3940256099942544~3347511713"/>

앱의 메인 코드에서 작성하는 FirebaseAdMob.instance.initialize에서도 같은 앱 아이디를 사용해야 합니다.

해당 포스트에서는 FirebaseAdMob.testAppId라는 상수를 이용하지만, 내부는 같은 아이디로 이루어져 있습니다.

  static final String testAppId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544~3347511713'
      : 'ca-app-pub-3940256099942544~1458002511';

testAppId의 내부를 보면 안드로이드의 경우와 아닐 경우로 나누어서 처리함을 알 수 있습니다.

보상형 광고의 차이점

배너 광고와 다르게 보상형 광고는 싱글톤으로 이루어져 있기 때문에 별도의 dispose 메소드가 필요없습니다.

에뮬레이터 및 기기 준비하기

안드로이드나 ios 앱으로 테스트할 장치를 준비해야 합니다.

준비했으면, 미리 기기 또는 에뮬레이터를 ide에 연결해줍니다.

pubspec.yaml 작성하기

dependencies:
  flutter:
    sdk: flutter
  firebase_admob:

flutter 앱에 광고를 추가하기 위하여 firebase_admob 패키지를 pubspec.yaml에 작성해줍니다.

main.dart 앱 코드 작성하기

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

앱에 머티리얼 위젯을 추가할 수 있는 material 패키지와 광고를 추가해줄 수 있는 firebase_admob 패키지를 가져옵니다.

void main() {
  runApp(MyApp());
  FirebaseAdMob.instance.initialize(appId: FirebaseAdMob.testAppId);
}

MyApp 객체를 앱으로 구동합니다.

그리고 FirebaseAdMob의 인스턴스를 초기화해줍니다.

이 때 appId는 AndroidManifest에 작성한 아이디로 넣어야 합니다.

테스트 기기에서는 미리 정의된 testAppId를 이용합니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter admob',
      home: MyHomePage(),
    );
  }
}

머티리얼 디자인으로 감싸진 MyHomePage 객체를 화면에 그려줍니다.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

StatefulWidget으로 버튼, 슬라이더, 체크 박스처럼 사용자와 상호작용하여 위젯이 변화하는 것을 묶어줍니다.

createState 메소드를 오버라이딩하여 _MyHomePageState 객체를 생성해줍니다.

MobileAdTargetingInfo targetingInfo = MobileAdTargetingInfo(
  keywords: <String>['flutterio', 'beautiful apps'],
  contentUrl: 'https://flutter.dev',
  childDirected: false,
  testDevices: <String>[],
);

네이티브 AdMob API의 타겟팅에 대한 정보를 static하게 만들어 줍니다.

키워드, 주소등 속성들이 포함됩니다.

class _MyHomePageState extends State<MyHomePage> {
  BannerAd banner = BannerAd(
    adUnitId: BannerAd.testAdUnitId,
    size: AdSize.smartBanner,
    targetingInfo: targetingInfo,
    listener: (MobileAdEvent event) {
      print("$event");
    },
  );

BannerAd로 배너 광고를 정의할 수 있습니다.

광고 유닛 아이디, 배너의 크기, 타겟팅, 리스너 콜백등을 설정할 수 있습니다.

  @override
  void initState() {
    super.initState();
    banner
      ..load()
      ..show(
        anchorType: AnchorType.bottom,
      );

미리 정의해둔 배너 광고를 로드하고, show로 앱에 출력시킬 수 있습니다.

    RewardedVideoAd.instance.load(
        adUnitId: RewardedVideoAd.testAdUnitId, targetingInfo: targetingInfo);

보상형 광고는 싱글톤으로 이루어져 있어서 바로 인스턴스를 불러와서 유닛 아이디와 타겟을 설정할 수 있습니다.

    RewardedVideoAd.instance.listener =
        (RewardedVideoAdEvent event, {String rewardType, int rewardAmount}) {
      if (event == RewardedVideoAdEvent.rewarded) {
        setState(() {
          print(rewardAmount);
        });
      }
    };
  }

리스너도 RewardedVideoAd의 인스턴스를 바로 불러와서 광고를 시청한 뒤에 rewarded되면 보상을 줄 수 있게 행동을 정의할 수 있습니다.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: OutlineButton(
      onPressed: () {
        RewardedVideoAd.instance.show();
      },
      child: Text("보상형 광고"),
    ));
  }
}

배너 광고는 show()를 한 뒤에 출력되기 때문에 별도의 위젯이 필요없고, 보상형 광고도 별도의 위젯이 필요 없지만 보여줘야 할 시기에 show()해주어야 합니다.

Written on March 22, 2019