Mengembangkan iklan untuk Google Mobile Ads SDK

Artikel ini berisi cara mengembangkan iklan untuk Google Mobile Ads SDK. Artikel ini membahas informasi yang dibutuhkan oleh developer Anda. Lalu, bagaimana informasi tersebut digunakan untuk membuat tag yang menentukan perilaku iklan.

Ada berbagai format iklan yang tersedia, termasuk banner dalam aplikasi, banner yang dapat diperluas, dan iklan layar penuh. Setiap format iklan memiliki aset materi iklan dan fungsinya sendiri. Misalnya, banner yang dapat diperluas dapat berubah ukuran dan warna latar belakang saat diklik. Google Mobile Ads SDK kompatibel dengan standar MRAID.

Untuk menggunakan Google Mobile Ads SDK, Anda harus memberikan ID Aplikasi, ID unit iklan, dan ukuran iklan kepada developer Anda.

Menemukan ID Aplikasi Google Mobile Ads

Login ke Google Ad Manager.
Klik Inventaris, lalu Aplikasi.
Temukan ID aplikasi seluler yang diperlukan, atau dapatkan aplikasi seluler baru.
Klik untuk menyalin "ID Aplikasi" ke papan klip. Misalnya, ca-app-pub-3940256099942544~3347511713
Berikan informasi ini kepada developer Anda.

Menemukan ukuran dan ID unit iklan

Klik Inventaris, lalu Unit iklan.
Klik nama unit iklan tempat Anda ingin membuat tag iklan, atau buat unit iklan baru.
Klik Tag.
Pilih jenis tag "Tag Aplikasi Seluler", lalu klik Lanjutkan.
Dari "Hasil tag", salin "ID unit iklan" dan "Ukuran unit iklan". Berikan informasi ini kepada developer Anda.

Fungsi JavaScript tambahan

Untuk memanfaatkan fungsi Google Mobile Ads SDK, lihat dokumentasi developer.

Berikut beberapa fungsi utama yang dapat digunakan untuk mengubah bagian <head> materi iklan.

Luaskan semua Ciutkan semua

Mengakses kemampuan perangkat

Peristiwa aplikasi

Mengubah skala gambar ke layar penuh

Kode contoh untuk dalam aplikasi: Klik ke Kalender Seluler menggunakan MRAID v2.0

Template ini adalah unit iklan banner yang dimulai sebagai banner layar bawah. Jika pengguna mengklik banner, aplikasi kalender default akan membuat acara baru dengan izin pengguna.

Perilaku dan elemen UI

Materi iklan terdiri dari elemen UI berikut:

Gambar banner dan tinggi serta lebarnya.
Diperlukan informasi tentang peristiwa seperti ringkasan, deskripsi, lokasi, tanggal mulai, dan tanggal akhir.

Nama	Jenis	Wajib	Deskripsi
File gambar banner	File	Ya	Gambar iklan banner.
Lebar gambar banner	Angka	Ya	Lebar gambar banner.
Tinggi gambar banner	Angka	Ya	Tinggi gambar banner.
Ringkasan peristiwa	Teks	Ya	Ringkasan peristiwa.
Deskripsi peristiwa	Teks	Ya	Deskripsi peristiwa.
Lokasi peristiwa	Teks	Tidak	Lokasi peristiwa.
Tanggal mulai peristiwa	Teks	Ya	Tanggal mulai acara. Tanggal mulai harus mengikuti format berikut: "2016-10-22T00:00-05:00". Misalnya, tanggalnya adalah 22 Oktober 2016 dari 00.00 sampai 05.00.
Tanggal akhir peristiwa	Teks	Ya	Tanggal akhir acara. Tanggal akhir harus mengikuti format berikut: "2016-10-22T00:00-05:00". Misalnya, tanggalnya adalah 22 Oktober 2016 dari 00.00 sampai 05.00.


