Iklan banner

Pilih platform: Android iOS Unity Flutter

Tampilan banner adalah iklan gambar atau teks persegi panjang yang menempati suatu tempat di layar. Iklan banner tetap muncul di layar saat pengguna berinteraksi dengan aplikasi, dan iklan dapat dimuat ulang secara otomatis setelah jangka waktu tertentu. Jika periklanan seluler merupakan hal yang baru bagi Anda, iklan Banner adalah pilihan pertama yang baik.

Panduan ini menunjukkan cara mengintegrasikan tampilan banner ke dalam aplikasi Unity. Selain cuplikan kode dan petunjuk, panduan ini juga menyertakan informasi tentang cara menentukan ukuran banner dengan benar dan link ke referensi tambahan.

Prasyarat

• Selesaikan Panduan memulai.

Selalu lakukan pengujian dengan iklan percobaan

Kode contoh berikut berisi ID unit iklan yang dapat Anda gunakan untuk meminta iklan percobaan. Konfigurasi khusus ini akan menampilkan iklan percobaan, bukan iklan produksi untuk setiap permintaan, sehingga aman digunakan.

Namun, setelah Anda mendaftarkan aplikasi di antarmuka web Ad Manager dan membuat ID unit iklan sendiri untuk digunakan di aplikasi, konfigurasi perangkat Anda secara eksplisit sebagai perangkat pengujian selama pengembangan.

/21775744923/example/adaptive-banner

Menginisialisasi Mobile Ads SDK

Sebelum memuat iklan, aplikasi harus menginisialisasi Mobile Ads SDK dengan memanggil MobileAds.Initialize(). Langkah ini hanya perlu dilakukan sekali, idealnya saat aplikasi diluncurkan.

using GoogleMobileAds;
using GoogleMobileAds.Api;

public class GoogleMobileAdsDemoScript : MonoBehaviour
{
    public void Start()
    {
        // Initialize the Google Mobile Ads SDK.
        MobileAds.Initialize((InitializationStatus initStatus) =>
        {
            // This callback is called once the MobileAds SDK is initialized.
        });
    }
}

Jika Anda menggunakan mediasi, tunggu hingga callback terjadi sebelum memuat iklan karena tindakan ini akan memastikan semua adaptor mediasi diinisialisasi.

Contoh BannerView

Contoh kode di bawah menjelaskan cara menggunakan tampilan banner. Dalam contoh ini, Anda membuat instance tampilan banner, menggunakan AdManagerAdRequest untuk memuat iklan ke tampilan banner, dan kemudian memperluas kemampuannya dengan menangani peristiwa siklus proses.

Membuat tampilan banner

Langkah pertama dalam menggunakan tampilan banner adalah membuat instance tampilan banner dalam skrip C# yang dilampirkan ke GameObject.

  // This ad unit is configured to always serve test ads.
  private string _adUnitId = "/21775744923/example/adaptive-banner";

  AdManagerBannerView _bannerView;

  /// <summary>
  /// Creates a 320x50 banner view at top of the screen.
  /// </summary>
  public void CreateBannerView()
  {
      Debug.Log("Creating banner view");

      // If we already have a banner, destroy the old one.
      if (_bannerView != null)
      {
          DestroyAd();
      }

      // Create a 320x50 banner at top of the screen
      _bannerView = new AdManagerBannerView(_adUnitId, AdSize.Banner, AdPosition.Top);
  }

Konstruktor untuk AdManagerBannerView memiliki parameter berikut:

• adUnitId: ID unit iklan tempat AdManagerBannerView harus memuat iklan.
• AdSize: Ukuran iklan yang ingin Anda gunakan. Lihat Ukuran banner untuk mengetahui detailnya.
• AdPosition: Posisi tempat tampilan banner harus ditempatkan. Enum AdPosition mencantumkan nilai posisi iklan yang valid.

Perhatikan cara penggunaan berbagai unit iklan, bergantung pada platformnya. Anda harus menggunakan unit iklan iOS untuk membuat permintaan iklan di iOS dan unit iklan Android untuk membuat permintaan di Android.

