플러터에 구글 애드몹 광고 추가하기(2), Adding an AdMob banner ads to a flutter app

 

지난 포스트에 이어서 오늘은 구글 애드몹 광고 플러그인을 추가하고 코드에 적용해 보겠습니다.

아직 지난 포스트를 보지 않으신 분은 아래 글을 참고하시기 바랍니다.

https://dcns.tistory.com/9

플러터에 구글 애드몹 광고 추가하기(1), Adding an AdMob banner ads to a flutter app

 

2. 플러터에 구글 모바일 광고 플러그인 추가하기

 

• 프로젝트를 열고 pubspec.yaml 파일에 google_mobile_ads 플러그인을 추가해 주고 Pub get 을 실행합니다

...
environment:
  # TODO: Update the minimum sdk version to 2.12.0 to support null safety.
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^0.3.9

  # TODO: Add google_mobile_ads as a dependency
  google_mobile_ads: ^0.13.0

...

• pubspec.yaml을 수정하지 않고 플러그인을 추가하려면 간단한 방법으로 프로젝트 루트에서 터미널에 다음 명령어를 입력합니다.

flutter pub add google_mobile_ads

 

• android  - AndroidManifest.xml 파일에 다음 내용을 추가합니다.
• (android/app/src/main/AndroidManifest.xml)

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

</manifest>

위 코드의 앱ID는 테스트용입니다. 구현을 완료한 후 지난 포스트에서 생성한 실제 앱ID로 변경해 주세요.

 

• iOS - ios/Runner/Info.plist 파일에 다음 내용을 추가합니다.

...
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
...

 

플랫폼에 따른 광고단위 ID를 컨트롤 하기위해  'lib' 폴더 아래 ad_helper.dart 파일을 생성하고 다음와 같은 코드를 작성해 주겠습니다.

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';
    }
    throw new UnsupportedError("Unsupported platform");
  }

  static String get nativeAdUnitId {
    if (Platform.isAndroid) {
      return 'ca-app-pub-3940256099942544/2247696110';
    } else if (Platform.isIOS) {
      return 'ca-app-pub-3940256099942544/3986624511';
    }
    throw new UnsupportedError("Unsupported platform");
  }
}

 

 

• 광고를 로드하기 전에 Google Mobile Ads SDK를 초기화 해주어야 합니다.
• main.dart 혹은 home_page.dart 등 앱 실행 초기에 다음과 같은 코드를 추가해 Google Mobile Ads SDK를 초기화 해줍니다.

class HomePage extends StatelessWidget {

  ...

  Future<InitializationStatus> _initGoogleMobileAds() {
    // TODO: Initialize Google Mobile Ads SDK
    return MobileAds.instance.initialize();
  }
}

 

 

3. 배너 광고 추가하기

이제 기본 준비는 다 되었습니다.

리스트뷰 안에 배너광고를 추가해 보겠습니다.

 

광고를 표시할 dart 페이지를 하나 생성하고

아래와 같이 코드를 추가해 BannerAd를 load 합니다.

 

class BannerInlinePage extends StatefulWidget {
  ...
}
class _BannerInlinePageState extends State<BannerInlinePage> {

  // TODO: Add a BannerAd instance
  late BannerAd _ad;

  // TODO: Add _isAdLoaded
  bool _isAdLoaded = false;

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

  // TODO: Create a BannerAd instance
  _ad = BannerAd(
    adUnitId: AdHelper.bannerAdUnitId,
    size: AdSize.banner,
    request: AdRequest(),
    listener: BannerAdListener(
      onAdLoaded: (_) {
        setState(() {
          _isAdLoaded = true;
        });
      },
      onAdFailedToLoad: (ad, error) {
        // Releases an ad resource when it fails to load
        ad.dispose();

        print('Ad load failed (code=${error.code} message=${error.message})');
      },
    ),
  );

  // TODO: Load an ad
  _ad.load();
}

...

@override
void dispose() {
  // TODO: Dispose a BannerAd object
  _ad.dispose();

  super.dispose();
}
...
}

 

build() 메소드에서 광고를 보여주기 위해서 AdWidget을 사용합니다.

 

@override
Widget build(BuildContext context) {
  return Scaffold(
    ...
    body: 
    ...
        // TODO: Render a banner ad
        if (_isAdLoaded) {
          return Container(
            child: AdWidget(ad: _ad),
            width: _ad.size.width.toDouble(),
            height: _ad.size.height.toDouble(),
            alignment: Alignment.center,
          );
        } 
    ...
      },
    ),
  );
}

 

 

위와 같은 방법으로 구글 애드몹 배너광고를 원하는 곳에 배치할 수 있습니다.