Google Mobile Ads SDK'sı için reklam geliştirme

MRAID uyumluluğu

Google Mobile Ads SDK'sı, IAB'nin mobil uygulamalarda reklamcılık için mobil Rich Media Reklam Arayüz Tanımları (MRAID) standardını destekler. Bir satır öğesini Cihazlar > Cihaz özellikleri altında bulunan satır öğesi hedefleme ayarları ile MRAID v1 veya MRAID v2 olarak ayarlayabilirsiniz.

MRAID v2, Android için Google Play hizmetleri v7.8 veya üst sürümlerini ve iOS için Google Mobile Ads SDK'sı v7.4.0 veya üst sürümlerini gerektirir. Reklam öğelerinizde MRAID işlevlerini kullanmak için mraid.js'yi reklam öğenize aktarmanız gerekir. Bunun için <script src="mraid.js> kod parçasını reklam öğenize dahil edin. Google Mobile Ads SDK'sı, MRAID uyumlu bir SDK olarak, reklam öğesinde bu kodu arayacak ve MRAID uygulamasına işaret eden gerçek bir URL ile değiştirecektir. MRAID'yi destekleyen diğer SDK'lar da aynısını yapacaktır, ancak bunların gerçek URL'leri farklı olacaktır. İsteğe bağlı olarak, MRAID kitaplıklarını ve Google Mobile Ads SDK'sı işlevselliğini de aynı reklam öğesine ekleyebilirsiniz.

Reklam tıklanana kadar mraid.resize() ve diğer benzer işlevlerin herhangi bir etkisi olmayacaktır. Bu, kötü amaçlı bir reklam öğesinin otomatik olarak yeniden boyutlandırılıp ekranın tamamını kaplamasını engeller.

Geliştirici belgelerinde MRAID desteği hakkında daha fazla bilgi edinin. Android | iOS

Google Mobile Ads SDK'sının işlevselliği

Google Mobile Ads SDK'sının işlevselliğinden yararlanmak için google.mobile.app.ads sınıfıyla gösterilen JavaScript işlevlerini kullanabilirsiniz. Reklam öğesinin <head> bölümüne aşağıdaki kodu eklemelisiniz:

Cihaz özelliklerine erişim

SDK, iOS ve Android'de kullanılabilen uygulama içi tarayıcıların özelliklerini de ortaya çıkarır. Bu, platform'un desteklediği durumlarda HTML5 yoluyla geliştiricilerin ivme ölçer, jiroskop ve pusula gibi cihaz özelliklerine erişmesine olanak verir. Bu özellikler ve bunlara nasıl erişileceği hakkında daha fazla bilgi için lütfen her bir platforma ait dokümanlara bakın.

Uygulama etkinlikleri

Reklam öğeleri bir uygulama etkinliği gönderdiğinde uygulama etkinlikleri, uygulamanız içinden özel bir kod çalıştırmanıza olanak tanır. Uygulama etkinliklerini kullanarak reklamların, uygulamanın arka plan rengini değiştirmek gibi uygulama ile etkileşimli bir şekilde özel reklam yürütmesini sağlarsınız.

Uygulama etkinliklerini nasıl uygulayacağınızı öğrenin.

Resmi tam ekran olacak şekilde ölçekleme

Tam ekran reklamınızın ekranın sadece bir kısmını kapladığını görürseniz şu kodu reklam öğesinin <head> bölümüne ekleyin:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>.

Dönüşümlü yayınlanabilir reklam örnek kodu

Dönüşümlü yayınlanabilir reklam yayınlamak için aşağıdaki kodu kullanabilirsiniz.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style>
      * {
        padding: 0px;
        margin: 0px;
        border: none;
      }

      a { display: block }

      #landscape{ display: none; }

      /* Portrait */
      @media screen and (orientation:portrait) {
        #portrait { display: block; }
	#landscape { display: none; }
      }
      /* Landscape */
      @media screen and (orientation:landscape) {
        #portrait { display: none; }
	#landscape { display: block; }
      }
    </style>
  </head>
  <body>
    <a href="%%CLICK_URL_UNESC%%[%ClickThroughURL%]">
      <img id="portrait" src="[%PortraitImageFile%]" width="[%PortraitImageWidth%]" height="[%PortraitImageHeight%]"/>
      <img id="landscape" src="[%LandscapeImageFile%]" width="[%LandscapeImageWidth%]" height="[%LandscapeImageHeight%]"/>
    </a>
  </body>
</html>

