Menambahkan iklan AdMob ke aplikasi Flutter

Yang akan Anda buat

Codelab ini memandu Anda dalam menambahkan iklan reward, iklan interstisial, dan banner AdMob ke aplikasi bernama Awesome Drawing Quiz, game yang memungkinkan pemain menebak nama dari gambar.

Jika Anda mengalami masalah (bug kode, kesalahan gramatikal, susunan kata yang tidak jelas, dll) saat mengerjakan codelab ini, harap laporkan masalah dengan mengklik link Laporkan kesalahan di pojok kiri bawah codelab.

Yang akan Anda pelajari

  • Cara menyiapkan project Firebase untuk aplikasi Flutter
  • Cara mengonfigurasi plugin Firebase AdMob
  • Cara menggunakan iklan banner, interstisial, dan reward di aplikasi Flutter

Yang Anda butuhkan

  • Android Studio 3.6 atau yang lebih tinggi
  • Xcode (untuk dukungan iOS)

Bagaimana Anda menilai tingkat pengalaman Anda menggunakan AdMob?

Pemula Menengah Mahir

Apa yang ingin Anda pelajari dari codelab ini?

Saya baru mengenal topik ini, jadi saya ingin melihat ringkasan yang bagus. Saya sedikit paham soal topik ini, tetapi saya ingin mengingat kembali. Saya sedang mencari kode contoh untuk digunakan dalam project saya. Saya sedang mencari penjelasan tentang sesuatu yang spesifik.

Menyiapkan lingkungan pengembangan Flutter

  1. Instal Flutter SDK di perangkat Anda dengan mengikuti petunjuk instal di flutter.dev.
  2. Buka Android Studio, lalu ikuti langkah-langkah di halaman konfigurasi untuk menginstal plugin Dart dan Flutter untuk Android Studio.

Mendownload kode

Untuk mendownload semua kode untuk codelab ini sebagai file zip, klik tombol berikut:

Download kode sumber

Ekstrak file dari file zip. Tindakan ini akan mengekstrak folder root bernama admob-ads-in-flutter-master.

Atau, clone repositori GitHub dari perintah berikut.

$ git clone https://github.com/googlecodelabs/admob-ads-in-flutter

Repositori berisi dua folder:

  • android_studio_folder.pngstarter — Kode awal yang Anda gunakan untuk membuat codelab ini.
  • android_studio_folder.pngcomplete — Kode yang sudah selesai untuk codelab ini.

Mengimpor project starter

  1. Buka Android Studio.
  2. Dari layar sambutan, pilih Open an existing Android Studio project. a3a1fa1afc967e37.png
  3. Buka folder android_studio_folder.pngstarter dari kode yang Anda download pada langkah sebelumnya.

a879fa2385ba368f.png

  1. Anda mungkin melihat pesan error berikut dari tab Dart Analysis. Error ini terjadi hanya sekali saat Anda mengimpor project yang sudah ada ke Android Studio karena paket yang sedang digunakan di project contoh belum didownload.

2b8fbccf84e1e8a5.png

  1. Untuk mengatasi error, klik Get dependencies di bagian atas panel editor. Dengan melakukannya, Anda akan mendownload paket yang digunakan di project contoh.

dc017166e44ac333.png

  1. Setelah download selesai, Anda tidak akan melihat error lagi dari tab Dart Analysis. Sekarang, project Anda siap dikembangkan.

Anda harus menyiapkan project Firebase untuk menayangkan iklan AdMob dengan Plugin Firebase AdMob.

Membuat project Firebase

  1. Di Firebase console, klik Tambahkan project.
  2. Masukkan Awesome Drawing Quiz sebagai nama project.
  3. Aktifkan Google Analytics untuk project Anda lalu klik Lanjutkan.

87590d75b00db648.png

  1. Pilih lokasi analisis dan setelan yang berlaku untuk project Anda. Baca dan setujui persyaratan, lalu klik Buat project.

700c64d82fedbd0b.png

  1. Setelah sekitar satu menit, project Firebase Anda sudah siap.

Mendaftarkan aplikasi dengan Firebase

Di Firebase console, pilih project Awesome Drawing Quiz yang Anda buat pada langkah sebelumnya.