<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<head>
<script type="text/javascript" src="mraid.js"></script>
</head>
<body>
<div id="normal" style="display:none; margin:auto;top:0px;text-align:center">
<a href="#" onClick="addToCalendar()"; return false;>
<img width="[%BannerImageWidth%]" height="[%BannerImageHeight%]" src="[%BannerImageFile%]" />
</a>
</div>
<script>

// Check whether mraid is ready by adding event listener
function doReadyCheck(){
  if(mraid.getState() == 'loading'){
    mraid.addEventListener("ready", mraidIsReady);
  }else{
    showMyAd();
  }
}

// Once mraid is ready, it does not need to listen to the ready event anymore
function mraidIsReady(){
  mraid.removeEventListener("ready", mraidIsReady); 
  showMyAd();
}

// Only show Ad when mraid is ready
function showMyAd(){
  var advertElement = document.getElementById("normal");
  advertElement.style.display = 'block';
}

// Add event to the calendar using appropriate input if the device supports calendar manipulation
function addToCalendar(){

  // Register the click by creating an image
  var x = document.createElement("IMG");
  x.setAttribute("src", "%%CLICK_URL_ESC%%");
  window.top.document.body.appendChild(x);

  if(mraid.getVersion()=="2.0"){
    mraid.createCalendarEvent({summary: "[%EventSummary%]", description: "[%EventDescription%]", location: "[%EventLocation%]", start: "[%EventStartDate%]", end: "[%EventEndDate%]"}); 
  } 
  return false;
}

doReadyCheck();
</script>
</body>
</html>

Menguji nama unit iklan: ali_Calendar

Template ini adalah unit iklan dua komponen yang dimulai sebagai iklan banner di bagian bawah layar. Jika pengguna mengklik banner tersebut, ukuran iklan akan diskalakan ke dimensi tertentu yang diperluas. Jika pengguna mengklik iklan yang dimensinya telah diperluas, dia akan dialihkan ke URL yang ditentukan sebagai URL klik-tayang.

Lebar iklan dapat menggunakan ukuran banner atau ukuran seluruh layar (jika nilai FullWidthResize adalah "Yes").

Perilaku dan elemen UI

Materi iklan terdiri dari elemen UI berikut:

Aset Materi Iklan (untuk setiap aset berikut, file, tinggi, dan lebar wajib diisi)
- Komponen Gambar Banner
- Komponen Banner yang diskalakan
- Ikon tombol tutup
Dapat menyesuaikan posisi tombol tutup agar tombol tersebut dapat berada di posisi kanan atau kiri atas layar.
Dapat mengubah warna background iklan.

Nama	Jenis	Wajib	Deskripsi
File gambar banner	File	Ya	Gambar yang akan ditampilkan di iklan banner.
Tinggi gambar banner	Angka	Ya	Tinggi gambar banner.
Lebar gambar banner	Angka	Ya	Lebar gambar banner.
Warna latar belakang	Teks	Ya	Warna latar belakang dari ruang yang ditempati oleh gambar yang diubah ukurannya dan yang ditempati oleh banner.
URL klik-tayang	URL	Ya	URL yang akan menjadi tujuan pengguna ketika iklan yang diubah ukurannya diklik.
File gambar yang diubah ukurannya	File	Ya	Gambar yang akan ditampilkan saat banner diklik.
Tinggi gambar yang diubah ukurannya	Angka	Ya	Tinggi gambar yang diubah ukurannya.
Lebar gambar yang diubah ukurannya	Angka	Ya	Lebar gambar yang diubah ukurannya.
Ikon tutup	File	Ya	File gambar untuk tombol "tutup".
Lebar ikon tutup	Angka	Ya	Lebar tombol "tutup". (lebar rata-rata adalah 30).
Tinggi ikon tutup	Angka	Ya	Tinggi tombol "tutup". (tinggi rata-rata adalah 30).
Posisi tombol tutup	Daftar	Tidak	Dapat mengatur posisi tombol "tutup" di kanan atas atau kiri atas layar. Nilai yang mungkin adalah "Kanan" atau "Kiri". Jika dibiarkan kosong, tombol tutup akan diletakkan di posisi kanan atas layar.
Ubah ukuran lebar penuh	Daftar	Tidak	Dapat membuat iklan yang diubah ukurannya ditampilkan dalam layar penuh jika nilainya adalah "Ya". Jika nilainya adalah "Tidak", lebarnya akan berukuran sama dengan banner asli. Nilai yang mungkin adalah "Ya" dan "Tidak", nilai defaultnya adalah "Tidak".


