Menambahkan iklan inline native dan banner AdMob ke aplikasi Flutter

1. Pengantar

Dalam codelab ini, Anda akan menerapkan iklan inline native AdMob dan banner AdMob di aplikasi Flutter.

Yang akan Anda buat

Codelab ini memberi Anda panduan dalam menerapkan iklan inline native AdMob dan banner inline AdMob di aplikasi Flutter menggunakan plugin Google Mobile Ads untuk Flutter.

Jika Anda mengalami masalah (bug kode, kesalahan tata bahasa, susunan kata yang tidak jelas, dan sebagainya) saat Anda mempelajari codelab ini, laporkan masalah tersebut menggunakan link Laporkan kesalahan di pojok kiri bawah codelab.

Yang akan Anda pelajari

  • Cara mengonfigurasi plugin Flutter Google Mobile Ads
  • Cara menerapkan iklan reward dan banner inline di aplikasi Flutter

Yang Anda butuhkan

  • Android Studio 4.1 atau yang lebih baru
  • Xcode 12 atau yang lebih baru (untuk pengembangan iOS)

Bagaimana Anda menilai tingkat kemahiran Anda dengan AdMob?

Pemula Menengah Mahir

Bagaimana Anda menilai tingkat kemahiran Anda dengan Flutter?

Pemula Menengah Mahir

2. Menyiapkan lingkungan pengembangan Flutter Anda

Anda memerlukan dua software untuk menyelesaikan lab ini—Flutter SDK dan editor.

Anda dapat menjalankan codelab menggunakan salah satu perangkat berikut:

  • Perangkat Android atau iOS fisik yang terhubung ke komputer dan disetel ke mode Developer.
  • Simulator iOS (perlu menginstal alat Xcode).
  • Android Emulator (memerlukan penyiapan di Android Studio).
  • Browser (Chrome diperlukan untuk proses debug).
  • Aplikasi desktop Windows, Linux, atau macOS. Anda harus melakukan pengembangan di platform tempat Anda berencana men-deploy aplikasi. Jadi, jika ingin mengembangkan aplikasi desktop Windows, Anda harus mengembangkannya di Windows untuk mengakses rantai build yang sesuai. Ada persyaratan spesifik per sistem operasi yang dibahas secara mendetail di docs.flutter.dev/desktop.

Mendownload kode

Setelah Anda mendownload file zip, ekstrak kontennya. Anda akan memiliki folder bernama admob-inline-ads-in-flutter-main.

Atau, Anda dapat membuat clone repositori GitHub dari command line:

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

Repositori ini berisi tiga folder:

  • android_studio_folder.png starter: Kode awal yang akan Anda buat dalam codelab ini.
  • android_studio_folder.png complete: Kode yang sudah selesai untuk codelab ini. (Java & Objective-C untuk kode native)
  • android_studio_folder.png complete_kotlin_swift: Kode yang sudah jadi untuk codelab ini. (Kotlin & Swift untuk kode native)

3. Menyiapkan aplikasi dan unit iklan AdMob

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

Penyiapan untuk Android

Guna melakukan penyiapan untuk Android, Anda harus menambahkan aplikasi Android dan membuat unit iklan.

Menambahkan aplikasi Android

  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 AdMob inline ads di kolom nama aplikasi, lalu pilih Android sebagai platform.

d51828db0e2e4f6c.png

  1. Anda tidak perlu mengaktifkan metrik pengguna untuk menyelesaikan codelab ini. Namun, sebaiknya Anda melakukannya karena tindakan tersebut akan memungkinkan Anda memahami perilaku pengguna secara lebih detail. Klik TAMBAHKAN untuk menyelesaikan prosesnya.

b918bf44362813a9.png

Membuat unit iklan

Untuk menambahkan unit iklan:

  1. Pilih aplikasi Iklan inline AdMob dari menu Aplikasi di konsol AdMob.
  2. Klik menu Unit iklan.

Banner

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

Native

  1. Klik TAMBAHKAN UNIT IKLAN.
  2. Pilih Native advanced sebagai format.
  3. Masukkan android-inline-native di kolom Nama unit iklan.
  4. Klik BUAT UNIT IKLAN untuk menyelesaikan prosesnya.

Biasanya diperlukan waktu beberapa jam sebelum unit iklan baru dapat menayangkan iklan.

Jika Anda ingin segera menguji perilaku iklan, gunakan ID aplikasi dan ID unit iklan percobaan yang tercantum di tabel ID aplikasi Android/ID unit iklan dan ID aplikasi iOS/ID unit iklan.

Penyiapan untuk iOS

Guna melakukan penyiapan untuk iOS, Anda harus menambahkan aplikasi iOS dan membuat unit iklan.

Menambahkan aplikasi iOS

  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 AdMob inline ads di kolom nama aplikasi, lalu pilih iOS sebagai platform.