Uygulama içi için örnek kod: MRAID v2.0 kullanılarak Takvim için Mobil Tıklama

Bu şablon, alt ekran banner'ı olarak başlayan bir banner reklam birimidir. Kullanıcı banner'ı tıklarsa varsayılan takvim uygulaması kullanıcının izniyle yeni bir etkinlik oluşturacaktır.

Davranış ve kullanıcı arayüzü öğeleri

Reklam öğesi aşağıdaki kullanıcı arayüzü öğelerinden oluşur:

  • Banner görüntüsü ve yüksekliği + genişliği.
  • Özet, açıklama, konum, başlangıç tarihi ve bitiş tarihi gibi etkinlikle ilgili bilgiler gereklidir.
Ad Tür Gerekli Açıklama
Banner Resim Dosyası Dosya Evet Banner reklamın görüntüsü.
Banner Resim Genişliği Sayı Evet Banner Görüntüsünün Genişliği.
Banner Resim Yüksekliği Sayı Evet Banner Görüntüsünün Yüksekliği.
Etkinlik Özeti Metin Evet Etkinliğin özeti.
Etkinlik Açıklaması Metin Evet Etkinliğin açıklaması.
Etkinlik Konumu Metin Hayır Etkinliğin konumu.
Etkinlik Başlangıç tarihi Metin Evet Etkinliğin başlangıç tarihi. Başlangıç tarihi şu biçimde olmalıdır: '2016-10-22T00:00-05:00'. Örneğin bu, 22 Ekim 2016, 00:00 ile 05:00 arasındadır.
Etkinlik Bitiş tarihi Metin Evet Etkinliğin bitiş tarihi. Bitiş tarihi şu biçimde olmalıdır: '2016-10-22T00:00-05:00'. Örneğin bu, 22 Ekim 2016, 00:00 ile 05:00 arasındadır.
 
<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>

Test reklam birimi adı: ali_Calendar

Ekran için örnek kod: MRAID v2.0 kullanılarak Genişletilebilir Altbilgi Şablonu

Bu şablon, alt ekran banner'ı olarak başlayan iki bileşenli reklam birimidir. Kullanıcı banner'ı tıklarsa reklamın boyutu belirli boyutlarla yeniden boyutlandırılacaktır. Büyük reklam tıklanırsa kullanıcı belirli bir web sitesine yönlendirilir.

Genişlik, banner'ın boyutu kadar olabilir veya ekran genişliğinin tamamını kullanabilir (FullWidthResize değeri "Yes" ise).

Davranış ve kullanıcı arayüzü öğeleri

Reklam öğesi aşağıdaki kullanıcı arayüzü öğelerinden oluşur:

  • Reklam Öğeleri (bu öğelerden her biri için dosya, yükseklik ve genişlik gereklidir)
    • Banner Resim bileşeni
    • Yeniden Boyutlandırılan Banner bileşeni
    • Kapat düğmesi simgesi
  • Kapat düğmesinin konumunu, düğme ekranın sağ üst veya sol üst tarafında olacak şekilde değiştirir.
  • Reklamın arka plan rengini değiştirebilir.
Ad Tür Gerekli Açıklama
Banner Resim Dosyası Dosya Evet Banner reklamda gösterilecek resim.
Banner Resim Yüksekliği Sayı Evet Banner resminin yüksekliği.
Banner Resim Genişliği Sayı Evet Banner resminin genişliği.
Arka Plan Rengi Metin Evet Yeniden boyutlandırılan resim tarafından kullanılan alanın ve banner tarafından kullanılan alanın arka plan rengi.
Tıklama URL'si URL Evet Yeniden boyutlandırılan reklam tıklandığında kullanıcının yönlendirileceği URL.
Yeniden Boyutlandırılan Resim Dosyası Dosya Evet Banner tıklandığında gösterilecek resim.
Yeniden Boyutlandırılan Resim Yüksekliği Sayı Evet Yeniden boyutlandırılan resmin yüksekliği.
Yeniden Boyutlandırılan Resim Genişliği Sayı Evet Yeniden boyutlandırılan resmin genişliği.
Kapat Simgesi Dosya Evet "Kapat" düğmesi için resim dosyası.
Kapat Simgesi Genişliği Sayı Evet "Kapat" düğmesinin genişliği (30, ortalama genişliktir).
Kapat Simgesi Yüksekliği Sayı Evet "Kapat" düğmesinin yüksekliği (30, ortalama yüksekliktir).
Kapat Düğmesinin Konumu Liste Hayır Kapat düğmesini, ekranın sağ üst veya sol üst tarafında olacak şekilde yerleştirebilir. Olası değerler "Sağ" veya "Sol"dur. Boş bırakılırsa kapat düğmesi ekranın sağ üst köşesine yerleştirilecektir.
Tam Genişlikte Yeniden Boyutlandırma Liste Hayır Değer "Evet" olduğunda yeniden boyutlandırılan reklamın, ekranın tüm genişliğini kullanmasını sağlayabilir. Değer "Hayır" ise genişlik orijinal banner ile aynı boyutta olacaktır. Olası değerler "Evet" ve "Hayır", varsayılan ise "Hayır"dır.
 

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