<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<head>
<script type="text/javascript" src="mraid.js"></script>
<style>
#close_button {
  position: absolute;
  top: 4px;
  right: 4px;
  display:block;
}

#resized img {
  display : block;
  margin : auto;
}
</style>
</head>
<body>
<div id="normal" style="display:none; margin:auto;top:0px;text-align:center">
<a onClick="resize();">
<img width="[%BannerImageWidth%]" height="[%BannerImageHeight%]" src="[%BannerImageFile%]"  />
</a>
</div>

<div id="resized" style="display:none; top:0px;">
<a onClick="openURL()">
<img width="[%ResizedImageWidth%]"  height="[%ResizedImageHeight%]" src="[%ResizedImageFile%]"/>
</a>
<div id="close_button">
<img width="[%CloseIconWidth%]" height="[%CloseIconHeight%]" src="[%CloseIcon%]"/> 
</div>
</div>

<script>
<!--
// Variables
var closeButton = document.getElementById("close_button");
var bodyElement = document.body;
var advertElement = document.getElementById("normal");
var resizedElement = document.getElementById("resized");
var resizeBannerWidth;

function changeBodyElementStyle() {
  // Change background color
  if ("[%ResizedBackgroundColor%]") {
    bodyElement.style.backgroundColor = "[%ResizedBackgroundColor%]";
    resizedElement.style.backgroundColor = "[%ResizedBackgroundColor%]";	
  }
}

function openURL() {
  mraid.open("%%CLICK_URL_ESC%%[%ClickThroughURL%]");
}

//Check whether MRAID is ready by adding event listener
function checkIfReady(){
  if(mraid.getState() == 'loading'){
    mraid.addEventListener("ready", mraidIsReady);
  } else{
    showMyAd();
  }
}

function mraidIsReady(){
  mraid.removeEventListener("ready", mraidIsReady); 
  showMyAd();
}

// Set resizing properties and resize
function resize(){
	// If FullWidthResize is "Yes", then the resized advert takes up the whole width. Otherwise takes up the width of the original banner
	if ("[%FullWidthResize%]" == "Yes") {
	    resizeBannerWidth = screen.width;
	} else {
	    resizeBannerWidth = mraid.getDefaultPosition().width;
	}	
	
  if(mraid.getVersion()=="2.0"){
    if ("[%PositionOfCloseButton%]" === "Left") {
	  closeButton.style.left = "0";

mraid.setResizeProperties({"width":""+resizeBannerWidth+"","height":"[%ResizedImageHeight%]","offsetX":"","offsetY":"","customClosePosition":"top-left", "allowOffscreen":false});
	} else {
	  closeButton.style.right = "0";

mraid.setResizeProperties({"width":""+resizeBannerWidth+"","height":"[%ResizedImageHeight%]","offsetX":"","offsetY":"","customClosePosition":"top-right", "allowOffscreen":false});
	}
    mraid.resize();
	return false;
  }
  else{
    return true;
  }
}

// Displays the advert and add an event listener to it to detect whether to resize
function showMyAd(){
  advertElement.style.display = "inline";
  mraid.addEventListener("stateChange",updateAd); 
}