a4c963c9aa09519.png

  1. Anda tidak perlu mengaktifkan metrik pengguna untuk menyelesaikan codelab ini. Namun, sebaiknya Anda melakukannya karena tindakan tersebut akan memungkinkan Anda memahami perilaku pengguna secara lebih detail. Klik TAMBAHKAN untuk menyelesaikan prosesnya.

b918bf44362813a9.png

Membuat unit iklan

Untuk menambahkan unit iklan:

  1. Pilih aplikasi Iklan inline AdMob dari menu Aplikasi di konsol AdMob.
  2. Klik menu Unit iklan.

Banner

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

Native

  1. Klik TAMBAHKAN UNIT IKLAN.
  2. Pilih Native advanced sebagai format.
  3. Masukkan ios-inline-native di kolom Nama unit iklan.
  4. Klik BUAT UNIT IKLAN untuk menyelesaikan prosesnya.

Biasanya diperlukan waktu beberapa jam sebelum unit iklan baru dapat menayangkan iklan.

Jika Anda ingin segera menguji perilaku iklan, gunakan ID aplikasi dan ID unit iklan uji coba yang tercantum dalam tabel berikut.

Opsional: Menggunakan aplikasi dan unit iklan uji coba AdMob

Jika Anda ingin mengikuti codelab ini, bukannya membuat aplikasi dan unit iklan baru Anda sendiri, gunakan ID aplikasi dan ID unit iklan uji coba AdMob yang tercantum dalam tabel berikut.

ID aplikasi/ID unit iklan Android

Item

ID unit iklan/ID aplikasi

ID aplikasi AdMob

ca-app-pub-3940256099942544~3347511713

Banner

ca-app-pub-3940256099942544/6300978111

Native

ca-app-pub-3940256099942544/2247696110

ID aplikasi/ID unit iklan iOS

Item

ID unit iklan/ID aplikasi

ID aplikasi AdMob

ca-app-pub-3940256099942544~1458002511

Banner

ca-app-pub-3940256099942544/2934735716

Native

ca-app-pub-3940256099942544/3986624511

Untuk informasi selengkapnya tentang iklan uji coba, lihat dokumentasi developer iklan uji coba Android dan iklan uji coba iOS.

4. Menambahkan plugin Flutter Google Mobile Ads

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

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

Karena Flutter adalah SDK multiplatform, plugin google_mobile_ads berlaku untuk iOS dan Android. Jadi, jika Anda menambahkan plugin ke aplikasi Flutter, plugin tersebut akan digunakan oleh aplikasi iklan inline AdMob versi Android dan iOS.

Menambahkan plugin Google Mobile Ads sebagai dependensi

Untuk mengakses daftar API AdMob dari project Iklan inline AdMob, tambahkan google_mobile_ads sebagai dependensi ke file pubspec.yaml yang terletak di root project.

pubspec.yaml

...
dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^0.3.9

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

...

Klik Pub get untuk menginstal plugin dalam project Iklan inline AdMob.

93ef6061e58ebc86.pngS

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> beserta nama com.google.android.gms.ads.APPLICATION_ID. Misalnya, jika ID aplikasi AdMob Anda adalah ca-app-pub-3940256099942544~3347511713, Anda harus menambahkan baris berikut ke file AndroidManifest.xml.

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>
...

5. Menambahkan class helper untuk iklan

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

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

ad_helper.dart

import 'dart:io';

class AdHelper {

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

  static String get nativeAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_NATIVE_AD_UNIT_ID>";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_NATIVE_AD_UNIT_ID>";
    } else {
      throw UnsupportedError("Unsupported platform");
    }
  }
}

Gunakan cuplikan kode berikut jika Anda ingin menggunakan ID aplikasi dan ID unit iklan uji coba AdMob.

ad_helper.dart

import 'dart:io';

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

6. Menginisialisasi Google Mobile Ads SDK

Sebelum memuat iklan, Anda harus menginisialisasi Google Mobile Ads SDK. Buka file lib/home_page.dart, lalu ubah _initGoogleMobileAds() untuk menginisialisasi SDK sebelum halaman beranda dimuat.

Perhatikan bahwa Anda harus mengubah jenis nilai yang ditampilkan metode _initGoogleMobileAds() dari Future<dynamic> menjadi Future<InitializationStatus> untuk mendapatkan hasil inisialisasi SDK setelah prosesnya selesai.

home_page.dart

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

import 'package:flutter/material.dart';

...

class HomePage extends StatelessWidget {

  ...

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

7. Menambahkan iklan banner

Di bagian ini, Anda akan menampilkan iklan banner di bagian tengah daftar, seperti yang ditunjukkan pada screenshot berikut.

62c405c962909fd3.pngS

