Iklan banner

Pilih platform: Android iOS Unity Flutter

Iklan banner adalah iklan persegi panjang yang menempati sebagian tata letak aplikasi. Banner adaptif anchor adalah iklan rasio aspek tetap yang tetap berada di layar saat pengguna berinteraksi dengan aplikasi, baik ditambatkan di bagian atas atau bawah layar.

Panduan ini membahas cara memuat iklan banner adaptif anchor ke dalam aplikasi Android.

Prasyarat

Selalu melakukan pengujian dengan iklan percobaan

Saat membangun dan menguji aplikasi, pastikan Anda menggunakan iklan percobaan, bukan iklan produksi langsung. Jika Anda tidak melakukannya, akun Anda dapat ditangguhkan.

Cara termudah untuk memuat iklan percobaan adalah dengan menggunakan ID unit iklan percobaan khusus kami untuk banner Android:

/21775744923/example/adaptive-banner

Unit iklan ini telah dikonfigurasi secara khusus guna menampilkan iklan percobaan untuk setiap permintaan. Anda dapat menggunakannya di aplikasi Anda sendiri saat melakukan coding, pengujian, dan proses debug. Pastikan Anda menggantinya dengan ID unit iklan Anda sendiri sebelum memublikasikan aplikasi.

Untuk mengetahui informasi selengkapnya tentang cara kerja iklan percobaan Google Mobile Ads SDK, lihat Mengaktifkan iklan percobaan.

Menentukan tampilan iklan

Tata Letak XML

Tambahkan tampilan ke file XML tata letak Anda untuk berfungsi sebagai penampung iklan banner adaptif yang di-anchor:

<!-- Ad view container that fills the width of the screen and adjusts its
    height to the content of the ad. -->
<FrameLayout
        android:id="@+id/ad_view_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_alignParentBottom="true" />

Jetpack Compose

  1. Sertakan modul JetpackComposeDemo/compose-util. Modul ini mencakup helper untuk menyusun objek dan aset AdView.

  2. Menyusun class BannerAd dari modul compose-util:


// Place the ad view at the bottom of the screen.
Column(modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.Bottom) {
  Box(modifier = modifier.fillMaxWidth()) { AdManagerBannerAd(adView, modifier) }
}

Menetapkan ukuran iklan

Tetapkan AdSize ke jenis banner adaptif yang di-anchor dengan lebar yang ditentukan:

Java

// Request an anchored adaptive banner with a width of 360.
adView.setAdSize(AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, 360));

Kotlin

// Request an anchored adaptive banner with a width of 360.
adView.setAdSize(AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, 360))

Jetpack Compose


// Set the adaptive banner ad size with a given width.
val adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(LocalContext.current, 360)
adView.setAdSize(adSize)

Menambahkan AdManagerAdView ke tata letak

Buat AdManagerAdView menggunakan ukuran iklan untuk ditambahkan ke tata letak aplikasi Anda:

Java


// Create a new ad view.
adView = new AdManagerAdView(this);
adView.setAdUnitId(AD_UNIT);
// Request an anchored adaptive banner with a width of 360.
adView.setAdSize(AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, 360));

// Replace ad container with new ad view.
adContainerView.removeAllViews();
adContainerView.addView(adView);

Kotlin


// Create a new ad view.
val adView = AdManagerAdView(this)
adView.adUnitId = AD_UNIT_ID
// Request an anchored adaptive banner with a width of 360.
adView.setAdSize(AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, 360))
this.adView = adView

// Replace ad container with new ad view.
binding.adViewContainer.removeAllViews()
binding.adViewContainer.addView(adView)

Jetpack Compose


val adView = remember { AdManagerAdView(context) }

// Setup and load the adview.
// Set the unique ID for this specific ad unit.
adView.adUnitId = ADMANANGER_ADAPTIVE_BANNER_AD_UNIT_ID

// Set the adaptive banner ad size with a given width.
val adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(LocalContext.current, 360)
adView.setAdSize(adSize)

// Place the ad view at the bottom of the screen.
Column(modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.Bottom) {
  Box(modifier = modifier.fillMaxWidth()) { AdManagerBannerAd(adView, modifier) }
}

Memuat iklan

Setelah AdManagerAdView diterapkan, langkah selanjutnya adalah memuat iklan. Hal ini dilakukan dengan metode loadAd() di class AdManagerAdView. Metode ini mengambil parameter AdManagerAdRequest, yang menyimpan informasi runtime, seperti info penargetan, tentang satu permintaan iklan.

Berikut adalah contoh yang menunjukkan cara memuat iklan:

Java

AdManagerAdRequest adRequest = new AdManagerAdRequest.Builder().build();
adView.loadAd(adRequest);

Kotlin

val adRequest = AdManagerAdRequest.Builder().build()
adView.loadAd(adRequest)

Jika berhasil, aplikasi Anda siap menampilkan iklan banner.

Memperbarui iklan