// updateAd is called when MRAID changes state - calls toggleLayer to expand/ reduce ad size
function updateAd(state){
  if (state == "resized"){
    toggleLayer('normal', 'resized');
  }else if(state == "default"){
    toggleLayer('resized', 'normal');
  }
}

// Goes to the other state (either resized or banner)
function toggleLayer(fromLayer, toLayer){
  var fromLayerElem = document.getElementById(fromLayer);
  fromLayerElem.style.display = 'none';
  var toLayerElem = document.getElementById(toLayer);
  toLayerElem.style.display = 'block';
}

changeBodyElementStyle();
checkIfReady();
//-->
</script>
</body>
</html>

Menguji nama unit iklan: ali_resizeBanner

Template ini adalah unit iklan dua komponen yang dimulai sebagai iklan banner di bagian bawah layar. Jika pengguna mengklik banner tersebut, iklan akan diubah ukurannya untuk menutupi seluruh layar. Jika pengguna mengklik iklan yang dimensinya telah diperluas, dia akan dialihkan ke URL yang ditentukan sebagai URL klik-tayang.

Template ini menggunakan tombol tutup MRAID default.

Perilaku dan elemen UI

Materi iklan terdiri dari elemen UI berikut:

Aset Materi Iklan:
- Komponen Gambar Banner (tinggi dan lebar juga wajib diisi)
- Komponen Banner yang Diperluas
Dapat mengubah warna background iklan banner dan iklan setelah dibuka

Nama	Jenis	Wajib	Deskripsi
File gambar banner	File	Ya	Gambar yang akan ditampilkan di iklan banner.
Tinggi gambar banner	Angka	Ya	Tinggi gambar banner.
Lebar gambar banner	Angka	Ya	Lebar gambar banner.
Warna latar belakang	Teks	Ya	Warna latar belakang ruang yang ditempati gambar banner.
URL klik-tayang	URL	Ya	URL yang akan menjadi tujuan pengguna ketika iklan yang diubah ukurannya diklik.
File gambar yang diperluas	File	Ya	Gambar yang akan ditampilkan saat banner diklik.
Tinggi gambar yang diperluas	Angka	Ya	Tinggi gambar yang diperluas.
Lebar gambar yang diperluas	Angka	Ya	Lebar gambar yang diperluas.


       
<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<head>
<script type="text/javascript" src="mraid.js"></script>
</head>
<body>
<div id="normal" style="display:none; margin:auto;top:0px;text-align:center">
<a onClick="expand();">
<img width="[%BannerImageWidth%]" height="[%BannerImageHeight%]" src="[%BannerImageFile%]" />
</a>
</div>
<div id="expanded" style="display:none;top:0px;text-align:center">
<a onClick="openURL()">
<img width="[%ExpandedImageWidth%]"  height="[%ExpandedImageHeight%]" src="[%ExpandedImageFile%]" />
</a>
</div>

<script>
<!--

function openURL() {
  mraid.open("%%CLICK_URL_ESC%%[%ClickThroughURL%]");
}

// Change background color if present
function changeBodyElementStyle() {
  if ("[%BackgroundColor%]") {
    var bodyElement = document.body;
    bodyElement.style.backgroundColor = "[%BackgroundColor%]";
  }
}	

// Check whether MRAID is ready by adding event listener
function checkIfReady(){
  if(mraid.getState() == 'loading'){
    mraid.addEventListener("ready", mraidIsReady);
  } else{
    showMyAd();
  }
}

// Once MRAID is ready, it does not need to listen to the ready event anymore
function mraidIsReady(){
  mraid.removeEventListener("ready", mraidIsReady); 
  showMyAd();
}

function showMyAd(){
  // Displays the advert
  var advertElement = document.getElementById("normal");
  advertElement.style.display = "inline";

  // Add event listener to detect whether to expand or not
  mraid.addEventListener("stateChange",updateAd); 

  // Change background color of the expanded advert
  var expandedDiv = document.getElementById("expanded");
  if ("[%BackgroundColor%]") {
    expandedDiv.style.backgroundColor = "[%BackgroundColor%]";
  }
}

