🐈

Google Mobile Ads for Flutterの最新0.13.0使ってみた

2021/05/25に公開

Flutter

AdMob

tech

自己紹介

はじめましての方もそうでない方も、レシピサイトやSNSなどメニューを横断的に取り込める

おうちメニュー

というプロダクトをやっているkentarohです。

iOS	Android

本題

Flutter2移行だ！お、いいライブラリ出てる。Google Mobile Ads for Flutter使おう！あ、codelabもあるぞ、と思ったら、0.12.0のバージョンでコードもなんか違うぞ、使うなら最新のがいいな！と思ったので、公式ドキュメント見ながら触ってみましたので共有させてもらいます。

前提

AdMobでアカウント作成、広告IDを取得しています。
バナー広告での例をお伝えします。
下記バージョンを使っています。
Flutter 2.2.0
dart 2.13.0
google_mobile_ads 0.13.0

手順

AdMobの登録
パッケージの取得
OS依存の設定ファイル更新
初期化
バナーの初期化
バナーウィジェットの設置

0 AdMobの登録

省略させていただきます。

1 パッケージの取得

dependenciesにgoogle_mobile_adsを追加しましょう。

pubspec.yaml

dependencies:
  google_mobile_ads: 0.13.0

2 OS依存の設定ファイル更新

Androidはandroid/app/src/main/AndroidManifest.xmlを更新します。

AndroidManifest.xml

<manifest>
    <application>
        <!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    </application>
</manifest>

iOSはios/Runner/Info.plistに追記します。

Info.plist

<key>GADApplicationIdentifier</key>
<string>"あなたのAdmobのAppキー"</string>
<key>SKAdNetworkItems</key>
  <array>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>cstr6suwn9.skadnetwork</string>
    </dict>
  </array>

3 初期化

MobileAdsを初期化します。runAppの前にinitialize()を呼ぶだけ。

main.dart

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

  runApp(MyApp());
}

4 バナーの初期化

まず、コードをご覧ください。

class _MyAppState extends State<MyApp> {

  static final AdRequest request = AdRequest();

  BannerAd _anchoredBanner;
  bool _loadingAnchoreBanner = false;
  
  Future<void> _createAnchoreBanner(BuildContext context) async {
    final AnchoredAdaptiveBannerAdSize size =
        await AdSize.getAnchoredAdaptiveBannerAdSize(
            Orientation.portrait, MediaQuery.of(context).size.width.truncate());

    if (size == null) {
      print('Unable to get height of anchored banner.');
      return;
    }

    final BannerAd banner = BannerAd(
      size: size,
      request: request,
      adUnitId: Platform.isAndroid
          ? 'あなたのAndroid用の広告ID'
          : 'あなたのiOS用の広告ID',
      listener: BannerAdListener(
        onAdLoaded: (Ad ad) {
          print('$BannerAd loaded.');
          setState(() {
            _anchoredBanner = ad as BannerAd;
          });
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          print('$BannerAd failedToLoad: $error');
          _anchoredBanner.dispose();
        },
        onAdOpened: (Ad ad) => print('$BannerAd onAdOpened'),
        onAdClosed: (Ad ad) => print('$BannerAd onAdClosed'),
      ),
    );
    return banner.load();
  }
  
  @override
  void dispose() {
    super.dispose();
    _anchoredBanner?.dispose();
  }
  
  ^^^^^^^^^^^
}

ポイントは２つ

AdRequestはAdRequest()だけでOk（もちろん設定にもよるけど）。
githubのサンプルでは動かなかったので変更。
AdListenerではなくBannerAdListenerで、onAdLoadでsetStateする。
codelabは0.12.0で今回は0.13.0でこの辺りに影響。

5 バナーウィジェットの設置

ポイントは1つ
ウィジェットをbuildするときにバナーがあるか確認してバナーを作ること。既にあるバナーを再度作るのはNG。エラーになります。あとは、通常のウィジェットのようにAdWidgetを配置するだけ。

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(builder: (BuildContext context) {
        if (!_loadingAnchoredBanner) {
          _loadingAnchoredBanner = true;
          _createAnchoredBanner(context);
        }
        return Scaffold(
          appBar: AppBar(
            title: const Text('AdMob Plugin example app'),
            actions: <Widget>[
	
	^^^^^^^^
	
	 Container(
                width: _anchoredBanner.size.width.toDouble(),
                height: _anchoredBanner.size.height.toDouble(),
                child: AdWidget(ad: _anchoredBanner),
              ),

参考

pub.dev

github

感想

やっぱり最新のライブラリを使おうと思ったら公式のドキュメントやgithubを確認するのが一番ですね。アップデートが激しい時代、この記事もどんどんライブラリの新しいバージョンが出て廃れていくと思いますが、だからこそせっかくなので今共有させてもらおうと思いました。もし参考になったと思っていただいたら、ぜひアプリの方使ったいただけると幸いです。見ていただきありがとうございました。

次回予告

現在、テスト駆動開発に移行するために活動しています。こちらをを共有しようと思います。