Test reklam birimi adı: ali_resizeBanner

Uygulama içi için örnek kod: Varsayılan Kapat Düğmesi Kullanılarak Mobil Genişletilebilir Banner (MRAID 2.0)

Bu şablon, alt ekran banner'ı olarak başlayan iki bileşenli reklam birimidir. Kullanıcı banner'ı tıklarsa reklam tüm ekranı kaplayacak şekilde genişleyecektir. Büyük reklam tıklanırsa kullanıcı belirli bir web sitesine yönlendirilir. Varsayılan MRAID kapat düğmesini kullanır.

Davranış ve kullanıcı arayüzü öğeleri

Reklam öğesi aşağıdaki kullanıcı arayüzü öğelerinden oluşur:

  • Reklam Öğeleri:
    • Banner Resim bileşeni (yükseklik ve genişlik de gereklidir)
    • Banner bileşenini genişletme
  • Banner reklamın ve genişletilen reklamın arka plan rengini değiştirebilir
Ad Tür Gerekli Açıklama
Banner Resim Dosyası Dosya Evet Banner reklamda gösterilecek resim.
Banner Resim Yüksekliği Sayı Evet Banner resminin yüksekliği.
Banner Resim Genişliği Sayı Evet Banner resminin genişliği.
Arka Plan Rengi Metin Evet Banner resmi tarafından kullanılan alanın arka plan rengi.
Tıklama URL'si URL Evet Yeniden boyutlandırılan reklam tıklandığında kullanıcının yönlendirileceği URL.
Genişletilmiş Resim Dosyası Dosya Evet Banner tıklandığında gösterilecek resim.
Genişletilmiş Resim Yüksekliği Sayı Evet Genişletilmiş resmin yüksekliği.
Genişletilmiş Resim Genişliği Sayı Evet Genişletilmiş resmin genişliği.
 
       
<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>


Test reklam birimi adı: ali_expandDefaultClose

Uygulama içi için örnek kod: Özel Kapat Düğmesi Kullanılarak Mobil Genişletilebilir Banner (MRAID 2.0)

Bu reklam öğesi, alt ekran banner'ı olarak başlayan iki bileşenli reklam birimidir. Kullanıcı banner'ı tıklarsa reklam tüm ekranı kaplayacak şekilde genişleyecektir. Büyük reklam tıklanırsa kullanıcı belirli bir web sitesine yönlendirilir.

Bu reklam öğesi, özel kapat düğmesinin kullanılmasını sağlar (düğmenin yüksekliğini, genişliğini, görünümünü ve konumunu değiştirebilir).

Davranış ve kullanıcı arayüzü öğeleri

Reklam öğesi aşağıdaki kullanıcı arayüzü öğelerinden oluşur:

  • Reklam Öğeleri:
    • Banner Resim bileşeni (yükseklik ve genişlik de gereklidir)
    • Banner bileşenini genişletme
  • Banner reklamın ve genişletilen reklamın arka plan rengini değiştirebilir
  • Özel bir kapat düğmesi kullanır.
Ad Tür Gerekli Açıklama
Banner Resim Dosyası Dosya Evet Banner reklamda gösterilecek resim.
Banner Resim Yüksekliği Sayı Evet Banner resminin yüksekliği.
Banner Resim Genişliği Sayı Evet Banner resminin genişliği.
Arka Plan Rengi Metin Evet Banner resmi tarafından kullanılan alanın arka plan rengi.
Tıklama URL'si URL Evet Yeniden boyutlandırılan reklam tıklandığında kullanıcının yönlendirileceği URL.
Genişletilmiş Resim Dosyası Dosya Evet Banner tıklandığında gösterilecek resim.
Genişletilmiş Resim Yüksekliği Sayı Evet Genişletilmiş resmin yüksekliği.
Genişletilmiş Resim Genişliği Sayı Evet Genişletilmiş resmin genişliği.
Kapat Simgesi Dosya Evet "Kapat" düğmesi için resim dosyası.
Kapat Simgesi Genişliği Sayı Evet "Kapat" düğmesinin genişliği (30, ortalama genişliktir).
Kapat Simgesi Yüksekliği Sayı Evet "Kapat" düğmesinin yüksekliği (30, ortalama yüksekliktir).
 