Mendaftarkan aplikasi Android

  1. Di bagian tengah halaman ringkasan project, klik ikon Android untuk meluncurkan alur kerja penyiapan.
  2. Masukkan com.codelab.awesomedrawingquiz di kolom Nama paket Android.
  3. Masukkan Awesome Drawing Quiz (Android) di kolom Nama panggilan aplikasi.
  4. Klik Daftarkan aplikasi.
  5. Download file google-services.json untuk digunakan di lain waktu.

Mendaftarkan aplikasi iOS

  1. Di bagian tengah halaman ringkasan project, klik ikon iOS atau ikon Tambahkan aplikasi (+) untuk meluncurkan alur kerja penyiapan.
  2. Masukkan com.codelab.awesomedrawingquiz di kolom ID paket iOS.
  3. Masukkan Awesome Drawing Quiz (iOS) di kolom Nama panggilan aplikasi.
  4. Klik Daftarkan aplikasi.
  5. Download file GoogleService-Info.plist untuk digunakan di lain waktu.

Menambahkan file konfigurasi Firebase

Petunjuk berikut memberi tahu Anda cara mengonfigurasi Firebase untuk Android dan iOS.

Mengonfigurasi untuk Android

  1. Buka project starter di Android Studio dengan merujuk bagian Mengimpor project starter di Menyiapkan langkah lingkungan pengembangan dalam codelab ini.
  2. Pindahkan file google-services.json ke direktori android/app dari project Flutter Awesome Drawing Quiz.

bd0729c424b0c79d.png

  1. Di file Gradle (android/build.gradle) level root (level project), tambahkan aturan untuk menyertakan plugin Gradle Layanan Google. Pastikan Anda memiliki repositori Maven Google.

android/build.gradle

buildscript {

    repositories {
      // Check that you have the following line (if not, add it):
      google()  // Google's Maven repository
    }

    ...

    dependencies {
      ...

      // TODO: Add Google Services plugin
      classpath 'com.google.gms:google-services:4.3.3'
    }
}

allprojects {
    ...

    repositories {
      // Check that you have the following line (if not, add it):
      google()  // Google's Maven repository
      ...
    }
}
  1. Di file Gradle (android/app/build.gradle) modul (level aplikasi), terapkan plugin Gradle Layanan Google.

android/app/build.gradle

...

// TODO: Apply google-services plugin
apply plugin: 'com.google.gms.google-services'

android {
  ...
}

...

Mengonfigurasi untuk iOS

  1. Buka project starter di Android Studio dengan merujuk bagian Mengimpor project starter di Menyiapkan langkah lingkungan pengembangan dalam codelab ini.
  2. Buka file apa pun di bawah direktori ios. (misalnya, ios/Runner/AppDelegate.swift)
  3. Klik Open iOS module in Xcode.

b0e50d31ada7bf46.png

  1. Di Xcode, seret file GoogleService-Info.plist ke direktori Runner untuk mengimpor file konfigurasi ke project Xcode.

1f552ff12b67008.png

Karena Flutter adalah SDK multiplatform, Anda harus menambahkan aplikasi dan unit iklan untuk Android dan iOS di AdMob.

Sebelum memulai, Anda harus mengenali glosarium AdMob berikut.

Unit iklan

Unit iklan adalah kumpulan iklan yang ditampilkan sebagai hasil dari satu potongan kode iklan AdMob. Anda dapat membuat dan menyesuaikan unit iklan di akun AdMob.

Setiap unit iklan memiliki ID unik yang bernama ID unit iklan. Saat mengimplementasikan unit iklan baru di aplikasi, Anda akan merujuk ID unit iklan untuk memberi tahu jaringan iklan ke mana harus mengirim iklan saat diminta.

Iklan banner

Iklan banner mengisi suatu tempat dalam layout aplikasi, baik di atas ataupun di bawah layar perangkat. Iklan banner tetap muncul di layar saat pengguna berinteraksi dengan aplikasi, dan iklan dapat dimuat ulang secara otomatis setelah jangka waktu tertentu.

Iklan interstisial

Iklan interstisial adalah iklan layar penuh yang menutupi antarmuka aplikasi host iklan. Iklan ini biasanya ditampilkan di titik transisi alami dalam alur aplikasi, seperti di antara aktivitas atau selama waktu jeda antarlevel dalam game.