  1. Buka file lib/banner_inline_page.dart.
  2. Impor ad_helper.dart dan google_mobile_ads.dart dengan menambahkan baris berikut:
...

// TODO: Import ad_helper.dart
import 'package:admob_inline_ads_in_flutter/ad_helper.dart';

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

class BannerInlinePage extends StatefulWidget {
  ...
}
  1. Pada class _BannerInlinePageState, tambahkan anggota dan metode berikut untuk iklan banner.

Perhatikan bahwa _kAdIndex menunjukkan indeks tempat iklan banner akan ditampilkan, dan baris ini digunakan untuk menghitung indeks item dari metode _getDestinationItemIndex().

banner_inline_page.dart

class _BannerInlinePageState extends State<BannerInlinePage> {

  // TODO: Add _kAdIndex
  static final _kAdIndex = 4;

  // TODO: Add a banner ad instance
  BannerAd? _ad;

  ...

  // TODO: Add _getDestinationItemIndex()
  int _getDestinationItemIndex(int rawIndex) {
    if (rawIndex >= _kAdIndex && _ad != null) {
      return rawIndex - 1;
    }
    return rawIndex;
  }

  ...
}
  1. Pada metode initState(), buat dan muat BannerAd untuk banner berukuran 320x50 (AdSize.banner). Perhatikan bahwa pemroses peristiwa iklan dikonfigurasi untuk mengupdate UI (setState()) saat iklan dimuat.

banner_inline_page.dart

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

  // TODO: Load a banner ad
  BannerAd(
    adUnitId: AdHelper.bannerAdUnitId,
    size: AdSize.banner,
    request: AdRequest(),
    listener: BannerAdListener(
      onAdLoaded: (ad) {
        setState(() {
          _ad = ad as BannerAd;
        });
      },
      onAdFailedToLoad: (ad, error) {
        // Releases an ad resource when it fails to load
        ad.dispose();
        print('Ad load failed (code=${error.code} message=${error.message})');
      },
    ),
  ).load();
}
  1. Ubah metode build() agar menampilkan iklan banner jika tersedia.
  2. Perbarui itemCount, agar menghitung entri iklan banner, lalu perbarui itemBuilder, agar merender iklan banner pada indeks iklan (_kAdIndex) saat iklan dimuat.
  3. Perbarui kode agar menggunakan metode _getDestinationItemIndex() untuk mengambil indeks item konten.

banner_inline_page.dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    ...
    body: ListView.builder(
      // TODO: Adjust itemCount based on the ad load state
      itemCount: widget.entries.length + (_ad != null ? 1 : 0),
      itemBuilder: (context, index) {
        // TODO: Render a banner ad
        if (_ad != null && index == _kAdIndex) {
          return Container(
            width: _ad!.size.width.toDouble(),
            height: 72.0,
            alignment: Alignment.center,
            child: AdWidget(ad: _ad!),
          );
        } else {
          // TODO: Get adjusted item index from _getDestinationItemIndex()
          final item = widget.entries[_getDestinationItemIndex(index)];

          return ListTile(
            ...
          );
        }
      },
    ),
  );
}
  1. Rilis resource yang terkait dengan objek BannerAd dengan memanggil metode BannerAd.dispose() dalam metode callback dispose().

banner_inline_page.dart

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

  super.dispose();
}

Selesai. Jalankan project, lalu klik tombol Iklan inline banner dari halaman beranda. Setelah iklan dimuat, Anda akan melihat iklan banner di bagian tengah daftar.

a5f857a850539fe9.png c32af50872514224.png

8. Menambahkan iklan native

Di bagian ini, Anda akan menampilkan iklan native di bagian tengah daftar, seperti yang ditunjukkan pada screenshot berikut.

f1671b0fa349ccf8.png

Iklan native ditampilkan kepada pengguna yang menggunakan komponen UI yang merupakan bagian asli dari platform (misalnya View di Android atau UIView di iOS).

Namun, kita tidak dapat langsung membuat komponen UI asli menggunakan widget Flutter. Jadi, Anda harus menerapkan NativeAdFactory untuk setiap platform, yang digunakan untuk membuat tampilan iklan native khusus platform (NativeAdView di Android dan GADNativeAdView di iOS) dari objek iklan native (NativeAd di Android dan GADNativeAd di iOS).

Menerapkan NativeAdFactory untuk Android (Java)

  1. Buka file android/build.gradle (atau file apa pun di folder android), lalu klik Buka untuk Diedit di Android Studio untuk membuka project Android.

623ad3d2282ccbf8.pngS

  1. Jika Anda diminta untuk memilih jendela untuk membuka project baru, klik Jendela Baru agar project Flutter tetap terbuka saat Anda mengerjakan project Android.

d188bb51cf7c2d08.png

