【Flutter × Admob이 ListView에 배너 표시

현재'고양이 바즈'라는'고양이 관련 트위터만 재생하는 앱'을 개발 중이다.

어차피 할 거면 광고하고 싶어

'화면 상하부에 고정된 유형의 광고'에도 약간 저촉

따라서 ListView 내에서 표시할 수 있는 배너가 구현되었습니다.

Fluter용 AdMob 패키지

Flutter가 준비한 admob 패키지는 3가지 종류가 있습니다.

firebase_admob

Firebase에서 준비한 포장입니다.
광고는 위젯으로 볼 수 없고 화면 위쪽, 아래쪽에 고정되어 있다.
2021년 8월 2일은 현재 DISCONINUED여서 앞으로의 적극적인 개발을 기대할 수 없다.
https://pub.dev/packages/firebase_admob

admob_flutter

OSS로 제작된 포장.
광고를 하나의 위젯으로 처리할 수 있기 때문에 좋아하는 곳에서 광고를 실현할 수 있다.
후원자가 부족해서 개발에 그다지 적극적으로 나서지 못했다.
https://pub.dev/packages/firebase_admob

google_mobile_ads

2021년 2월 구글이 출시한 패키지.
광고는 위젯으로 처리할 수 있고 개발에도 적극적이다.
대망의 포장.
https://pub.dev/packages/google_mobile_ads
이번에 세 번째 Google입니다.mobile_다음은ads를 이용한 광고 실시 상황을 총괄한다.

전제 조건

Fluter 1.222.0 이상

게시되지 않은 어플리케이션

설치 단계

AdMob 등록

도입 패키지

iOS/Android 설정

광고의 실현

0. AdMob 등록

https://admob.google.com/home/
상술한 내용을 방문하여 필요한 사항을 기입하다.

Admob에 대한 사용자 로그인이 완료되었습니다.

iOS 애플리케이션 구성

사이드바의 "적용"→ "프로그램에 로그인한 후 사용"

먼저 iOS부터 등록합니다.

응용 프로그램 이름 (bundleId 따위가 아니라 무엇이든 가능)과 사용자 지표를 검사합니다. "추가 응용 프로그램"

iOS 애플리케이션이 추가되었습니다.

Android 응용 프로그램 설정

응용 프로그램 추가에서 안드로이드 응용 프로그램으로의 설정도 마찬가지입니다.

안드로이드를 선택합니다.그 외에는 모두 마찬가지다.

iOS와 안드로이드 두 앱이 모두 완성되었다.

애플리케이션 ID 확인

응용 프로그램 - 모든 응용 프로그램 표시

각 응용 프로그램의 ID를 확인할 수 있습니다.

광고 단원의 제작

다음은 광고 단원을 만듭니다.
사이드바의'응용'→'광고 단원'

다양한 광고 포맷이 있었지만, 이번에 리스트뷰에 광고를 삽입하려고'배너'를 선택했다.

광고 단원의 명칭을 기입하다.

광고 단원을 만들고 ID를 생성했습니다.

앱 아이디랑 헷갈린 것 같은데 다른 거예요.

アプリID・・・それぞれのアプリに一つだけ存在
広告ユニットID・・・作成した広告ごとに存在（複数生成できる）

iOS 애플리케이션의 AdMob이 성공적으로 등록되었습니다.
안드로이드 앱도 광고 단원을 미리 만들어두자.

1. 포장 도입

Flutter를 사용하여 구현합니다.다음 포장은pubspec입니다.yaml,pub get에 추가합니다.
https://pub.dev/packages/google_mobile_ads/install
pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  ・
  ・
  ・
  google_mobile_ads: ^0.13.2+1

2.iOS/Android의 설정

iOS는 ios/Runner/Info입니다.plist를 다음과 같이 업데이트합니다.
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>GADApplicationIdentifier</key>
    <string>iOSアプリID</string>
    <key>SKAdNetworkItems</key>
      <array>
        <dict>
          <key>SKAdNetworkIdentifier</key>
          <string>cstr6suwn9.skadnetwork</string>
        </dict>
      </array>
    ~~~~~~~~~
</dict>
</plist>

안드로이드는android/app/src/main/Android Manifest입니다.다음은 xml 내의 업데이트입니다.
AndroidManifest.xml

<manifest xmlns:android=""
    package="">
   <application
        android:label=""
        android:icon="">
       <!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
        <meta-data
           android:name="com.google.android.gms.ads.APPLICATION_ID"
           android:value="AndroidのアプリID"/>
    </application>