function expand() {
  if(mraid.getVersion()=="2.0"){
    mraid.expand();
    return false;
  }
  else {
    return true;
  }
}

// updateAd is called when mraid changes state
// Calls toggleLayer to expand/ reduce ad size
function updateAd(state){
  if (state == "expanded"){
    toggleLayer('normal', 'expanded');
  }else if(state == "default"){
    toggleLayer('expanded', 'normal');
  }
}

// Goes to the other state (either expands or banner)
function toggleLayer(fromLayer, toLayer){
  var fromLayerElem = document.getElementById(fromLayer);
  fromLayerElem.style.display = 'none';
  var toLayerElem = document.getElementById(toLayer);
  toLayerElem.style.display = "block";
}

changeBodyElementStyle();
checkIfReady();
//-->
</script>
</body>
</html>

Menguji nama unit iklan: ali_expandDefaultClose

Kode contoh untuk menutup interstisial secara otomatis

Jendela target: jendela overlay dalam aplikasi

Dengan menggunakan admob.opener.openOverlay(), Anda dapat membuka browser overlay layar penuh yang dianimasikan dari bagian bawah layar. Browser ini tidak memiliki status bar dan selalu menampilkan tombol tutup di pojok kiri atas. Opsi ini dapat bekerja dengan baik untuk iklan yang dapat diperluas karena materi iklan layar penuh dapat dihosting di halaman terpisah.

Berikut adalah kode contoh untuk banner yang dapat memuat unit iklan layar penuh di jendela browser overlay. Anda harus mengganti elemen placeholder berikut dengan nilai Anda sendiri. Anda dapat menggunakan kode contoh template materi iklan jika tersedia untuk jaringan Anda.

[BANNER_UNIT]: URL materi iklan banner.
[WIDTH]: Lebar materi iklan banner.
[HEIGHT]: Tinggi materi iklan banner.
[FULLSCREEN_UNIT]: URL materi iklan layar penuh. Catatan: Unit layar penuh harus menyertakan kode JavaScript untuk menguraikan URL tujuan dan mengalihkan pengguna ke halaman landing ketika menerima tindakan klik. Lihat cara Menangani URL tujuan dari unit iklan layar penuh untuk detail selengkapnya.
[DESTINATION_URL]: URL halaman tujuan.
[FALLBACK_URL]: URL tujuan penggantian yang digunakan saat fungsi JavaScript tidak berfungsi.
[ORIENTATION]: Orientasi yang didukung untuk URL tujuan (gunakan "p" untuk potret, "l" untuk lanskap, atau hapus nilai ini untuk memungkinkan semua orientasi).

Berikut adalah contoh kode materi iklan:


<!DOCTYPE html>
<head>
<meta name="viewport" 
content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

<script type="text/javascript" src="https://www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
</head>

<body>
<a href="[FALLBACK_CLICKURL]" 
onClick="admob.opener.openOverlay('%%CLICK_URL_ESC%%[FULLSCREEN_UNIT]?destination=[DESTINATION_URL]', 
'[ORIENTATION]'); return false;"><img border="0" 
src="[BANNER_UNIT]" width="[WIDTH]" height="[HEIGHT]"></a>
</body>
</html>

Menangani URL tujuan dari unit iklan layar penuh

Fungsi admob.opener.openOverlay() tidak memiliki opsi untuk menentukan URL tujuan konten html.

Dengan berasumsi bahwa Anda telah meneruskan URL tujuan dalam bentuk pasangan nilai kunci saat menentukan unit iklan layar penuh, misalnya, "https://link.to.fullscreen.unit?destination=https://my.destination.url", Anda dapat menuliskan fungsi JavaScript dan menyertakan cuplikan kode HTML untuk menangkap klik lalu mengalihkan pengguna ke halaman tujuan.