Membuat tata letak iklan native

  1. Di project Android yang sudah dibuka, klik kanan aplikasi dari panel project di Android Studio, lalu pilih Baru > File Resource Android dari menu konteks.

2b629ee277a68fd7.pngS

  1. Pada dialog File Resource Baru, masukkan list_tile_native_ad.xml sebagai nama file.
  2. Pilih Tata Letak sebagai jenis resource, lalu masukkan com.google.android.gms.ads.nativead.NativeAdView sebagai elemen root.
  3. Klik Oke untuk membuat file tata letak baru.

575f126dd018bc0.pngS

  1. Terapkan tata letak iklan sebagai berikut. Perhatikan bahwa tata letak harus sesuai dengan desain visual pengalaman pengguna untuk platform yang diinginkan.

list_tile_native_ad.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.gms.ads.nativead.NativeAdView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#F19938"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:textSize="12sp" />

        <ImageView
            android:id="@+id/iv_list_tile_native_ad_icon"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:scaleType="fitXY"
            tools:background="#EDEDED" />

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_large"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:background="#F19938"
            android:gravity="center"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:visibility="invisible" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="80dp"
            android:layout_marginLeft="80dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_list_tile_native_ad_headline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#000000"
                android:textSize="16sp"
                tools:text="Headline" />

            <TextView
                android:id="@+id/tv_list_tile_native_ad_body"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#828282"
                android:textSize="14sp"
                tools:text="body" />

        </LinearLayout>

    </FrameLayout>

</com.google.android.gms.ads.nativead.NativeAdView>

Membuat class ListTileNativeAdFactory

  1. Di panel Project, klik kanan paket com.codelab.flutter.admobinlineads, lalu pilih Baru > Class Java.

9f3f111dd207a9b4.pngS

  1. Masukkan ListTileNativeAdFactory sebagai nama, lalu pilih Class dari daftar.

47ff82d92676e26.pngS

  1. Setelah dialog Class Baru muncul, kosongkan semuanya lalu klik Oke.

Anda akan melihat bahwa class ListTileNativeAdFactory telah dibuat di paket com.codelab.flutter.admobinlineads.

e4ed232c358ffb19.png

  1. Terapkan class ListTileNativeAdFactory seperti berikut. Perhatikan bahwa class tersebut menerapkan metode createNativeAd() di antarmuka GoogleMobileAdsPlugin.NativeAdFactory.

Class factory bertugas membuat objek tampilan untuk merender iklan native. Seperti yang dapat dilihat dari kodenya, class factory membuat UnifiedNativeAdView dan mengisinya dengan objek NativeAd.

ListTileNativeAdFactory.java

// TODO: Implement ListTileNativeAdFactory class

package com.codelab.flutter.admobinlineads;

import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.Map;

import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin;

class ListTileNativeAdFactory implements GoogleMobileAdsPlugin.NativeAdFactory {

    private final Context context;

    ListTileNativeAdFactory(Context context) {
        this.context = context;
    }

    @Override
    public NativeAdView createNativeAd(
            NativeAd nativeAd, Map<String, Object> customOptions) {
        NativeAdView nativeAdView = (NativeAdView) LayoutInflater.from(context)
                .inflate(R.layout.list_tile_native_ad, null);

        TextView attributionViewSmall = nativeAdView
                .findViewById(R.id.tv_list_tile_native_ad_attribution_small);
        TextView attributionViewLarge = nativeAdView
                .findViewById(R.id.tv_list_tile_native_ad_attribution_large);

        ImageView iconView = nativeAdView.findViewById(R.id.iv_list_tile_native_ad_icon);
        NativeAd.Image icon = nativeAd.getIcon();
        if (icon != null) {
            attributionViewSmall.setVisibility(View.VISIBLE);
            attributionViewLarge.setVisibility(View.INVISIBLE);
            iconView.setImageDrawable(icon.getDrawable());
        } else {
            attributionViewSmall.setVisibility(View.INVISIBLE);
            attributionViewLarge.setVisibility(View.VISIBLE);
        }
        nativeAdView.setIconView(iconView);

        TextView headlineView = nativeAdView.findViewById(R.id.tv_list_tile_native_ad_headline);
        headlineView.setText(nativeAd.getHeadline());
        nativeAdView.setHeadlineView(headlineView);

        TextView bodyView = nativeAdView.findViewById(R.id.tv_list_tile_native_ad_body);
        bodyView.setText(nativeAd.getBody());
        bodyView.setVisibility(nativeAd.getBody() != null ? View.VISIBLE : View.INVISIBLE);
        nativeAdView.setBodyView(bodyView);

        nativeAdView.setNativeAd(nativeAd);

        return nativeAdView;
    }
}

Mendaftarkan class ListTileNativeAdFactory

