Agar dapat 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
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
- 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.
SDK mengekspos kemampuan browser dalam aplikasi yang tersedia di iOS dan Android. Hal ini memungkinkan developer mengakses kemampuan perangkat seperti akselerometer, giroskop, dan kompas via HTML5 jika platform mendukungnya.
Peristiwa aplikasi memungkinkan Anda mengeksekusi kode khusus di aplikasi saat materi iklan mengirim peristiwa aplikasi. Dengan peristiwa aplikasi, Anda dapat memperkenalkan eksekusi iklan kustom yang berinteraksi dengan aplikasi, seperti mengubah warna latar belakang aplikasi.
Jika Anda mendapati bahwa iklan layar penuh ditampilkan pada sebagian layar saja, sisipkan kode berikut di bagian <head> materi iklan:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>.
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 acara 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
Agar interstisial ditutup setelah jangka waktu tertentu:
- Sertakan kode dalam materi iklan untuk menutup interstisial jika jangka waktu tertentu telah berlalu. Kode berikut dapat digunakan sebagai template untuk pendekatan ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<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"/>
<script type="text/javascript" src="https://www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
<script>
<!--
function
_admStartCountDown(){setTimeout('admob.opener.close()',parseInt('[%displayTime%]')*1000)}
function
_admOnload(){if(admob.opener.isOverlayShowing()){_admStartCountDown()}else{admob.events.addEventListener('onshow',
_admStartCountDown)}}
if(window.addEventListener){window.addEventListener("load",_admOnload,false)}else{window.attachEvent("onload",_admOnload)}
//-->
</script>
</head>
<body>
[Your_AdCode_Goes_Here]
</body>
</html>
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 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.