Berikut adalah contoh sumber halaman:


<!DOCTYPE html>
<head>
<meta name="viewport" 
content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

<script type="text/javascript" src="https://www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>

<script type="text/javascript">
function destinationUrl() {
  // Get current url after ?
  var destinationUrl = window.location.search;

  // Strip off the leading '?'
  destinationUrl = destinationUrl.substring(1);
  // Parse destination=url key-value pair
  var kvPair = destinationUrl.split("=");
  var key = kvPair[0]; // key: destination
  var value = kvPair[1]; // value: url
  var url = decodeURIComponent(value); 

  // Open destination inside overlay
  window.location = url;

  // Open destination in an external browser
  // admob.opener.openUrl(url, true);
}
</script>
</head>

<body>
<div style="position:relative;">
<!-- Load content source into an iframe -->
<iframe src="https://creative.admob.com/t1/bestBuy/tradeinJul/gi/" 
align="middle" frameborder=0 width=320 height=480 marginheight=0 marginwidth=0 scrolling=no></iframe>
<!-- Create a clickable area -->
<a href="#" onClick="destinationUrl(); return false;" style="position:absolute; top:0; left:0; 
display:inline-block; width:320px; height:480px; z-index:5;"></a>
</div>
</body>
</html>

Kompatibilitas MRAID

Google Mobile Ads SDK mendukung standar Definisi Antarmuka Iklan Multimedia Seluler (MRAID) IAB untuk periklanan di aplikasi seluler. Anda dapat menetapkan item baris sebagai MRAID v1 atau MRAID v2 melalui setelan penargetan item baris, di bagian Tambahkan penargetan, dan Kemampuan perangkat.

Persyaratan MRAID:

MRAID v2 memerlukan layanan Google Play v7.8 atau yang lebih tinggi untuk Android, dan Google Mobile Ads SDK v7.4.0 atau yang lebih tinggi untuk iOS.
MRAID v3 memerlukan layanan Google Play v15.0.0 atau yang lebih tinggi untuk Android, dan Google Mobile Ads SDK v7.30.0 atau yang lebih tinggi untuk iOS.

Untuk menggunakan fungsi MRAID di materi iklan, Anda harus mengimpor mraid.js ke materi iklan. Untuk melakukannya, sertakan <script src="mraid.js"> di materi iklan Anda. Google Mobile Ads SDK, sebagai SDK yang kompatibel dengan MRAID, akan mencari kode tersebut di materi iklan lalu menggantinya dengan URL sebenarnya yang mengarah ke penerapan MRAID. SDK lain yang mendukung MRAID akan melakukan hal yang sama, meskipun URL yang sebenarnya akan berbeda.

Secara opsional, Anda dapat menyertakan library MRAID dan fungsi Google Mobile Ads SDK ke dalam materi iklan yang sama.

mraid.resize() dan fungsi lain yang serupa tidak akan berpengaruh sebelum iklan diklik. Hal ini bertujuan agar materi iklan yang berbahaya tidak dapat melakukan pengubahan ukuran secara otomatis dan memenuhi layar.

Pelajari lebih lanjut dukungan MRAID untuk Android atau iOS.

Pilih bagian untuk diberikan masukan

Apakah ini membantu?

Bagaimana cara meningkatkannya?

Mengembangkan iklan untuk Google Mobile Ads SDK

Di halaman ini:

Menemukan ID Aplikasi Google Mobile Ads

Menemukan ukuran dan ID unit iklan

Fungsi JavaScript tambahan

Perilaku dan elemen UI

Perilaku dan elemen UI

Perilaku dan elemen UI

Menangani URL tujuan dari unit iklan layar penuh

Kompatibilitas MRAID

Apakah ini membantu?

Perlu bantuan lain?

Coba langkah-langkah selanjutnya berikut:

Masalah apa yang ada dengan teks yang dipilih ini?

Bagikan info tambahan atau rekomendasi