</manifest>

3. 광고의 실현

패키지 초기화

우선main 함수에서 초기화 처리를 진행합니다.

void main() {

  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize(); // 追加
  runApp(const MyApp());
}

광고의 초기화(배너)

다음은 광고 부품의 초기화입니다.
BannerAd 클래스가 인스턴스화되면load();호출 방법을 통해 플래카드 광고를 읽다.

    // バナー広告をインスタンス化
    BannerAd　myBanner = BannerAd(
      adUnitId: getTestAdBannerUnitId(),
      size: AdSize.banner,
      request: const AdRequest(),
      listener: const BannerAdListener();
    );
    // バナー広告の読み込み
    myBanner.load();

getTestAdBannerUnitId()는 플랫폼(iOS/Android)에 따라 프레젠테이션용 광고 ID를 반환합니다.

  // プラットフォーム（iOS / Android）に合わせてデモ用広告IDを返す
  String getTestAdBannerUnitId() {
    String testBannerUnitId = "";
    if (Platform.isAndroid) {
      // Android のとき
      testBannerUnitId = "ca-app-pub-3940256099942544/6300978111"; // Androidのデモ用バナー広告ID
    } else if (Platform.isIOS) {
      // iOSのとき
      testBannerUnitId = "ca-app-pub-3940256099942544/2934735716"; // iOSのデモ用バナー広告ID
    }
    return testBannerUnitId;
  }

테스트 모드를 사용하지 않고 여러 광고를 클릭하면 계정이 무효 이벤트로 경고될 수 있습니다.
개발할 때는 시위 행진용 광고 단원을 반드시 사용해야 한다.
광고의 종류
iOS
Android
플래카드
ca-app-pub-3940256099942544/2934735716
ca-app-pub-3940256099942544/6300978111
리셋
ca-app-pub-3940256099942544/1712485313
ca-app-pub-3940256099942544/5224354917
로컬 이점
ca-app-pub-3940256099942544/3986624511
ca-app-pub-3940256099942544/2247696110
상기 이외의 시연용 광고 ID는 아래에서 확인할 수 있다.

iOS

https://developers.google.com/admob/ios/test-ads?hl=ja#sample_ad_units

Android

https://developers.google.com/admob/android/test-ads?hl=ja#sample_ad_units

배너를 사용하여 Widet 표시

load（）를 호출한 후 AdWidget를 사용하면 광고를 표시할 수 있습니다.AdWidget StatefulWidget을 계승하여 다른 Widget과 같이 UI에 삽입할 수 있습니다.

AdWidget(ad: myBanner),

플래카드가 나왔다.

ListView에 광고 삽입

마지막으로 ListView에 광고가 삽입된 예를 살펴보겠습니다.
ListView.builder의 index가 5의 배수일 때 광고 삽입
이런 코드를 써 보았다.
timeline_page.dart

    /// リスト表示部分
    child: ListView.builder(
      itemCount: tweets.length,
      itemBuilder: (context, index) {
        final tweet = tweets[index];
        return Column(
          children: [
            // indexが 5 の倍数の場合
            index % 5 == 0
                ? Container(
                    color: Colors.white,
                    height: 64.0,
                    width: double.infinity,
                    child: AdWidget(ad: myBanner),
                  )
                : const SizedBox(),
            // ツイート部分
            InkWell(
              onTap: () async {
                await Navigator.push<dynamic>(
                  context,
                  MaterialPageRoute<dynamic>(
                    builder: (context) =>
                        TweetDetailPage(tweet),
                  ),
                );
              },
              child: TweetCardWidget(
                tweet: tweet,
                tag: kTimeLineHeroTag,
              ),
            ),
          ],
        );
      },
    ),

목록에 제목 광고를 삽입할 수 있습니다.
흔히 볼 수 있는'배너를 화면 위쪽과 아래쪽에 고정한다'는 것과 비교하면 이용자들에 대한 스트레스도 다소 덜하겠죠.

앞으로 Admob 설치 담당자의 참고가 되었으면 좋겠습니다.
끝까지 읽어주셔서 감사합니다.

참고 자료

google_mobile_ads

https://pub.dev/packages/google_mobile_ads

Google AdMob 시작 가이드

https://developers.google.com/admob/flutter/quick-start

Google Mobile Ads for Flutter의 최신 0.1.3

을 사용해 보았습니다.
https://zenn.dev/kentaroh/articles/729a52a3e90bca