[Flutter] How to Embed Ads into Flutter App

이번에는 Flutter app에 광고를 다는 방법에 대해 살펴보겠습니다.

Login/Logup to AdMob

가장 많이 사용하는 Google의 AdMob으로 넣어보겠습니다.

먼저 회원 가입을 해주세요.

https://apps.admob.com

잘 완료되었으면 요런 화면을 보실 수 있을 거에요.

Configure pubspec.yaml

이제 광고를 위한 plugin을 설정해 줍니다.

dependencies:
  flutter:
    sdk: flutter

  google_mobile_ads: 2.3.0

이제 다음의 명령어로 프로젝트에 적용을 합니다.

$ flutter pub get

Register App to AdMob

AdMob 사이트에서 앱 추가를 선택합니다.

그러면 다음과 같은 화면이 나옵니다.

플랫폼을 따로 설정을 해줘야 합니다.

일단 Android로 선택을 하고, 아직 등록되지 않은 앱이라고 가정할게요.

앱 이름을 설정하면 완료입니다.

Create Ads Unit

이제 광고 단위를 추가해주겠습니다.

AdMob 사이트에서 등록한 앱의 앱 개요로 갑니다.

메뉴가 보이질 않는다면 등록한 앱을 선택하시면 되요.

다양한 형태의 광고가 지원되니 입맛대로 사용하시면 되요.

이번에는 배너 광고를 삽입해볼게요.

광고 단위 이름을 넣어줍니다.

이제 광고 단위도 만들어 졌습니다.

Insert Ads into Flutter App

android/app/src/main/AndroidManifest.xml 파일에서 하기의 AdMob 부분을 추가해줍니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.blahblah.hdice">
  <application
    android:label="hdice"
    android:name="${applicationName}"
    android:icon="@mipmap/ic_launcher">
  
    <!-- AdMob -->
    <meta-data 
      android:name="com.google.android.gms.ads.APPLICATION_ID" 
      android:value="" />
    ...

value 부분에 발급받은 App ID를 넣어주시면 되요.

 

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>GADAppliocationIdentifier</key>
  <string></string>
  ...
</dict>
</plist>

string 부분에 넣어주세요.

 

이제 app에서 광고 plugin을 초기화 해줍니다.

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

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

  runApp(...);
}

다음으로 광고 widget을 만듭니다.

전 lib/component/ads.dart로 만들었습니다. 이 부분은 자유롭게 본인 프로젝트의 폴더 구성에 맞게 넣어주세요.

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

import 'package:google_mobile_ads/google_mobile_ads.dart';

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

  @override
  State<BannerAdsWidget> createState() => _BannerAdsWidgetState();
}

class _BannerAdsWidgetState extends State<BannerAdsWidget> {
  late final BannerAd banner;

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

    final adsUnitId = Platform.isIOS
        ? "ca-app-pub-3940256099942544/2934735716"
        : "ca-app-pub-3940256099942544/6300978111";

    banner = BannerAd(
      size: AdSize.banner,
      adUnitId: adsUnitId,
      listener: BannerAdListener(onAdFailedToLoad: (ad, error) {
        ad.dispose();
      }),
      request: const AdRequest(),
    );

    banner.load();
  }

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(height: 75, child: AdWidget(ad: banner));
  }
}

테스트는 반드시 테스트 ID를 사용하셔야 규정 위반이 되지 않습니다. 이 부분은 반드시 체크해주세요.

발급받은 광고 ID는 실제 배포시에만 사용해주세요.

https://developers.google.com/admob/android/test-ads

https://developers.google.com/admob/ios/test-ads

 

테스트 ID는 위 사이트에서 확인하실 수 있습니다.

 

마지막으로 만든 widget을 앱의 원하는 위치에 배치만 해주시면 됩니다.

const Align(
  alignment: Alignment.bottomCenter,
  child: BannerAdsWidget(),
)

저는 화면 하단에 배치해주었습니다.

생각한대로 잘 나오네요. ^^

Wrap Up

이번에는 Flutter app에 광고를 추가하는 방법에 대해 살펴보았습니다.

테스트 시에는 테스트 ID를 사용해야 한다는 점만 주의하시면 크게 어려운 점은 없을 거에요.

저같은 경우, android SDK 버전 문제와 multiDex 문제가 있었어서 다음과 같은 수정을 추가로 해주었습니다.

android/app/build.gradle

...
android {
    ...
    defaultConfig {
        ...
        minSdkVersion 19
        multiDexEnabled true
    }
    ...
}
...

모두 원하는 수익 얻으시길 바라요. ^^