<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: 0px;
right: 0px;
display: block;
}
//-->
</style>

</head>
<body>
<div id="normal" style="display:none; top:0px;">
<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="[%ExpandImageWidth%]"  height="[%ExpandImageHeight%]" src="[%ExpandImageFile%]" />
</a>
<div id="close_button">
<img width="[%CloseIconWidth%]" height="[%CloseIconHeight%]" src="[%CloseIcon%]"/> 
</div>
</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");
  expandedDiv.style.backgroundColor = "[%BackgroundColor%]";
}

// 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 = "inline";
}

// Expand ad and make the close button visible for the user			
function expand() {
   if(mraid.getVersion()=="2.0"){
    document.getElementById("close_button").style.visibility = "visible";
    mraid.setExpandProperties({"width": "[%ExpandImageWidth%]", "height": "[%ExpandImageHeight%]", "useCustomClose": true}); 
    mraid.expand();
    return false;
  }
  else {
    return true;
  }
}

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


Test reklam birimi adı: ali_expandCustomClose

Ekran için örnek kod: Genişletilebilir Altbilgi Şablonu (MRAID 2.0 kullanılmadan)

Bu şablon, alt ekran banner'ı olarak başlayan iki bileşenli reklam birimidir. Kullanıcı banner'ı tıklarsa reklamın boyutu belirli boyutlarla yeniden boyutlandırılacaktır. Büyük reklam tıklanırsa kullanıcı belirli bir web sitesine yönlendirilir.

Reklamı banner durumuna geri yüklemek için kullanılan özel bir kapat düğmesi de vardır.

Davranış ve kullanıcı arayüzü öğeleri

Reklam öğesi aşağıdaki kullanıcı arayüzü öğelerinden oluşur:

  • Reklam Öğeleri (bu öğelerden her biri için dosya, yükseklik ve genişlik gereklidir)
    • Banner Resim bileşeni
    • Banner bileşenini genişletme
    • Kapat düğmesi simgesi
  • Kapat düğmesinin konumunu, düğme ekranın sağ üst veya sol üst tarafında olacak şekilde değiştirir.
  • Reklamın arka plan rengini değiştirebilir.
Ad Tür Gerekli Açıklama
Banner Resim Dosyası Dosya Evet Banner reklamda gösterilecek resim.
Banner Resim Yüksekliği Sayı Evet Banner resminin yüksekliği.
Banner Resim Genişliği Sayı Evet Banner resminin genişliği.
Arka Plan Rengi Metin Evet Yeniden boyutlandırılan resim tarafından kullanılan alanın arka plan rengi.
Tıklama URL'si URL Evet Yeniden boyutlandırılan reklam tıklandığında kullanıcının yönlendirileceği URL.
Yeniden Boyutlandırılan Resim Dosyası Dosya Evet Banner tıklandığında gösterilecek resim.
Yeniden Boyutlandırılan Resim Yüksekliği Sayı Evet Yeniden boyutlandırılan resmin yüksekliği.
Yeniden Boyutlandırılan Resim Genişliği Sayı Evet Yeniden boyutlandırılan resmin genişliği.
Kapat Simgesi Dosya Evet "Kapat" düğmesi için resim dosyası.
Kapat Simgesi Genişliği Sayı Evet "Kapat" düğmesinin genişliği (30, ortalama genişliktir).
Kapat Simgesi Yüksekliği Sayı Evet "Kapat" düğmesinin yüksekliği (30, ortalama yüksekliktir).
Kapat Düğmesi Konumu Liste Hayır Kapat düğmesini, ekranın sağ üst veya sol üst tarafında olacak şekilde yerleştirebilir. Olası değerler "Sağ" veya "Sol"dur. Boş bırakılırsa kapat düğmesi ekranın sağ üst köşesine yerleştirilecektir.
 

<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>
<style>
#close_button {
position: absolute;
top: 1%;
display:block;
}
#advertArea {
position:absolute; 
width:100%;
height:100%;
top:0;
left: 0;				
}
</style>
</head>
<body>
<div id="normal" style="display:block; margin:auto;top:0px;text-align:center">
<img width="[%BannerImageWidth%]" height="[%BannerImageHeight%]" src="[%BannerImageFile%]" onClick="showBiggerAdvert();" />
</div>

