はじめに

今回はAdMobの公式パッケージを使って広告を表示できるようにします。

更新履歴

2021.5.16 初回投稿
2021.7.31 google_mobile_adsのバージョン変更、google_mobile_adsのバージョン変更に合わせて、ad_banner.dartのメソッド名を変更
2021.8.26 adUnitIdの値を本番の時にどうするかを追加
2021.10.4 ATT周りが記載できていなかったため、追記
2021.10.4 Flutter2.5用に修正
2021.10.4 環境を再修正

環境

macOS Big Sur(11.6)
Flutter (Channel stable, 2.5.1, on macOS 11.6 20G165 darwin-x64, locale ja-JP)
Android toolchain - develop for Android devices (Android SDK version 31.0.0)
Xcode - develop for iOS and macOS
Chrome - develop for the web
Android Studio (version 2020.3)
VS Code (version 1.60.2)

参考にしたサイト

flutterアプリでfirebase_admobからgoogle_mobile_adsに切り替えてみた - Qiita

package

やりたいこと

iOS/AndroidでAdMobの広告を表示させたい。
WebではAdMob表示できないので一旦、無視

AdMobテスト用ID

アプリID
- Android: ca-app-pub-3940256099942544~3347511713
- iOS: ca-app-pub-3940256099942544~1458002511
広告ユニットID
- Android: ca-app-pub-3940256099942544/6300978111
- iOS: ca-app-pub-3940256099942544/2934735716

なお、admobのプラグインにて、定数定義がありますので、
FirebaseAdMob.testAppIdやBannerAd.testAdUnitIdのように利用することも可能なようです。(試してません)

実装手順

Flutterでプロジェクト作成
null safetyにするため、pubspec.yamlのsdkを以下のように変更
pubspec.yaml
```
   environment:
   sdk: ">=2.12.0 <3.0.0"
```
パッケージをpubspec.yamlに追加してインストール
pubspec.yaml
```
google_mobile_ads: ^0.13.2+1
```
iOSの設定
iOS/Runner/info.plistに以下を追加
info.plist
```
<key>GADApplicationIdentifier</key>
     <string>ca-app-pub-3940256099942544~1458002511</string>
```
「ca-app-pub-3940256099942544~1458002511」はテスト用アプリIDとなりますので、本番の際はこちらを自分のアプリのアプリIDに変更してください。
Androidの設定
最小SDKバージョンの変更
android/app/build.gradle
```
minSdkVersion 19 //19以上に変更
   
```
android/app/src/main/AndroidManifest.xmlに以下を追加
AndroidManifest.xml
```
<meta-data
            android:name="flutterEmbedding"
            android:value="2" />
        <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-3940256099942544~3347511713" />
```
「ca-app-pub-3940256099942544~3347511713」はテスト用アプリIDとなりますので、本番の際はこちらを自分のアプリのアプリIDに変更してください。

5.管理クラスの作成(参考サイトのソースコードのままですthx)

AdListener→BannerAdListenerに変更(2021.7.31)
onApplicationExit: (Ad ad) => print('Left application.')を削除(2021.7.31)

ad_banner.dart

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

class AdBanner extends StatelessWidget {
  const AdBanner({
    required this.size,
    Key? key,
  }) : super(key: key);

  final AdSize size;
  @override
  Widget build(BuildContext context) {
    final banner = BannerAd(
        size: size,
        adUnitId: bannerAdUnitId,
        listener: BannerAdListener(
          onAdLoaded: (Ad ad) => debugPrint('Ad loaded.'),
          onAdFailedToLoad: (Ad ad, LoadAdError error) {
            debugPrint('Ad failed to load: $error');
          },
          onAdOpened: (Ad ad) => debugPrint('Ad opened.'),
          onAdClosed: (Ad ad) => debugPrint('Ad closed.'),
        ),
        request: const AdRequest())
      ..load();

    return SizedBox(
        width: banner.size.width.toDouble(),
        height: banner.size.height.toDouble(),
        child: AdWidget(ad: banner));
  }

  // 広告ID
  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return kAdMobAndroidID;
    } else if (Platform.isIOS) {
      return kAdMobIOSID;
    } else {
      //どちらでもない場合は、テスト用を返す
      return BannerAd.testAdUnitId;
    }
  }
}

6.実装

main.dart

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Admob Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AdMob Demo'),
      ),
      body: Center(
        child: AdBanner(size: AdSize.banner),
      ),
    );
  }
}

7.動作確認

広告のサイズ

AdSize	width	height
banner	320	50
largeBanner	320	100
mediumRectangle	300	250
fullBanner	468	60
leaderboard	728	90

ATT対応

1.iOS設定

①SKAdNetworkの追加
以下のxmlの設定をInfo.plistに追加する。

info.plist

<key>SKAdNetworkItems</key>
<array>
 <dict>
   <key>SKAdNetworkIdentifier</key>
   <string>cstr6suwn9.skadnetwork</string>
 </dict>
</array>

②IDFA利用ポップアップの文言設定

info.plist

   <key>NSUserTrackingUsageDescription</key>
   <string>「許可」すると、あなたに合った広告が表示されやすくなります。これによる個人情報へのアクセスはありません。また、許可しなくても、アプリの全ての機能をご利用いただけます。</string>

2.app_tracking_transparencyパッケージを追加

3.att_helperを作成

att_helper.dart


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

class ATTHelper {
  Future<void> attCheck() async {
    final status = await AppTrackingTransparency.trackingAuthorizationStatus;
    //ATTが設定されていない場合実行
    if (status == TrackingStatus.notDetermined) {
      debugPrint('ATT未設定');
      await Future.delayed(const Duration(milliseconds: 200));
      //ダイアログ表示
      await AppTrackingTransparency.requestTrackingAuthorization();
    } else {
      debugPrint('ATT設定済');
    }
  }
}

4.ATTHelperを呼び出す

main.dart

import 'package:flutter/material.dart';
import 'ad_banner.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:<package名>/services/att_helper.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {

  //WidgetsBindigを追加
  WidgetsBinding.instance?.addPostFrameCallback(
      (_) => ATTHelper().attCheck(),
    );

    return MaterialApp(
      title: 'Admob Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AdMob Demo'),
      ),
      body: Center(
        child: AdBanner(size: AdSize.banner),
      ),
    );
  }
}

以上