Iklan reward

Iklan reward adalah iklan yang menyediakan banyak opsi interaksi untuk pengguna dengan imbalan reward dalam aplikasi.

Menyiapkan untuk Android

Bagian ini memberi tahu Anda cara menambahkan aplikasi Android, dan unit iklan, ke AdMob.

Menambahkan aplikasi Android

Gunakan petunjuk berikut untuk menambahkan aplikasi Android ke AdMob:

  1. Di konsol AdMob, klik TAMBAHKAN APLIKASI dari menu Aplikasi.
  2. Saat ditanya ‘Apakah Anda telah memublikasikan aplikasi di Google Play atau App Store?', klik BELUM.
  3. Masukkan Awesome Drawing Quiz di kolom Nama aplikasi, lalu pilih Android sebagai platform.

152e1694fd0ce870.png

  1. Anda tidak diwajibkan untuk mengaktifkan metrik pengguna demi menyelesaikan codelab ini. Namun, sebaiknya Anda melakukannya karena mengaktifkan metrik pengguna dapat memberikan data analisis beserta perilaku pengguna yang mendetail. Klik TAMBAHKAN untuk menyelesaikan prosesnya.

5204925f5c652b41.png

  1. Catat ID aplikasi baru Anda (ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy). Anda akan perlu menambahkannya ke kode sumber project contoh untuk menjalankan iklan.

Membuat unit iklan

Untuk mulai menambahkan unit iklan ke AdMob:

  1. Pilih Awesome Drawing Quiz (Android) dari menu Aplikasi di konsol AdMob.
  2. Klik menu Unit iklan.

Dari menu Unit iklan, ikuti petunjuk untuk membuat unit iklan reward, iklan interstisial, dan banner.

Banner

  1. Klik tombol TAMBAHKAN UNIT IKLAN.
  2. Pilih Banner sebagai format.
  3. Masukkan android-adq-banner di kolom Nama unit iklan.
  4. Klik BUAT UNIT IKLAN untuk menyelesaikan prosesnya.

Interstisial

  1. Klik tombol TAMBAHKAN UNIT IKLAN.
  2. Pilih Interstisial sebagai format.
  3. Masukkan android-adq-interstitial di kolom Nama unit iklan.
  4. Klik BUAT UNIT IKLAN untuk menyelesaikan prosesnya.

Reward

  1. Klik tombol TAMBAHKAN UNIT IKLAN.
  2. Pilih Reward sebagai format.
  3. Masukkan android-adq-rewarded di kolom Nama unit iklan.
  4. Gunakan setelan default untuk Setelan reward.
  5. Klik BUAT UNIT IKLAN untuk menyelesaikan prosesnya.

Menyiapkan untuk iOS

Bagian ini memberi tahu Anda cara menambahkan aplikasi iOS, dan unit iklan, ke AdMob.

Menambahkan aplikasi iOS

Gunakan petunjuk berikut untuk menambahkan aplikasi iOS ke AdMob:

  1. Di konsol AdMob, klik TAMBAHKAN APLIKASI dari menu Aplikasi.
  2. Saat ditanya ‘Apakah Anda telah memublikasikan aplikasi di Google Play atau App Store?', klik BELUM.
  3. Masukkan Awesome Drawing Quiz di kolom Nama aplikasi, lalu pilih iOS sebagai platform.

a8fa48af652021d8.png

  1. Anda tidak diwajibkan untuk mengaktifkan metrik pengguna demi menyelesaikan codelab ini. Namun, sebaiknya Anda melakukannya karena mengaktifkan metrik pengguna dapat memberikan data analisis beserta perilaku pengguna yang mendetail. Klik TAMBAHKAN untuk menyelesaikan prosesnya.

5204925f5c652b41.png

  1. Catat ID aplikasi baru Anda (ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy). Anda akan perlu menambahkannya ke kode sumber project contoh untuk menjalankan iklan.

Membuat unit iklan

Untuk mulai menambahkan unit iklan:

  1. Pilih Awesome Drawing Quiz (iOS) dari menu Aplikasi di konsol AdMob.
  2. Klik menu Unit iklan.