Instance NativeAdFactory harus didaftarkan ke GoogleMobileAdsPlugin sebelum dapat digunakan dari sisi Flutter.

  1. Buka file MainActivity.java, lalu ganti metode configureFlutterEngine() dan metode cleanUpFlutterEngine().
  2. Daftarkan class ListTileNativeAdFactory dengan ID string unik (listTile) dalam metode configureFlutterEngine().

MainActivity.java

public class MainActivity extends FlutterActivity {

    @Override
    public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
        super.configureFlutterEngine(flutterEngine);

        // TODO: Register the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.registerNativeAdFactory(flutterEngine, "listTile",
                new ListTileNativeAdFactory(getContext()));
    }

    ...
}
  1. Semua pendaftaran instance NativeAdFactory harus dibatalkan selama proses pembersihan. Batalkan pendaftaran class ListTileNativeAdFactory dalam metode cleanUpFlutterEngine().

MainActivity.java

public class MainActivity extends FlutterActivity {

    ...

    @Override
    public void cleanUpFlutterEngine(@NonNull FlutterEngine flutterEngine) {
        super.cleanUpFlutterEngine(flutterEngine);

        // TODO: Unregister the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "listTile");
    }
}

Sekarang Anda siap menggunakan class ListTileNativeAdFactory untuk merender iklan native di Android.

Menerapkan NativeAdFactory untuk Android (Kotlin)

  1. Buka file android/build.gradle (atau file apa pun di folder android), lalu klik Buka untuk Diedit di Android Studio untuk membuka project Android.

623ad3d2282ccbf8.pngS

  1. Jika Anda diminta untuk memilih jendela untuk membuka project baru, klik Jendela Baru agar project Flutter tetap terbuka saat Anda mengerjakan project Android.

d188bb51cf7c2d08.png

Membuat tata letak iklan native

  1. Di project Android yang sudah dibuka, klik kanan aplikasi dari panel project di Android Studio, lalu pilih Baru > File Resource Android dari menu konteks.

2b629ee277a68fd7.pngS

  1. Pada dialog File Resource Baru, masukkan list_tile_native_ad.xml sebagai nama file.
  2. Pilih Tata Letak sebagai jenis resource, lalu masukkan com.google.android.gms.ads.nativead.NativeAdView sebagai elemen root.
  3. Klik Oke untuk membuat file tata letak baru.

575f126dd018bc0.pngS

  1. Terapkan tata letak iklan sebagai berikut. Perhatikan bahwa tata letak harus sesuai dengan desain visual pengalaman pengguna untuk platform yang diinginkan.

list_tile_native_ad.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.gms.ads.nativead.NativeAdView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#F19938"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:textSize="12sp" />

        <ImageView
            android:id="@+id/iv_list_tile_native_ad_icon"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:scaleType="fitXY"
            tools:background="#EDEDED" />

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_large"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:background="#F19938"
            android:gravity="center"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:visibility="invisible" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="80dp"
            android:layout_marginLeft="80dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_list_tile_native_ad_headline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#000000"
                android:textSize="16sp"
                tools:text="Headline" />

            <TextView
                android:id="@+id/tv_list_tile_native_ad_body"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#828282"
                android:textSize="14sp"
                tools:text="body" />

        </LinearLayout>

    </FrameLayout>

</com.google.android.gms.ads.nativead.NativeAdView>

Membuat class ListTileNativeAdFactory

  1. Di panel Project, klik kanan paket com.codelab.flutter.admobinlineads, lalu pilih Baru > File/Class Kotlin.

7311744cb97cad75.png

  1. Masukkan ListTileNativeAdFactory sebagai nama, lalu pilih Class dari daftar.

25691151b5814867.png

  1. Anda akan melihat bahwa class ListTileNativeAdFactory telah dibuat di paket com.codelab.flutter.admobinlineads.
  2. Terapkan class ListTileNativeAdFactory seperti berikut. Perhatikan bahwa class tersebut menerapkan metode createNativeAd() di antarmuka GoogleMobileAdsPlugin.NativeAdFactory.

Class factory bertugas membuat objek tampilan untuk merender iklan native. Seperti yang dapat dilihat dari kodenya, class factory membuat NativeAdView dan mengisinya dengan objek NativeAd.

ListTileNativeAdFactory.kt

// TODO: Implement ListTileNativeAdFactory class

package com.codelab.flutter.admobinlineads

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.widget.ImageView
import android.widget.TextView
import com.google.android.gms.ads.nativead.NativeAd
import com.google.android.gms.ads.nativead.NativeAdView
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin

class ListTileNativeAdFactory(val context: Context) : GoogleMobileAdsPlugin.NativeAdFactory {