(Opsional) Membuat tampilan banner dengan posisi kustom

Untuk kontrol yang lebih besar terhadap penempatan AdManagerBannerView di layar daripada yang ditawarkan oleh nilai AdPosition, gunakan konstruktor yang memiliki koordinat x dan y sebagai parameter:

// Create a 320x50 banner views at coordinate (0,50) on screen.
_bannerView = new AdManagerBannerView(_adUnitId, AdSize.Banner, 0, 50);

Sudut kiri atas AdManagerBannerView diposisikan di nilai x dan y yang diteruskan ke konstruktor, dengan asal adalah kiri atas layar.

(Opsional) Buat tampilan banner dengan ukuran kustom

Selain menggunakan konstanta AdSize, Anda juga dapat menentukan ukuran kustom untuk iklan:

// Use the AdSize argument to set a custom size for the ad.
AdSize adSize = new AdSize(250, 250);
_bannerView = new AdManagerBannerView(_adUnitId, adSize, AdPosition.Bottom);

(Opsional) Beberapa ukuran iklan

Ad Manager memungkinkan Anda menentukan beberapa ukuran iklan yang memenuhi syarat untuk ditayangkan di AdManagerBannerView. Sebelum menerapkan fitur ini di SDK, buat item baris yang menargetkan unit iklan yang sama yang terkait dengan materi iklan berukuran berbeda.

Di aplikasi Anda, teruskan beberapa parameter AdSize ke ValidAdSizes:

var adView = new AdManagerBannerView(_adUnitId, AdSize.Banner, AdPosition.Top);
adView.ValidAdSizes = new List<AdSize>
{
    AdSize.Banner, new AdSize(120, 20), new AdSize(250, 250),
};

Jika AdManagerAdView berubah ukuran saat waktu pembaruan, tata letak Anda harus dapat beradaptasi secara otomatis dengan ukuran baru. AdManagerAdView secara default adalah ukuran yang diteruskan dalam parameter pertama hingga iklan berikutnya ditampilkan.

Memuat iklan banner

Setelah AdManagerBannerView diterapkan, lanjutkan untuk memuat iklan dengan metode LoadAd() di class AdManagerBannerView. Parameter ini menggunakan parameter yang menyimpan informasi runtime, seperti info penargetan, label pengecualian, dan ID yang diberikan penayang.

/// <summary>
/// Creates the banner view and loads a banner ad.
/// </summary>
public void LoadAd()
{
    // create an instance of a banner view first.
    if(_bannerView == null)
    {
        CreateAdManagerBannerView();
    }

    // create our request used to load the ad.
    var adRequest = new AdManagerAdRequest();

    // send the request to load the ad.
    Debug.Log("Loading banner ad.");
    _bannerView.LoadAd(adRequest);
}

Tips: Anda dapat menggunakan panggilan pemuatan iklan untuk membuat cache iklan yang telah dimuat sebelumnya sebelum Anda berencana menayangkannya, sehingga iklan dapat ditayangkan dengan latensi nol saat diperlukan. Karena masa berlaku iklan adalah satu jam, Anda harus menghapus cache ini dan memuat ulang dengan iklan baru setiap jam.

Memproses peristiwa tampilan banner

Untuk menyesuaikan perilaku iklan, Anda dapat menggunakan sejumlah peristiwa dalam siklus proses iklan, seperti pemuatan, pembukaan, atau penutupan. Untuk memproses peristiwa ini, daftarkan delegasi:

/// <summary>
/// listen to events the banner view may raise.
/// </summary>
private void ListenToAdEvents()
{
    // Raised when an ad is loaded into the banner view.
    _bannerView.OnBannerAdLoaded += () =>
    {
        Debug.Log("Banner view loaded an ad with response : "
            + _bannerView.GetResponseInfo());
    };
    // Raised when an ad fails to load into the banner view.
    _bannerView.OnBannerAdLoadFailed += (LoadAdError error) =>
    {
        Debug.LogError("Banner view failed to load an ad with error : "
            + error);
    };
    // Raised when the ad is estimated to have earned money.
    _bannerView.OnAdPaid += (AdValue adValue) =>
    {
        Debug.Log(String.Format("Banner view paid {0} {1}.",
            adValue.Value,
            adValue.CurrencyCode));
    };
    // Raised when an impression is recorded for an ad.
    _bannerView.OnAdImpressionRecorded += () =>
    {
        Debug.Log("Banner view recorded an impression.");
    };
    // Raised when a click is recorded for an ad.
    _bannerView.OnAdClicked += () =>
    {
        Debug.Log("Banner view was clicked.");
    };
    // Raised when an ad opened full screen content.
    _bannerView.OnAdFullScreenContentOpened += () =>
    {
        Debug.Log("Banner view full screen content opened.");
    };
    // Raised when the ad closed full screen content.
    _bannerView.OnAdFullScreenContentClosed += () =>
    {
        Debug.Log("Banner view full screen content closed.");
    };
}

Menghancurkan tampilan banner

Setelah selesai menggunakan tampilan banner, pastikan untuk memanggil Destroy() untuk melepaskan resource.

/// <summary>
/// Destroys the banner view.
/// </summary>
public void DestroyAd()
{
    if (_bannerView != null)
    {
        Debug.Log("Destroying banner view.");
        _bannerView.Destroy();
        _bannerView = null;
    }
}

Selesai. Aplikasi Anda kini siap menampilkan iklan banner.

Memperbarui iklan

Jika mengonfigurasi unit iklan untuk dimuat ulang, Anda tidak perlu meminta iklan lain saat iklan gagal dimuat. Google Mobile Ads SDK mematuhi kecepatan refresh 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.

Catatan: Saat menyetel kecepatan refresh di UI Ad Manager, refresh otomatis hanya terjadi jika banner terlihat di layar.

Ukuran spanduk

Tabel di bawah mencantumkan ukuran banner standar.

Ukuran dalam dp (WxH)	Deskripsi	Ketersediaan	Konstanta AdSize
320x50	Spanduk Standar	Ponsel dan Tablet	BANNER
320x100	Banner Besar	Ponsel dan Tablet	LARGE_BANNER
300x250	Kotak Sedang IAB	Ponsel dan Tablet	MEDIUM_RECTANGLE
468x60	Banner Ukuran Penuh IAB	Tablet	FULL_BANNER
728x90	Banner IAB	Tablet	LEADERBOARD
Lebar yang diberikan x Tinggi adaptif	Banner adaptif	Ponsel dan Tablet	T/A
Lebar layar x 32|50|90	Banner pintar	Ponsel dan Tablet	SMART_BANNER
Pelajari lebih lanjut Banner Adaptif, yang dimaksudkan untuk menggantikan Banner Cerdas.

Catatan: Jika aplikasi Android mencoba memuat banner yang terlalu besar untuk tata letaknya, SDK tidak akan menampilkannya, tetapi mencatat pesan error.

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 AppEvent. Peristiwa ini dapat terjadi kapan saja selama siklus proses iklan, bahkan sebelum pemuatan dipanggil.

namespace GoogleMobileAds.Api.AdManager;

/// The App event message sent from the ad.
public class AppEvent
{
    // Name of the app event.
    string Name;
    // Argument passed from the app event.
    string Value;
}

OnAppEventReceived dipicu saat peristiwa aplikasi terjadi di iklan. Berikut adalah contoh cara menangani peristiwa ini dalam kode Anda:

_bannerview.OnAppEventReceived += (AppEvent args) =>
{
    Debug.Log($"Received app event from the ad: {args.Name}, {args.Value}.");
};

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

_bannerview.OnAppEventReceived += (AppEvent args) =>
{
  if (args.Name == "color")
  {
    Color color;
    if (ColorUtility.TryParseColor(arg.Value, out color))
    {
      gameObject.GetComponent<Renderer>().material.color = color;
    }
  }
};

Berikut adalah materi iklan terkait yang mengirim peristiwa aplikasi mewarnai:

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

Referensi lainnya

• Contoh HelloWorld: Implementasi minimal dari semua format iklan.