Dari menu Unit iklan, ikuti petunjuk untuk membuat unit iklan reward, iklan interstisial, dan banner.

Banner

  1. Klik tombol TAMBAHKAN UNIT IKLAN.
  2. Pilih Banner sebagai format.
  3. Masukkan ios-adq-banner di kolom Nama unit iklan.
  4. Klik BUAT UNIT IKLAN untuk menyelesaikan prosesnya.

Interstisial

  1. Klik tombol TAMBAHKAN UNIT IKLAN.
  2. Pilih Interstisial sebagai format.
  3. Masukkan ios-adq-interstitial di kolom Nama unit iklan.
  4. Klik BUAT UNIT IKLAN untuk menyelesaikan prosesnya.

Reward

  1. Klik tombol TAMBAHKAN UNIT IKLAN.
  2. Pilih Reward sebagai format.
  3. Masukkan ios-adq-rewarded di kolom Nama unit iklan.
  4. Gunakan setelan default untuk Setelan reward.
  5. Klik BUAT UNIT IKLAN untuk menyelesaikan prosesnya.

Menggunakan unit iklan dan aplikasi AdMob yang sudah dikonfigurasi sebelumnya (opsional)

Jika Anda ingin mengikuti codelab, bukannya membuat unit iklan dan aplikasi baru Anda sendiri, gunakan ID unit iklan dan ID aplikasi AdMob berikut yang disiapkan untuk codelab ini.

Android

Uji ID AdMob untuk Android:

Item

ID unit iklan/ID aplikasi

ID aplikasi AdMob

ca-app-pub-3940256099942544~4354546703

Banner

ca-app-pub-3940256099942544/8865242552

Interstisial

ca-app-pub-3940256099942544/7049598008

Reward

ca-app-pub-3940256099942544/8673189370

iOS

Uji ID AdMob untuk iOS:

Item

ID unit iklan/ID aplikasi

ID aplikasi AdMob

ca-app-pub-3940256099942544~2594085930

Banner

ca-app-pub-3940256099942544/4339318960

Interstisial

ca-app-pub-3940256099942544/3964253750

Reward

ca-app-pub-3940256099942544/7552160883

Flutter menggunakan plugin untuk memberikan akses ke berbagai layanan khusus platform. Plugin menyertakan kode khusus platform untuk mengakses layanan dan API di setiap platform.

Plugin firebase_admob mendukung pemuatan dan penayangan iklan reward, interstisial, dan banner menggunakan AdMob API.

Karena Flutter adalah SDK multiplatform, plugin firebase_admob dapat diterapkan untuk iOS dan Android. Jadi, jika Anda menambahkan plugin ke aplikasi Flutter, plugin tersebut digunakan oleh aplikasi Awesome Drawing Quiz versi Android dan iOS.

Menambahkan plugin Firebase AdMob sebagai dependensi

Untuk mengakses AdMob API dari project Awesome Drawing Quiz, tambahkan plugin firebase_admob sebagai dependensi ke file pubspec.yaml yang terletak di root project.

pubspec.yaml

...

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^0.3.9

  # Add the following line
  firebase_admob: ^0.9.3

...

Klik Packages get untuk menginstal plugin ke project Awesome Drawing Quiz.

d9fc62bf4054cea9.png

Memperbarui AndroidManifest.xml (Android)

  1. Buka file android/app/src/main/AndroidManifest.xml di Android Studio.
  2. Tambahkan ID aplikasi AdMob Anda dengan menambahkan tag <meta-data> dan memasukkan com.google.android.gms.ads.APPLICATION_ID. Jika ID aplikasi AdMob Anda adalah ca-app-pub-3940256099942544~3347511713, Anda perlu menambahkan baris berikut ke file 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>

Memperbarui Info.plist (iOS)

  1. Buka file ios/Runner/Info.plist di Android Studio.
  2. Tambahkan kunci GADApplicationIdentifier dengan nilai string ID aplikasi AdMob Anda. Misalnya, jika ID aplikasi AdMob Anda adalah ca-app-pub-3940256099942544~1458002511, Anda harus menambahkan baris berikut ke file Info.plist.

ios/Runner/Info.plist

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

Buat file baru bernama ad_manager.dart di bawah direktori lib. Lalu, terapkan class AdManager yang memberikan ID unit iklan dan ID aplikasi AdMob untuk Android dan iOS.