    override fun createNativeAd(
            nativeAd: NativeAd,
            customOptions: MutableMap<String, Any>?
    ): NativeAdView {
        val nativeAdView = LayoutInflater.from(context)
                .inflate(R.layout.list_tile_native_ad, null) as NativeAdView

        with(nativeAdView) {
            val attributionViewSmall =
                    findViewById<TextView>(R.id.tv_list_tile_native_ad_attribution_small)
            val attributionViewLarge =
                    findViewById<TextView>(R.id.tv_list_tile_native_ad_attribution_large)

            val iconView = findViewById<ImageView>(R.id.iv_list_tile_native_ad_icon)
            val icon = nativeAd.icon
            if (icon != null) {
                attributionViewSmall.visibility = View.VISIBLE
                attributionViewLarge.visibility = View.INVISIBLE
                iconView.setImageDrawable(icon.drawable)
            } else {
                attributionViewSmall.visibility = View.INVISIBLE
                attributionViewLarge.visibility = View.VISIBLE
            }
            this.iconView = iconView

            val headlineView = findViewById<TextView>(R.id.tv_list_tile_native_ad_headline)
            headlineView.text = nativeAd.headline
            this.headlineView = headlineView

            val bodyView = findViewById<TextView>(R.id.tv_list_tile_native_ad_body)
            with(bodyView) {
                text = nativeAd.body
                visibility = if (nativeAd.body.isNotEmpty()) View.VISIBLE else View.INVISIBLE
            }
            this.bodyView = bodyView

            setNativeAd(nativeAd)
        }

        return nativeAdView
    }
}

Mendaftarkan class ListTileNativeAdFactory

Instance NativeAdFactory harus didaftarkan ke GoogleMobileAdsPlugin sebelum dapat digunakan dari sisi Flutter.

  1. Buka file MainActivity.kt, lalu ganti metode configureFlutterEngine() dan metode cleanUpFlutterEngine().
  2. Daftarkan class ListTileNativeAdFactory dengan ID string unik (listTile) dalam metode configureFlutterEngine().

MainActivity.kt

class MainActivity: FlutterActivity() {

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        // TODO: Register the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.registerNativeAdFactory(
                flutterEngine, "listTile", ListTileNativeAdFactory(context))
    }

    ...
}
  1. Semua pendaftaran instance NativeAdFactory harus dibatalkan selama proses pembersihan. Batalkan pendaftaran class ListTileNativeAdFactory dalam metode cleanUpFlutterEngine().

MainActivity.kt

class MainActivity: FlutterActivity() {
    ...

    override fun cleanUpFlutterEngine(flutterEngine: FlutterEngine) {
        super.cleanUpFlutterEngine(flutterEngine)

        // TODO: Unregister the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "listTile")
    }
}

Sekarang Anda siap menggunakan class ListTileNativeAdFactory untuk merender iklan native di Android.

Menerapkan NativeAdFactory untuk iOS (Objective-C)

Buka file ios/Podfile (atau file apa pun di folder ios), lalu klik Buka modul iOS di Xcode untuk membuka project iOS.

62aa12c10e6d671f.pngS

Menyiapkan tata letak iklan native

Anda harus memiliki tampilan kustom (*.xib) untuk menyusun tata letak aset iklan native. Dalam codelab ini, tampilan yang telah dikonfigurasi sebelumnya digunakan untuk meminimalkan upaya Anda.

Pada project iOS yang dibuka di Xcode, pastikan bahwa ListTileNativeAdView.xib ada di project Runner.

a5f04a32f1868d4f.png

Membuat class ListTileNativeAdFactory

  1. Dari navigator project, klik kanan grup Runner, lalu pilih File Baru guna membuat file header untuk class baru.

6455aab9e9881ca.pngS

  1. Pada dialog template, pilih File Header, lalu beri nama ListTileNativeAdFactory.
  2. Setelah file ListTileNativeAdFactory.h dibuat, tetapkan class ListNativeAdFactory sebagai berikut:

ListTileNativeAdFactory.h

#ifndef ListTileNativeAdFactory_h
#define ListTileNativeAdFactory_h

// TODO: Import FLTGoogleMobileAdsPlugin.h
#import "FLTGoogleMobileAdsPlugin.h"

// TODO: Declare ListTileNativeAdFactory
@interface ListTileNativeAdFactory : NSObject<FLTNativeAdFactory>

@end


#endif /* ListTileNativeAdFactory_h */
  1. Buat file Objective-C dengan memilih File Baru dari grup Runner.
  2. Pada dialog berikutnya, masukkan ListTileNativeAdFactory di kolom File, lalu pilih File Kosong sebagai jenis file.

2c9c998c48db3a0.pngS

  1. Setelah mengklik Berikutnya, Anda akan diminta untuk memilih folder tempat file baru akan dibuat. Jangan ubah apa pun, lalu klik Buat.

8635ffe502d1f4ab.pngS

  1. Terapkan class ListTileNativeFactory seperti berikut. Perhatikan bahwa class menerapkan metode createNativeAd() dalam protokol FLTNativeAdFactory.