Jika mengonfigurasi unit iklan untuk memuat ulang, Anda tidak perlu meminta iklan lain saat iklan gagal dimuat. Google Mobile Ads SDK mematuhi kecepatan refresh apa pun yang Anda tentukan di UI Ad Manager. Jika Anda belum mengaktifkan pengambilan data, kirim permintaan baru. Untuk mengetahui detail selengkapnya tentang refresh unit iklan, seperti menyetel kecepatan refresh, lihat Kecepatan refresh untuk iklan di aplikasi seluler.

Melepaskan resource iklan

Setelah selesai menggunakan iklan banner, Anda dapat melepaskan resource iklan banner.

Untuk melepaskan resource iklan, Anda menghapus iklan dari hierarki tampilan dan menghapus semua referensinya:

Java

public void destroyBanner() {
  // Remove banner from view hierarchy.
  if (adView != null) {
    View parentView = (View) adView.getParent();
    if (parentView instanceof ViewGroup) {
      ((ViewGroup) parentView).removeView(adView);
    }

    // Destroy the banner ad resources.
    adView.destroy();
  }

  // Drop reference to the banner ad.
  adView = null;
}

Kotlin

fun destroyBanner() {
  // Remove banner from view hierarchy.
  val parentView = adView?.parent
  if (parentView is ViewGroup) {
    parentView.removeView(adView)
  }

  // Destroy the banner ad resources.
  adView?.destroy()

  // Drop reference to the banner ad.
  adView = null
}

Peristiwa iklan

Anda dapat memproses sejumlah peristiwa dalam siklus proses iklan, termasuk pemuatan, tayangan iklan dan klik, serta peristiwa buka dan tutup iklan. Sebaiknya tetapkan callback sebelum memuat banner.

Java

if (adView != null) {
  adView.setAdListener(
      new AdListener() {
        @Override
        public void onAdClicked() {
          // Code to be executed when the user clicks on an ad.
        }

        @Override
        public void onAdClosed() {
          // Code to be executed when the user is about to return
          // to the app after tapping on an ad.
        }

        @Override
        public void onAdFailedToLoad(@NonNull LoadAdError adError) {
          // Code to be executed when an ad request fails.
        }

        @Override
        public void onAdImpression() {
          // Code to be executed when an impression is recorded
          // for an ad.
        }

        @Override
        public void onAdLoaded() {
          // Code to be executed when an ad finishes loading.
        }

        @Override
        public void onAdOpened() {
          // Code to be executed when an ad opens an overlay that
          // covers the screen.
        }
      });
}

Kotlin

adView?.adListener =
  object : AdListener() {
    override fun onAdClicked() {
      // Code to be executed when the user clicks on an ad.
    }

    override fun onAdClosed() {
      // Code to be executed when the user is about to return
      // to the app after tapping on an ad.
    }

    override fun onAdFailedToLoad(adError: LoadAdError) {
      // Code to be executed when an ad request fails.
    }

    override fun onAdImpression() {
      // Code to be executed when an impression is recorded
      // for an ad.
    }

    override fun onAdLoaded() {
      // Code to be executed when an ad finishes loading.
    }

    override fun onAdOpened() {
      // Code to be executed when an ad opens an overlay that
      // covers the screen.
    }
  }

Setiap metode yang dapat diganti di AdListener sesuai dengan peristiwa dalam siklus proses iklan.

Metode yang dapat diganti
onAdClicked() Metode onAdClicked() dipanggil saat klik dicatat untuk iklan.
onAdClosed() Metode onAdClosed() dipanggil saat pengguna kembali ke aplikasi setelah melihat URL tujuan iklan. Aplikasi Anda dapat menggunakannya untuk melanjutkan aktivitas yang ditangguhkan atau melakukan pekerjaan lain yang diperlukan agar siap untuk berinteraksi.
onAdFailedToLoad() Metode onAdFailedToLoad() adalah satu-satunya yang menyertakan parameter. Parameter error jenis LoadAdError menjelaskan error yang terjadi. Untuk mengetahui informasi selengkapnya, lihat dokumentasi Memecahkan Masalah Error Pemuatan Iklan.
onAdImpression() Metode onAdImpression() dipanggil saat tayangan iklan dicatat untuk iklan.
onAdLoaded() Metode onAdLoaded() dieksekusi saat iklan selesai dimuat. Jika Anda ingin menunda penambahan AdManagerAdView ke aktivitas atau fragmen hingga Anda yakin iklan akan dimuat, misalnya, Anda dapat melakukannya di sini.
onAdOpened() Metode onAdOpened() dipanggil saat iklan membuka overlay yang menutupi layar.

Akselerasi hardware untuk iklan video

Agar iklan video dapat ditampilkan dengan berhasil di penayangan iklan banner Anda, akselerasi hardware harus diaktifkan.

Akselerasi hardware diaktifkan secara default, tetapi beberapa aplikasi dapat memilih untuk menonaktifkannya. Jika hal ini berlaku untuk aplikasi Anda, sebaiknya aktifkan akselerasi hardware untuk class Activity yang menggunakan iklan.

Mengaktifkan akselerasi hardware