Pastikan Anda mengganti ID unit iklan (ca-app-pub-xxxxxxx/yyyyyyyy) dan ID aplikasi (ca-app-pub-xxxxxx~yyyyy) AdMob dengan ID yang Anda buat pada langkah sebelumnya.

lib/ad_manager.dart

import 'dart:io';

class AdManager {

  static String get appId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_ADMOB_APP_ID>";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_ADMOB_APP_ID>";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_BANNER_AD_UNIT_ID";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_BANNER_AD_UNIT_ID>";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_INTERSTITIAL_AD_UNIT_ID>";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_INTERSTITIAL_AD_UNIT_ID>";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get rewardedAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_REWARDED_AD_UNIT_ID>";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_REWARDED_AD_UNIT_ID>";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }
}

Gunakan cuplikan kode berikut jika Anda ingin menggunakan ID unit iklan dan ID aplikasi AdMob yang sudah dikonfigurasi sebelumnya untuk codelab ini.

lib/ad_manager.dart

import 'dart:io';

class AdManager {

  static String get appId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544~4354546703";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544~2594085930";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/8865242552";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/4339318960";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/7049598008";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/3964253750";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get rewardedAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/8673189370";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/7552160883";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }
}

Sebelum memuat iklan, Anda harus melakukan inisialisasi pada AdMob SDK. Buka file lib/home_route.dart, lalu ubah _initAdMob() untuk melakukan inisialisasi pada SDK sebelum game dimulai.

lib/home_route.dart

// TODO: Import ad_manager.dart
import 'package:awesome_drawing_quiz/ad_manager.dart';

import 'package:awesome_drawing_quiz/app_theme.dart';

// TODO: Import firebase_admob.dart
import 'package:firebase_admob/firebase_admob.dart';

import 'package:flutter/material.dart';

...

class _HomeRouteState extends State<HomeRoute> {

  ...

  Future<void> _initAdMob() {
    // TODO: Initialize AdMob SDK
    return FirebaseAdMob.instance.initialize(appId: AdManager.appId);
  }
}

Di bagian ini, Anda menambahkan iklan banner di bagian atas layar game, seperti yang ditunjukkan pada gambar di bawah ini.

580a296a77065928.png 6d6659121dbf382e.png

Buka file lib/game_route.dart, lalu impor ad_manager.dart dan firebase_admob.dart dengan menambahkan baris berikut:

lib/game_route.dart

...

// TODO: Import ad_manager.dart
import 'package:awesome_drawing_quiz/ad_manager.dart';

// TODO: Import firebase_admob.dart
import 'package:firebase_admob/firebase_admob.dart';

class GameRoute extends StatefulWidget {
  ...
}

Lalu, di class _GameRouteState, tambahkan metode dan anggota berikut untuk iklan banner.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _bannerAd
  BannerAd _bannerAd;

  ...

  // TODO: Implement _loadBannerAd()
  void _loadBannerAd() {
    _bannerAd
      ..load()
      ..show(anchorType: AnchorType.top);
  }

  ...
}

Di metode initState(), buat project BannerAd, lalu muat iklan banner. Perhatikan bahwa banner menampilkan banner berukuran 320x50 (AdSize.banner).

lib/game_route.dart

@override
void initState() {
  ...

  // TODO: Initialize _bannerAd
  _bannerAd = BannerAd(
      adUnitId: AdManager.bannerAdUnitId,
      size: AdSize.banner,
  );

  // TODO: Load a Banner Ad
  _loadBannerAd();
}

Terakhir, rilis resource yang terkait dengan objek BannerAd dengan memanggil metode BannerAd.dispose() dalam metode callback dispose().

lib/game_route.dart

@override
void dispose() {
  // TODO: Dispose BannerAd object
  _bannerAd?.dispose();

  ...

  super.dispose();
}

Selesai. Jalankan project untuk melihat iklan banner yang ditampilkan di bagian atas layar game.

d82f07411be93d37.png f221e4821191cf99.png

Di bagian ini, Anda menampilkan iklan interstisial setelah game (total 5 level) selesai.