<div id="resized" style="display:none;top:0px;text-align:center;";>
<a href="%%CLICK_URL_ESC%%[%ClickThroughURL%]">
<span id="advertArea"> </span>
<img width="[%ResizedImageWidth%]"  height="[%ResizedImageHeight%]" src="[%ResizedImageFile%]" />
</a>
<div id="close_button">
<img width="[%CloseIconWidth%]" height="[%CloseIconHeight%]" src="[%CloseIcon%]" onClick="showOriginalBanner()"/> 
</div>
</a>
</div>

<script>

// Variable assignments
var closeButton = document.getElementById("close_button");
var resizedDiv = document.getElementById("resized");
var bannerDiv  = document.getElementById("normal");

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

  // Shift Close button position
  if ("[%CloseButtonPosition%]" === "Left") {
    closeButton.style.left = "0";
  } else {
    closeButton.style.right = "0";
  }
}

// Resize advert to make it bigger	
function showBiggerAdvert(){
  toggleLayer('normal', 'resized');
}

// Hide the resized advert and show the original banner
function showOriginalBanner() {
  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();
</script>
</body>
</html>


Genişletilebilir reklam için örnek kod (MRAID v1 ve MRAID olmayan sürümler)

MRAID örneği

Daha fazla bilgi için lütfen geliştirici belgelerine bakın.

<html>
  <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="mraid.js"></script>
    <style type="text/css">
      html, body {
        margin: 0;
        padding: 0;
      }

      .banner, .overlayBanner {
        display: block;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 1000;
        overflow: hidden;
      }

      .banner {
        background-color: black;
        width: 300px;
        height: 50px;
      }

      .overlayBanner {
        background-color: green;
        width: 300px;
        height: 250px;
      } 
    </style>
    <script type="text/javascript">
      // Check to see if document is ready
      if ((mraid.getState() != "default") || (mraid.getState() != "ready")) {
        // console.log("Document is not ready, adding event listener");
        // Register event listener to keep track of state changes
        mraid.addEventListener("stateChange", handleStateChanges);
      } else {
        // console.log("Document is ready");
        // Register event listener to keep track of state changes
        mraid.addEventListener("stateChange", handleStateChanges);
      }

      function handleStateChanges() {
        // console.log('mraid state: ' + mraid.getState());
        // Perform action on state change
        switch(mraid.getState()) {
        case "expanded":
          // console.log("handleStateChanges, expanded");
          // Show the overlay banner when view is in "expanded" state
          document.getElementById('banner').setAttribute('class', 'overlayBanner');
          break;
        case "default":
          // console.log("handleStateChanges, default");
          // Show the initial banner when view is in "default" state
          document.getElementById('banner').setAttribute('class', 'banner');
          break;
        }
      }
</script>
</head>

<body>
<div id='banner' onClick='mraid.expand()'></div>
</body>

</html>

Reklam öğesi şablonlarını kullanan MRAID dışı örnek

Mobil bir uygulamaya banner göndermek için aşağıdaki örnek kodu kullanabilirsiniz. Banner tıklandığında, uygulama içinde yer paylaşımlı bir pencerede görüntülenen tam ekran reklam birimi olarak genişler. Örnek kod içinde, aşağıdaki yer tutucu öğelerin yerine kendi değerlerinizi girin:

  • [FALLBACK_CLICKURL]: JavaScript işlevi çağrılmadığı takdirde kullanılacak yedek açılış sayfası.
  • [FULLSCREEN_UNIT]: Tam ekran reklam biriminin URL'si.
  • [ORIENTATION]: Tam ekran birimi için desteklenen yön (dikey için "p", yatay için "l" kullanın veya yön önemli değilse bu değeri atlayın).
  • [BANNER_UNIT]: Banner resminin URL'si.
  • [WIDTH]: Banner'ın genişliği.
  • [HEIGHT]: Banner'ın yüksekliği.
<!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://media.admob.com/api/v1/google_mobile_app_ads.js"></script>
</head>

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

</html>

Bir geçiş reklamını otomatik olarak kapatmak için kullanılan örnek kod
Yalnızca doğrudan ayrılan geçiş reklamları otomatik olarak kapatılabilir; dinamik ayırma ile sunulan geçiş reklamları (yani, Ad Exchange, AdSense veya AdMob) yalnızca kullanıcı tarafından kapatılabilir.

Bir geçiş reklamının belirli bir süre sonra kapanmasını sağlamak için:

  • Reklam öğesine, geçiş reklamını belirli bir süre sonra kapatan bir kod ekleyin. Bu yöntemde şablon olarak şu kod kullanılabilir:
<!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://media.admob.com/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>
Hedef pencere: uygulama içi yer paylaşımlı pencere

admob.opener.openOverlay() işlevini kullanarak, ekranın alt tarafından animasyonlu bir tam ekran yer paylaşımlı tarayıcı açabilirsiniz. Bu tarayıcıda durum çubuğu yoktur ve sol üst köşede her zaman bir kapatma düğmesi gösterilir. Bu seçenek tam ekran biriminin ayrı bir sayfada barındırılabileceği genişletilebilir reklamlarda iyi çalışabilir (genişletilebilir reklam için örnekteki koda bakın).

Aşağıda tam ekran biriminin bir yer paylaşımlı tarayıcı penceresine yüklenebildiği basit bir banner kodu örneği verilmiştir: Aşağıdaki yer tutucu öğelerini kendi değerlerinizle değiştirmelisiniz. Ağınızda kullanılabiliyorsa örnek kodu bir reklam öğesi şablonu oluşturmak için kullanabilirsiniz.

  • [BANNER_UNIT]: Banner reklam öğesinin URL'si.
  • [WIDTH]: Banner reklam öğesinin genişliği.
  • [HEIGHT]: Banner reklam öğesinin yüksekliği.
  • [FULLSCREEN_UNIT]: Tam ekran reklam öğesinin URL'si. Not: Tam ekran birimi, hedef URL'yi ayrıştıracak ve bir tıklama işlemi geldiğinde kullanıcıyı açılış sayfasına yönlendirecek JavaScript kodunu içermelidir. Daha ayrıntılı bilgi için Tam ekran birimi içinden hedef URL işleme bölümüne bakın.
  • [DESTINATION_URL]: Hedef sayfanın URL'si.
  • [FALLBACK_URL]: JavaScript işlevinin çalışmaması durumunda kullanılacak yedek hedef URL.
  • [ORIENTATION]: Hedef URL için desteklenen yön (dikey için "p", yatay için "l" kullanın veya yön önemli değilse bu değeri atlayın).

Aşağıda örnek bir reklam öğesi kodu verilmiştir:

<!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://media.admob.com/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>

Tam ekran birimi içinden hedef URL işleme

admob.opener.openOverlay() işlevinde html içeriğinin hedef URL'sini belirtme seçeneği bulunmaz. Tam ekran birimini belirtirken hedef URL'yi anahtar/değer çifti (ör. "https://link.to.fullscreen.unit?destination=https://my.destination.url") biçiminde geçirdiğinizi varsayarsak, basit bir JavaScript işlevi yazıp bir HTML kodu snippet'i ekleyerek tıklamayı yakalayabilir ve kullanıcıyı hedef sayfaya yönlendirebilirsiniz.

 

Aşağıda örnek bir sayfa kaynak kodu verilmiştir:

<!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://media.admob.com/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>
Hedef pencere: yeni tarayıcı penceresi

admob.opener.openUrl()'yi kullanarak uygulamanın dışında, yeni bir yerel tarayıcı penceresi açabilirsiniz. Aşağıda, hedef URL'nin yeni bir tarayıcı penceresine yüklenebildiği basit bir banner'a ait örnek kod verilmiştir. Aşağıdaki yer tutucu öğelerini kendi değerlerinizle değiştirmelisiniz. Ağınızda kullanılabiliyorsa örnek kodu bir reklam öğesi şablonu oluşturmak için kullanabilirsiniz.

  • [BANNER_UNIT]: Banner reklam öğesinin URL'si.
  • [WIDTH]: Banner reklam öğesinin genişliği.
  • [HEIGHT]: Banner reklam öğesinin yüksekliği.
  • [FULLSCREEN_UNIT]: Tam ekran reklam öğesinin URL'si.
  • [FALLBACK_URL]: JavaScript işlevinin çalışmaması durumunda kullanılacak yedek hedef URL.

Aşağıda örnek bir reklam öğesi kodu verilmiştir:

<!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://media.admob.com/api/v1/google_mobile_app_ads.js"></script>
</head>

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

 

AdMob Mobil Reklam Geliştirme Kılavuzu'na bakabilirsiniz.
Bu size yardımcı oldu mu?
Bunu nasıl iyileştirebiliriz?