Class factory bertugas membuat objek tampilan untuk merender iklan native. Seperti yang dapat dilihat dari kodenya, class factory membuat GADNativeAdView dan mengisinya dengan objek GADNativeAd.

ListTileNativeAdFactory.m

// TODO: Import ListTileNativeAdFactory.h
#import "ListTileNativeAdFactory.h"

// TODO: Implement ListTileNativeAdFactory
@implementation ListTileNativeAdFactory

- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                             customOptions:(NSDictionary *)customOptions {
  GADNativeAdView *nativeAdView =
    [[NSBundle mainBundle] loadNibNamed:@"ListTileNativeAdView" owner:nil options:nil].firstObject;

  ((UILabel *)nativeAdView.headlineView).text = nativeAd.headline;

  ((UILabel *)nativeAdView.bodyView).text = nativeAd.body;
  nativeAdView.bodyView.hidden = nativeAd.body ? NO : YES;

  ((UIImageView *)nativeAdView.iconView).image = nativeAd.icon.image;
  nativeAdView.iconView.hidden = nativeAd.icon ? NO : YES;

  nativeAdView.callToActionView.userInteractionEnabled = NO;

  nativeAdView.nativeAd = nativeAd;

  return nativeAdView;
}

@end

Mendaftarkan class ListTileNativeAdFacotry

Penerapan FLTNativeAdFactory harus didaftarkan ke FLTGoogleMobileAdsPlugin sebelum dapat digunakan dari sisi Flutter.

Buka file AppDelegate.m, lalu daftarkan ListTileNativeAdFactory dengan ID string unik (listTile) melalui pemanggilan metode [FLTGoogleMobileAdsPlugin registerNativeAdFactory].

AppDelegate.m

#import "AppDelegate.h"
#import "GeneratedPluginRegistrant.h"

// TODO: Import ListTileNativeAdFactory.h
#import "ListTileNativeAdFactory.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];

  // TODO: Register ListTileNativeAdFactory
  ListTileNativeAdFactory *listTileFactory = [[ListTileNativeAdFactory alloc] init];
  [FLTGoogleMobileAdsPlugin registerNativeAdFactory:self
                                        factoryId:@"listTile"
                                  nativeAdFactory:listTileFactory];

  // Override point for customization after application launch.
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end

Sekarang Anda siap menggunakan ListTileNativeAdFactory untuk merender iklan native di iOS.

Menerapkan NativeAdFactory untuk iOS (Swift)

Buka file ios/Podfile (atau file apa pun di folder ios), lalu klik Buka modul iOS di Xcode untuk membuka project iOS.

62aa12c10e6d671f.pngS

Menyiapkan tata letak iklan native

Anda harus memiliki tampilan kustom (*.xib) untuk menyusun tata letak aset iklan native. Dalam codelab ini, tampilan yang telah dikonfigurasi sebelumnya digunakan untuk meminimalkan upaya Anda.

Pada project iOS yang dibuka di Xcode, pastikan bahwa ListTileNativeAdView.xib ada di project Runner.

a5f04a32f1868d4f.png

Membuat class ListTileNativeAdFactory

  1. Dari navigator project, klik kanan grup Runner, lalu pilih File Baru guna membuat file header untuk class baru.

9115c92543345ef1.pngS

  1. Pada dialog template, pilih File Swift, lalu beri nama ListTileNativeAdFactory.
  2. Setelah file ListTileNativeAdFactory.swift dibuat, terapkan class ListNativeAdFactory.

Perhatikan bahwa class menerapkan metode createNativeAd() dalam protokol FLTNativeAdFactory.

Class factory bertugas membuat objek tampilan untuk merender iklan native. Seperti yang dapat dilihat dari kodenya, class factory membuat GADNativeAdView dan mengisinya dengan objek GADNativeAd.

ListTileNativeAdFactory.swift

// TODO: Import google_mobile_ads
import google_mobile_ads

// TODO: Implement ListTileNativeAdFactory
class ListTileNativeAdFactory : FLTNativeAdFactory {

    func createNativeAd(_ nativeAd: GADNativeAd,
                        customOptions: [AnyHashable : Any]? = nil) -> GADNativeAdView? {
        let nibView = Bundle.main.loadNibNamed("ListTileNativeAdView", owner: nil, options: nil)!.first
        let nativeAdView = nibView as! GADNativeAdView

        (nativeAdView.headlineView as! UILabel).text = nativeAd.headline

        (nativeAdView.bodyView as! UILabel).text = nativeAd.body
        nativeAdView.bodyView!.isHidden = nativeAd.body == nil

        (nativeAdView.iconView as! UIImageView).image = nativeAd.icon?.image
        nativeAdView.iconView!.isHidden = nativeAd.icon == nil

        nativeAdView.callToActionView?.isUserInteractionEnabled = false

        nativeAdView.nativeAd = nativeAd

        return nativeAdView
    }
}