Pertama, tambahkan metode dan anggota berikut untuk iklan interstisial di class _GameRouteState.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _interstitialAd
  InterstitialAd _interstitialAd;

  // TODO: Add _isInterstitialAdReady
  bool _isInterstitialAdReady;

  ...

  // TODO: Implement _loadInterstitialAd()
  void _loadInterstitialAd() {
    _interstitialAd.load();
  }

  // TODO: Implement _onInterstitialAdEvent()
  void _onInterstitialAdEvent(MobileAdEvent event) {
    switch (event) {
      case MobileAdEvent.loaded:
        _isInterstitialAdReady = true;
        break;
      case MobileAdEvent.failedToLoad:
        _isInterstitialAdReady = false;
        print('Failed to load an interstitial ad');
        break;
      case MobileAdEvent.closed:
        _moveToHome();
        break;
      default:
      // do nothing
    }
  }

  ...
}

Lalu, lakukan inisialisasi pada _isInterstitialAdReady dan _interstitialAd di metode initState(). Karena _onInterstitialAdEvent dikonfigurasikan sebagai pemroses peristiwa iklan untuk _interstitialAd, setiap peristiwa iklan dari _interstitialAd ditayangkan ke metode _onInterstitialAdEvent.

lib/game_route.dart

@override
void initState() {
  ...

  // TODO: Initialize _isInterstitialAdReady
  _isInterstitialAdReady = false;

  // TODO: Initialize _interstitialAd
  _interstitialAd = InterstitialAd(
    adUnitId: AdManager.interstitialAdUnitId,
    listener: _onInterstitialAdEvent,
  );
}

Dalam codelab ini, iklan interstisial ditampilkan setelah pengguna menyelesaikan 5 level. Untuk meminimalisir permintaan iklan yang tidak perlu, kita mulai memuat iklan saat pengguna mencapai level 3.

Di metode onNewLevel(), tambahkan baris berikut.

lib/game_route.dart

@override
void onNewLevel(int level, Drawing drawing, String clue) {
  ...

  // TODO: Load an Interstitial Ad
  if (level >= 3 && !_isInterstitialAdReady) {
    _loadInterstitialAd();
  }
}

Saat game selesai, dialog skor game akan ditampilkan. Saat pengguna menutup dialog, game mengalihkan pengguna ke layar beranda Awesome Drawing Quiz.

Karena iklan interstisial harus ditampilkan di antara transisi layar, kita menampilkan iklan interstisial saat pengguna mengklik tombol CLOSE.

Ubah metode onGameOver() sebagai berikut:

lib/game_route.dart

@override
void onGameOver(int correctAnswers) {
  showDialog(
    context: _scaffoldKey.currentContext,
    builder: (context) {
      return AlertDialog(
        title: Text('Game over!'),
        content: Text('Score: $correctAnswers/5'),
        actions: <Widget>[
          FlatButton(
            child: Text('close'.toUpperCase()),
            onPressed: () {

              // TODO: Display an Interstitial Ad
              if (_isInterstitialAdReady) {
                _interstitialAd.show();
              }

              _moveToHome();
            },
          ),
        ],
      );
    },
  );
}

Terakhir, rilis resource yang terkait dengan objek InterstitialAd dengan memanggil metode InterstitialAd.dispose() dalam metode callback dispose().

lib/game_route.dart

@override
void dispose() {
  ...

  // TODO: Dispose InterstitialAd object
  _interstitialAd?.dispose();

  ...

  super.dispose();
}

Selesai. Jalankan project untuk melihat iklan interstisial ditampilkan setelah game selesai.

53f44b98e8a0c446.gif

Di bagian ini, Anda menambahkan iklan reward yang memberikan pengguna petunjuk tambahan sebagai reward.

Pertama, tambahkan metode dan anggota untuk iklan reward di class _GameRouteState. Perhatikan bahwa RewardedVideoAd adalah objek tunggal, jadi Anda tidak perlu memiliki anggota untuk mengelola instance class RewardedVideoAd.

RewardedVideoAdEvent.rewarded adalah peristiwa iklan paling penting pada iklan reward. Peristiwa dipicu saat pengguna memenuhi syarat untuk menerima reward (misalnya, saat pengguna selesai menonton video). Dalam codelab ini, RewardedVideoAdEvent.rewarded memanggil metode QuizManager.instance.useHint() yang mengungkap satu karakter lagi di string petunjuk.