Jika aplikasi Anda tidak berperilaku sebagaimana mestinya saat akselerasi hardware diaktifkan secara global, Anda juga dapat mengontrolnya untuk aktivitas tertentu. Untuk mengaktifkan atau menonaktifkan akselerasi hardware, Anda dapat menggunakan atribut android:hardwareAccelerated untuk elemen <application> dan <activity> di AndroidManifest.xml. Contoh berikut mengaktifkan akselerasi hardware untuk seluruh aplikasi, tetapi menonaktifkannya untuk satu aktivitas:

<application android:hardwareAccelerated="true">
    <!-- For activities that use ads, hardwareAcceleration should be true. -->
    <activity android:hardwareAccelerated="true" />
    <!-- For activities that don't use ads, hardwareAcceleration can be false. -->
    <activity android:hardwareAccelerated="false" />
</application>

Lihat panduan Akselerasi hardware untuk mengetahui informasi selengkapnya tentang opsi untuk mengontrol akselerasi hardware. Perhatikan bahwa tampilan iklan individual tidak dapat diaktifkan untuk akselerasi hardware jika aktivitas dinonaktifkan, sehingga aktivitas itu sendiri harus mengaktifkan akselerasi hardware.

Penghitungan tayangan manual

Penghitungan tayangan manual hanya kompatibel dengan kampanye iklan internal dan kampanye yang dijual langsung dengan materi iklan yang diproses secara langsung di Ad Manager. Parameter ini tidak boleh digunakan untuk iklan pengisian ulang atau jaringan pihak ketiga. Untuk mengetahui detail selengkapnya, lihat Menghitung tayangan iklan dan klik.

Anda dapat mengirim ping tayangan secara manual ke Ad Manager jika memiliki kondisi khusus untuk saat tayangan harus dicatat:

Java

if (adManagerAdView != null) {
  adManagerAdView.setManualImpressionsEnabled(true);
}

Kotlin

adManagerAdView?.setManualImpressionsEnabled(true)

Saat Anda menentukan bahwa iklan telah berhasil ditampilkan dan berada di layar, Anda dapat mencatat tayangan iklan secara manual:

Java

if (adManagerAdView != null) {
  adManagerAdView.recordManualImpression();
}

Kotlin

adManagerAdView?.recordManualImpression()

Peristiwa aplikasi

Peristiwa aplikasi memungkinkan Anda membuat iklan yang dapat mengirim pesan ke kode aplikasinya. Aplikasi kemudian dapat mengambil tindakan berdasarkan pesan ini.

Anda dapat memproses peristiwa aplikasi khusus Ad Manager menggunakan AppEventListener. Peristiwa ini dapat terjadi kapan saja selama siklus proses iklan, bahkan sebelum onAdLoaded() dipanggil.

Setel AppEventListener di AdManagerAdView Anda:

Java

if (adManagerAdView != null) {
  adManagerAdView.setAppEventListener(this);
}

Kotlin

adManagerAdView?.appEventListener = this

Berikut adalah contoh yang menunjukkan cara mengubah warna latar belakang aplikasi Anda, bergantung pada peristiwa aplikasi dengan nama warna:

Java

@Override
public void onAppEvent(@NonNull String name, @NonNull String info) {
  if (name.equals("color")) {
    switch (info) {
      case "green":
        // Set background color to green.
        break;
      case "blue":
        // Set background color to blue.
        break;
      default:
        // Set background color to black.
        break;
    }
  }
}

Kotlin

override fun onAppEvent(name: String, info: String) {
  if (name == "color") {
    when (info) {
      "green" -> {
        // Set background color to green.
      }
      "blue" -> {
        // Set background color to blue.
      }
      else -> {
        // Set background color to black.
      }
    }
  }
}

Berikut adalah materi iklan terkait yang mengirim pesan peristiwa aplikasi warna ke Pendengar:

<html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0px;
      left: 0px;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>

Lihat contoh Peristiwa Aplikasi Ad Manager untuk penerapan peristiwa aplikasi di aplikasi Demo API.

Java Kotlin JetpackCompose

Langkah berikutnya

Banner yang dapat diciutkan

Iklan banner yang dapat diciutkan adalah iklan banner yang awalnya ditampilkan sebagai overlay yang lebih besar, dengan tombol untuk menciutkan iklan ke ukuran yang lebih kecil. Sebaiknya gunakan fitur ini untuk mengoptimalkan performa Anda lebih lanjut. Lihat iklan banner yang dapat diciutkan untuk mengetahui detail selengkapnya.

Banner adaptif inline

Banner adaptif inline adalah banner yang lebih besar dan lebih tinggi dibandingkan dengan banner adaptif anchor. Banner ini memiliki tinggi yang bervariasi, dan dapat setinggi layar perangkat. Banner adaptif inline direkomendasikan daripada iklan banner adaptif anchor untuk aplikasi yang menempatkan iklan banner di konten yang dapat di-scroll. Lihat banner adaptif inline untuk mengetahui detail selengkapnya.

Jelajahi topik lainnya