Mendaftarkan class ListTileNativeAdFacotry

Penerapan FLTNativeAdFactory harus didaftarkan ke FLTGoogleMobileAdsPlugin sebelum dapat digunakan dari sisi Flutter.

Buka file AppDelegate.m, lalu daftarkan ListTileNativeAdFactory dengan ID string unik (listTile) melalui pemanggilan metode FLTGoogleMobileAdsPlugin.registerNativeAdFactory().

AppDelegate.swift

import UIKit
import Flutter

// TODO: Import google_mobile_ads
import google_mobile_ads

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)

    // TODO: Register ListTileNativeAdFactory
    let listTileFactory = ListTileNativeAdFactory()
    FLTGoogleMobileAdsPlugin.registerNativeAdFactory(
        self, factoryId: "listTile", nativeAdFactory: listTileFactory)

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Sekarang Anda siap menggunakan ListTileNativeAdFactory untuk merender iklan native di iOS.

Mengintegrasikan iklan native dengan widget Flutter

  1. Buka file lib/native_inline_page.dart. Kemudian, impor ad_helper.dart dan google_mobile_ads.dart dengan menambahkan baris berikut:

native_inline_page.dart

...

// TODO: Import ad_helper.dart
import 'package:admob_inline_ads_in_flutter/ad_helper.dart';

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

class NativeInlinePage extends StatefulWidget {
  ...
}
  1. Pada class _NativeInlinePageState, tambahkan anggota dan metode berikut untuk iklan native.

Perhatikan bahwa _kAdIndex menunjukkan indeks tempat iklan banner akan ditampilkan, dan baris ini digunakan untuk menghitung indeks item dari metode _getDestinationItemIndex().

native_inline_page.dart

class _NativeInlinePageState extends State<NativeInlinePage> {

  // TODO: Add _kAdIndex
  static final _kAdIndex = 4;

  // TODO: Add a native ad instance
  NativeAd? _ad;

  ...

  // TODO: Add _getDestinationItemIndex()
  int _getDestinationItemIndex(int rawIndex) {
    if (rawIndex >= _kAdIndex && _ad != null) {
      return rawIndex - 1;
    }
    return rawIndex;
  }

  ...
}
  1. Pada metode initState(), buat dan muat NativeAd yang menggunakan ListTileNativeAdFactory untuk membuat tampilan iklan native.

Perhatikan bahwa ID factory di sini (listTile) sama dengan yang digunakan untuk mendaftarkan factory ke plugin.

native_inline_page.dart

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

  // TODO: Create a NativeAd instance
  _ad = NativeAd(
    adUnitId: AdHelper.nativeAdUnitId,
    factoryId: 'listTile',
    request: AdRequest(),
    listener: NativeAdListener(
      onAdLoaded: (ad) {
        setState(() {
          _ad = ad as NativeAd;
        });
      },
      onAdFailedToLoad: (ad, error) {
        // Releases an ad resource when it fails to load
        ad.dispose();
        print('Ad load failed (code=${error.code} message=${error.message})');       },
    ),
  );

  _ad.load();
}
  1. Ubah metode build() agar menampilkan iklan banner jika tersedia.
  2. Perbarui itemCount, agar menghitung entri iklan banner, lalu perbarui itemBuilder, agar merender iklan banner pada indeks iklan (_kAdIndex) saat iklan dimuat.
  3. Perbarui kode agar menggunakan metode _getDestinationItemIndex() untuk mengambil indeks item konten.

native_inline_page.dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    ...
    body: ListView.builder(
      // TODO: Adjust itemCount based on the ad load state
      itemCount: widget.entries.length + (_ad != null ? 1 : 0),
      itemBuilder: (context, index) {
        // TODO: Render a banner ad
        if (_ad != null && index == _kAdIndex) {
          return Container(
            height: 72.0,
            alignment: Alignment.center,
            child: AdWidget(ad: _ad!),
          );
        } else {
          // TODO: Get adjusted item index from _getDestinationItemIndex()
          final item = widget.entries[_getDestinationItemIndex(index)];

          return ListTile(
            ...
          );
        }
      },
    ),
  );
}
  1. Rilis resource yang terkait dengan objek NativeAd dengan memanggil metode NativeAd.dispose() dalam metode callback dispose().

native_inline_page.dart

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

  super.dispose();
}

Selesai. Jalankan project, lalu klik tombol Iklan inline native dari halaman beranda. Setelah iklan dimuat, Anda akan melihat iklan native di bagian tengah daftar.

f1671b0fa349ccf8.png 5ead873222c800eb.png

9. Selesai!

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