Selain itu, menurut peristiwa iklan, RewardedVideoAdEvent.rewarded memperbarui UI dengan mengubah nilai _isRewardedAdReady. Perhatikan bahwa _isRewardedAdReady memuat ulang iklan saat pengguna menutup iklan guna memastikan bahwa iklan siap sedini mungkin.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _isRewardedAdReady
  bool _isRewardedAdReady;

  ...

  // TODO: Implement _loadRewardedAd()
  void _loadRewardedAd() {
    RewardedVideoAd.instance.load(
      targetingInfo: MobileAdTargetingInfo(),
      adUnitId: AdManager.rewardedAdUnitId,
    );
  }

  // TODO: Implement _onRewardedAdEvent()
  void _onRewardedAdEvent(RewardedVideoAdEvent event,
      {String rewardType, int rewardAmount}) {
    switch (event) {
      case RewardedVideoAdEvent.loaded:
        setState(() {
          _isRewardedAdReady = true;
        });
        break;
      case RewardedVideoAdEvent.closed:
        setState(() {
          _isRewardedAdReady = false;
        });
        _loadRewardedAd();
        break;
      case RewardedVideoAdEvent.failedToLoad:
        setState(() {
          _isRewardedAdReady = false;
        });
        print('Failed to load a rewarded ad');
        break;
      case RewardedVideoAdEvent.rewarded:
        QuizManager.instance.useHint();
        break;
      default:
      // do nothing
    }
  }

  ...
}

Selanjutnya, lakukan inisialisasi pada _isRewardedAdReady dan tetapkan _onRewardedAdEvent sebagai pemroses peristiwa iklan. Lalu, panggil _loadRewardedAd() untuk meminta iklan reward.

lib/game_route.dart

@override
void initState() {
  ...

  // TODO: Initialize _isRewardedAdReady
  _isRewardedAdReady = false;

  // TODO: Set Rewarded Ad event listener
  RewardedVideoAd.instance.listener = _onRewardedAdEvent;

  // TODO: Load a Rewarded Ad
  _loadRewardedAd();
}

Selanjutnya, izinkan pengguna menonton iklan reward dengan mengklik tombol tindakan mengambang (FAB). Tombol hanya muncul jika pengguna belum menggunakan petunjuk di level yang sedang diselesaikan dan iklan reward dimuat.

Ubah metode _buildFloatingActionButton(), sebagai berikut, untuk menampilkan tombol tindakan mengambang (FAB). Perhatikan bahwa null yang ditampilkan menyembunyikan tombol dari layar.

lib/game_route.dart

Widget _buildFloatingActionButton() {
  // TODO: Return a FloatingActionButton if a Rewarded Ad is available
  return (!QuizManager.instance.isHintUsed && _isRewardedAdReady)
      ? FloatingActionButton.extended(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(
                  title: Text('Need a hint?'),
                  content: Text('Watch an Ad to get a hint!'),
                  actions: <Widget>[
                    FlatButton(
                      child: Text('cancel'.toUpperCase()),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    ),
                    FlatButton(
                      child: Text('ok'.toUpperCase()),
                      onPressed: () {
                        Navigator.pop(context);
                        RewardedVideoAd.instance.show();
                      },
                    ),
                  ],
                );
              },
            );
          },
          label: Text('Hint'),
          icon: Icon(Icons.card_giftcard),
        )
      : null;
}

Terakhir, hapus pemroses peristiwa iklan reward di metode callback dispose().

lib/game_route.dart

@override
void dispose() {
  ...

  // TODO: Remove Rewarded Ad event listener
  RewardedVideoAd.instance.listener = null;

  ...

  super.dispose();
}

Selesai. Jalankan project dan tonton iklan reward untuk mendapatkan petunjuk tambahan.

2a79a3db6b44dae9.gif

9db81af632cb2b15.pngAnda telah menemukan hal yang istimewa!

Anda telah menyelesaikan codelab. Anda dapat menemukan kode yang sudah selesai untuk codelab ini di folder android_studio_folder.pngcomplete.

Untuk mempelajari lebih lanjut, coba codelab Flutter lain.