Tampilan banner adalah iklan teks atau gambar persegi panjang yang menempati tempat di layar. Iklan tetap berada di layar saat pengguna berinteraksi dengan aplikasi, dan 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 uji dengan iklan percobaan
Kode contoh berikut berisi ID unit iklan yang dapat Anda gunakan untuk meminta iklan percobaan. Alat ini telah dikonfigurasi secara khusus agar menampilkan iklan percobaan, bukan iklan produksi untuk setiap permintaan, sehingga aman untuk digunakan.
Namun, setelah mendaftarkan aplikasi di antarmuka web Ad Manager dan membuat ID unit iklan sendiri untuk digunakan di aplikasi, konfigurasikan perangkat Anda sebagai perangkat pengujian secara eksplisit selama pengembangan.
/6499/example/banner
Menginisialisasi Mobile Ads SDK
Sebelum memuat iklan, minta aplikasi Anda melakukan inisialisasi Mobile Ads SDK dengan memanggil MobileAds.Initialize()
. Hal ini hanya perlu dilakukan sekali, idealnya pada saat peluncuran aplikasi.
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 bahwa semua adaptor mediasi telah diinisialisasi.
Contoh BannerView
Kode contoh di bawah menjelaskan cara menggunakan tampilan banner. Dalam contoh ini, Anda membuat instance tampilan banner, menggunakan AdManagerAdRequest
untuk memuat iklan ke tampilan banner, lalu 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 = "/6499/example/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 tempatAdManagerBannerView
akan memuat iklan.AdSize
: Ukuran iklan yang ingin Anda gunakan. Lihat Ukuran banner untuk detailnya.AdPosition
: Posisi tempat tampilan banner harus ditempatkan. EnumAdPosition
mencantumkan nilai posisi iklan yang valid.
Perhatikan cara berbagai unit iklan digunakan, 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 terkait lokasi penempatan AdManagerBannerView
di layar dibandingkan dengan 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
ditempatkan pada nilai x dan y yang diteruskan ke konstruktor, dengan tempat asal
di kiri atas layar.
(Opsional) Buat tampilan banner dengan ukuran kustom
Selain menggunakan konstanta AdSize
, Anda juga dapat menentukan ukuran kustom
untuk iklan Anda:
// 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 dapat memenuhi syarat untuk ditayangkan
di AdManagerBannerView
. Sebelum menerapkan fitur ini di SDK, buat
item baris yang menargetkan unit iklan yang sama yang dikaitkan dengan materi iklan dengan ukuran 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 pada waktu pemuatan ulang, tata letak Anda harus dapat
otomatis beradaptasi dengan ukuran baru. AdManagerAdView
ditetapkan secara default ke ukuran
yang diteruskan di parameter pertama hingga iklan berikutnya ditampilkan.
Memuat iklan banner
Setelah AdManagerBannerView
diterapkan, lanjutkan untuk memuat
iklan dengan metode LoadAd()
di class
AdManagerBannerView
. Dibutuhkan 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);
}
Memproses peristiwa penayangan banner
Untuk menyesuaikan perilaku iklan, Anda dapat mengaitkan ke 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.");
};
}
Menutup tampilan banner
Setelah selesai menggunakan tampilan banner, pastikan untuk memanggil Destroy()
guna 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 sekarang siap untuk menampilkan iklan banner.
Ukuran spanduk
Tabel di bawah mencantumkan ukuran banner standar.
Ukuran dalam dp (WxT) | Deskripsi | Ketersediaan | Konstanta AdSize |
---|---|---|---|
320x50 | Spanduk Standar | Ponsel dan Tablet | BANNER |
320x100 | Spanduk Besar | Ponsel dan Tablet | LARGE_BANNER |
300x250 | Persegi Panjang Sedang IAB | Ponsel dan Tablet | MEDIUM_RECTANGLE |
468x60 | Banner Ukuran Penuh IAB | Tablet | FULL_BANNER |
728x90 | Papan Peringkat IAB | Tablet | LEADERBOARD |
Lebar yang diberikan x Tinggi adaptif | Banner adaptif | Ponsel dan Tablet | T/A |
Lebar layar x 32|50|90 | Banner cerdas | Ponsel dan Tablet | SMART_BANNER |
Pelajari lebih lanjut Banner Adaptif, yang ditujukan untuk menggantikan Banner Cerdas. |
Peristiwa aplikasi
Peristiwa aplikasi memungkinkan Anda membuat iklan yang dapat mengirimkan pesan ke kode aplikasi mereka. Selanjutnya, aplikasi dapat mengambil tindakan berdasarkan pesan tersebut.
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
dinaikkan saat peristiwa aplikasi terjadi di iklan. Berikut adalah
contoh cara menangani peristiwa ini di kode Anda:
_bannerview.OnAppEventReceived += (AppEvent args) =>
{
Debug.Log($"Received app event from the ad: {args.Name}, {args.Value}.");
};
Berikut adalah contoh yang menunjukkan cara mengubah warna latar belakang aplikasi 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;
}
}
};
Dan berikut adalah materi iklan yang sesuai yang mengirimkan peristiwa aplikasi warna:
<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: Penerapan minimal semua format iklan.