Vývoj reklam pro sadu SDK pro mobilní reklamy Google

Kompatibilita se standardem MRAID

Sada SDK pro mobilní reklamy Google podporuje standard MRAID (Mobile Rich Media Ad Interface Definitions) organizace IAB pro inzerci v mobilních aplikacích. Řádkovou položku můžete nastavit jako MRAID verze 1 nebo MRAID verze 2 pomocí nastavení cílení řádkové položky v sekci Zařízení > Funkce zařízení.

MRAID verze 2 vyžaduje v případě Androidu služby Google Play verze 7.8 nebo vyšší a v případě systému iOS sadu SDK pro mobilní reklamy Google verze 7.4.0 nebo vyšší. K použití funkcí MRAID musíte do kreativy importovat soubor mraid.js. Do kreativy vložte značku <script src="mraid.js">. Sada SDK pro mobilní reklamy Google je kompatibilní se standardem MRAID, takže tento kód v kreativě vyhledá a nahradí jej adresou URL odkazující na implementaci standardu MRAID. Stejně fungují i jiné sady SDK s podporou standardu MRAID, použijí však jiné adresy URL. Volitelně můžete ve stejné kreativě zahrnout knihovny MRAID i funkce sady SDK pro mobilní reklamy Google.

mraid.resize()další podobné funkce se projeví až po kliknutí na reklamu. Bráníme tak škodlivým kreativám v automatické změně velikosti a obsazení celé obrazovky.

Další informace o podpoře standardu MRAID naleznete v dokumentaci pro vývojáře. Android | iOS

Funkce sady SDK pro mobilní reklamy Google

Pokud chcete používat funkce sady SDK pro mobilní reklamy Google, můžete využít funkce JavaScriptu uvedené ve třídě google.mobile.app.ads. V sekci <head> kreativy je potřeba zahrnout následující kód:

Přístup k funkcím zařízení

Sada SDK také umožňuje využít funkce prohlížečů v aplikacích dostupných na platformách iOS a Android. Díky tomu mají vývojáři přístup k funkcím zařízení, jako je akcelerometr, gyroskop nebo kompas, a to pomocí HTML5 (pokud platforma tyto funkce podporuje). Další informace o těchto funkcích a přístupu k nim naleznete v dokumentaci k jednotlivým platformám.

Události aplikací

Spustit související školení v Univerzitě pro majitele stránek

Události aplikací umožňují spustit v aplikaci vlastní kód, když kreativa odešle událost aplikace. Pomocí událostí aplikací můžete zavést vlastní spouštění reklam, které vzájemně reagují s aplikací, například změní barvu pozadí aplikace.

Informace o implementaci událostí aplikací

Přizpůsobení velikosti obrázku na celou obrazovku

Pokud zjistíte, že reklama na celou obrazovku zabírá pouze část obrazovky, vložte do sekce <head> kreativy následující kód:

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

Ukázkový kód otáčecí reklamy

Pomocí kódu níže lze zobrazit otáčecí reklamu.

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

Ukázka kódu reklamy v aplikaci: mobilní reklama k přidání události do kalendáře kliknutím s využitím standardu MRAID verze 2.0

Tato šablona je bannerová reklamní jednotka, která se zobrazí jako banner v dolní části obrazovky. Pokud uživatel na banner klikne, jeho výchozí kalendářová aplikace s jeho souhlasem vytvoří novou událost.

Chování a prvky uživatelského rozhraní

Kreativa se skládá z následujících prvků uživatelského rozhraní:

  • Bannerový obrázek a jeho výška a šířka.
  • Jsou požadovány informace o události, jako jsou souhrn, popis, místo, datum zahájení a datum ukončení.
Název Typ Povinné Popis
Obrázkový soubor banneru Soubor Ano Obrázek bannerové reklamy
Šířka obrázku banneru Číslo Ano Šířka obrázku banneru
Výška obrázku banneru Číslo Ano Výška obrázku banneru
Souhrnné informace o události Text Ano Souhrnné informace o události
Popis události Text Ano Popis události
Místo události Text Ne Místo konání události
Datum zahájení události Text Ano Datum zahájení události. Datum zahájení by mělo být uvedeno v následujícím tvaru: 2016-10-22T00:00-05:00. Tento údaj například znamená 22. října 2016 od 0:00 do 5:00.
Datum ukončení události Text Ano Datum ukončení události. Datum ukončení by mělo být uvedeno v následujícím tvaru: 2016-10-22T00:00-05:00. Tento údaj například znamená 22. října 2016 od 0:00 do 5: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>

Název testovací reklamní jednotky: ali_Calendar

Ukázka kódu obsahové reklamy: šablona rozbalitelného zápatí s využitím standardu MRAID verze 2.0

Tato šablona je reklamní jednotka tvořená dvěma částmi, která se zobrazí jako banner v dolní části obrazovky. Pokud uživatel na banner klikne, reklama se rozbalí do nějakých konkrétních rozměrů. Pokud uživatel klikne na tuto větší reklamu, bude přesměrován na konkrétní web.

Jako šířku lze použít buď rozměr banneru, nebo reklama může zabrat celou šířku obrazovky (pokud je parametr FullWidthResize nastaven na hodnotu „Yes“).

Chování a prvky uživatelského rozhraní

Kreativa se skládá z následujících prvků uživatelského rozhraní:

  • Podklady (pro každý z těchto podkladů je požadován soubor, výška a šířka)
    • součást obrázku banneru,
    • součást rozbaleného banneru,
    • ikona tlačítka zavření.
  • Pozici tlačítka zavření lze upravit, aby bylo buď v pravém horním rohu obrazovky, nebo v levém horním rohu obrazovky.
  • Barvu pozadí reklamy lze změnit.
Název Typ Povinné Popis
Obrázkový soubor banneru Soubor Ano Obrázek, který se zobrazí v bannerové reklamě.
Výška obrázku banneru Číslo Ano Výška obrázku banneru.
Šířka obrázku banneru Číslo Ano Šířka obrázku banneru.
Barva pozadí Text Ano Barva pozadí místa obsazeného obrázkem s upravenou velikostí a místa obsazeného bannerem.
Cílová adresa URL Adresa URL Ano Adresa URL, na kterou bude uživatel přesměrován, když klikne na rozbalenou reklamu.
Obrázkový soubor rozbalené reklamy Soubor Ano Obrázek, který se zobrazí, když uživatel na banner klikne.
Výška rozbaleného obrázku Číslo Ano Výška rozbaleného obrázku.
Šířka rozbaleného obrázku Číslo Ano Šířka rozbaleného obrázku.
Ikona zavření Soubor Ano Obrázkový soubor tlačítka Zavřít.
Šířka ikony zavření Číslo Ano Šířka tlačítka Zavřít. (Průměrná šířka je 30.)
Výška ikony zavření Číslo Ano Výška tlačítka Zavřít. (Průměrná výška je 30.)
Pozice tlačítka Zavřít Seznam Ne Umožňuje stanovit, zda se má tlačítko Zavřít zobrazit v pravém, nebo levém horním rohu obrazovky. Možné hodnoty jsou „Right“ (Vpravo) a „Left“ (Vlevo). Pokud je tento parametr ponechán prázdný, tlačítko zavření se zobrazí v pravém horním rohu obrazovky.
Rozšíření na celou šířku Seznam Ne Pokud má hodnotu „Yes“ (Ano), reklama po rozbalení zabere celou šířku obrazovky. Pokud má hodnotu „No“ (Ne), zůstane šířka stejná jako u původního banneru. Možné hodnoty jsou „Yes“ (Ano) a „No“ (Ne), výchozí hodnota je „No“.
 

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

Název testovací reklamní jednotky: ali_resizeBanner

Ukázka kódu reklamy v aplikaci: rozbalitelný banner pro mobily (MRAID 2.0) s výchozím tlačítkem zavření

Tato šablona je reklamní jednotka tvořená dvěma částmi, která se zobrazí jako banner v dolní části obrazovky. Pokud uživatel na banner klikne, reklama se rozbalí na celou obrazovku. Pokud uživatel klikne na tuto větší reklamu, bude přesměrován na konkrétní web. Tato reklama využívá výchozí tlačítko zavření standardu MRAID.

Chování a prvky uživatelského rozhraní

Kreativa se skládá z následujících prvků uživatelského rozhraní:

  • Podklady:
    • součást obrázku banneru (je vyžadována také šířka a výška),
    • součást rozbaleného banneru.
  • Je možné změnit barvu pozadí bannerové reklamy a rozbalené reklamy.
Název Typ Povinné Popis
Obrázkový soubor banneru Soubor Ano Obrázek, který se zobrazí v bannerové reklamě.
Výška obrázku banneru Číslo Ano Výška obrázku banneru.
Šířka obrázku banneru Číslo Ano Šířka obrázku banneru.
Barva pozadí Text Ano Barva pozadí místa obsazeného obrázkem banneru.
Cílová adresa URL Adresa URL Ano Adresa URL, na kterou bude uživatel přesměrován, když klikne na rozbalenou reklamu.
Soubor rozbaleného obrázku Soubor Ano Obrázek, který se zobrazí, když uživatel na banner klikne.
Výška rozbaleného obrázku Číslo Ano Výška rozbaleného obrázku.
Šířka rozbaleného obrázku Číslo Ano Šířka rozbaleného obrázku.
 
       
<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>


Název testovací reklamní jednotky: ali_expandDefaultClose

Ukázka kódu reklamy v aplikaci: rozbalitelný banner pro mobily (MRAID 2.0) s vlastním tlačítkem zavření

Tato kreativa je reklamní jednotka tvořená dvěma částmi, která se zobrazí jako banner v dolní části obrazovky. Pokud uživatel na banner klikne, reklama se rozbalí na celou obrazovku. Pokud uživatel klikne na tuto větší reklamu, bude přesměrován na konkrétní web.

Tato kreativa umožňuje použití vlastního tlačítka zavření. (Je možné upravit výšku, šířku, vzhled a pozici tlačítka.)

Chování a prvky uživatelského rozhraní

Kreativa se skládá z následujících prvků uživatelského rozhraní:

  • Podklady:
    • součást obrázku banneru (je vyžadována také šířka a výška),
    • součást rozbaleného banneru.
  • Je možné změnit barvu pozadí bannerové reklamy a rozbalené reklamy.
  • Lze použít vlastní tlačítko zavření.
Název Typ Povinné Popis
Obrázkový soubor banneru Soubor Ano Obrázek, který se zobrazí v bannerové reklamě.
Výška obrázku banneru Číslo Ano Výška obrázku banneru.
Šířka obrázku banneru Číslo Ano Šířka obrázku banneru.
Barva pozadí Text Ano Barva pozadí místa obsazeného obrázkem banneru.
Cílová adresa URL Adresa URL Ano Adresa URL, na kterou bude uživatel přesměrován, když klikne na rozbalenou reklamu.
Soubor rozbaleného obrázku Soubor Ano Obrázek, který se zobrazí, když uživatel na banner klikne.
Výška rozbaleného obrázku Číslo Ano Výška rozbaleného obrázku.
Šířka rozbaleného obrázku Číslo Ano Šířka rozbaleného obrázku.
Ikona zavření Soubor Ano Obrázkový soubor tlačítka Zavřít.
Šířka ikony zavření Číslo Ano Šířka tlačítka Zavřít. (Průměrná šířka je 30.)
Výška ikony zavření Číslo Ano Výška tlačítka Zavřít. (Průměrná výška je 30.)
 

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


Název testovací reklamní jednotky: ali_expandCustomClose

Ukázka kódu obsahové reklamy: šablona rozbalitelného zápatí (bez použití standardu MRAID verze 2.0)

Tato šablona je reklamní jednotka tvořená dvěma částmi, která se zobrazí jako banner v dolní části obrazovky. Pokud uživatel na banner klikne, reklama se rozbalí do nějakých konkrétních rozměrů. Pokud uživatel klikne na tuto větší reklamu, bude přesměrován na konkrétní web.

Tato reklama má také vlastní tlačítko zavření, které slouží k obnovení reklamy zpět do stavu banneru.

Chování a prvky uživatelského rozhraní

Kreativa se skládá z následujících prvků uživatelského rozhraní:

  • Podklady (pro každý z těchto podkladů je požadován soubor, výška a šířka)
    • součást obrázku banneru,
    • součást rozbaleného banneru,
    • ikona tlačítka zavření.
  • Pozici tlačítka zavření lze upravit, aby bylo buď v pravém horním rohu obrazovky, nebo v levém horním rohu obrazovky.
  • Barvu pozadí reklamy lze změnit.
Název Typ Povinné Popis
Obrázkový soubor banneru Soubor Ano Obrázek, který se zobrazí v bannerové reklamě.
Výška obrázku banneru Číslo Ano Výška obrázku banneru.
Šířka obrázku banneru Číslo Ano Šířka obrázku banneru.
Barva pozadí Text Ano Barva pozadí místa obsazeného rozbaleným obrázkem.
Cílová adresa URL Adresa URL Ano Adresa URL, na kterou bude uživatel přesměrován, když klikne na rozbalenou reklamu.
Obrázkový soubor rozbalené reklamy Soubor Ano Obrázek, který se zobrazí, když uživatel na banner klikne.
Výška rozbaleného obrázku Číslo Ano Výška rozbaleného obrázku.
Šířka rozbaleného obrázku Číslo Ano Šířka rozbaleného obrázku.
Ikona zavření Soubor Ano Obrázkový soubor tlačítka Zavřít.
Šířka ikony zavření Číslo Ano Šířka tlačítka Zavřít. (Průměrná šířka je 30.)
Výška ikony zavření Číslo Ano Výška tlačítka Zavřít. (Průměrná výška je 30.)
Pozice tlačítka zavření Seznam Ne Umožňuje stanovit, zda se má tlačítko Zavřít zobrazit v pravém, nebo levém horním rohu obrazovky. Možné hodnoty jsou „Right“ (Vpravo) a „Left“ (Vlevo). Pokud je tento parametr ponechán prázdný, tlačítko zavření se zobrazí v pravém horním rohu obrazovky.
 

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


Ukázka kódu rozbalitelné reklamy (verze s použitím standardu MRAID verze 1 a verze bez použití standardu MRAID)

Příklad s použitím standardu MRAID

Další informace naleznete v dokumentaci pro vývojáře.

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

Příklad bez použití standardu MRAID, použití šablon kreativ

K zobrazování banneru v mobilní aplikaci můžete použít ukázkový kód níže. Banner se po kliknutí rozbalí v překryvném okně uvnitř aplikace do jednotky na celou obrazovku. Následující zástupné prvky je třeba ve vzorovém kódu nahradit vlastními hodnotami.

  • [FALLBACK_CLICKURL]: Záložní vstupní stránka pro případ, že nedojde k volání funkce JavaScript.
  • [FULLSCREEN_UNIT]: Adresa URL reklamní jednotky na celou obrazovku.
  • [ORIENTATION]: Podporovaná orientace pro jednotku na celou obrazovku. (Pro orientaci na výšku zadejte „p“, pro orientaci na šířku zadejte „l“. Pokud tuto hodnotu neuvedete, budou povoleny obě orientace.)
  • [BANNER_UNIT]: URL obrázku banneru.
  • [WIDTH]: Šířka banneru.
  • [HEIGHT]: Výška banneru.
<!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>

Vzorový kód pro automatické ukončení vsunuté reklamy
Automaticky lze zavřít pouze přímo rezervované vsunuté reklamy. Vsunuté reklamy zobrazované prostřednictvím dynamické alokace (tj. pomocí služeb Ad Exchange, AdSense nebo AdMob) může zavřít pouze uživatel.

Chcete-li vsunutou reklamu po určité době zavřít:

  • Vložte do kreativy kód, který vsunutou reklamu po uplynutí určité doby zavře. Při tomto přístupu můžete jako šablonu použít následující kód:
<!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>
Cílové okno: překryvné okno v aplikaci

Pomocí funkce admob.opener.openOverlay() můžete otevřít překryvný prohlížeč na celou obrazovku, který bude animován z dolního okraje obrazovky. Tento prohlížeč nezahrnuje stavový řádek a v jeho levém horním rohu se vždy zobrazí tlačítko k zavření okna. Tato možnost je vhodná pro rozbalitelnou reklamu, u které lze jednotku na celou obrazovku hostovat na samostatné stránce (viz ukázka kódu pro rozbalitelnou reklamu).

Níže naleznete ukázku kódu pro jednoduchý banner, u kterého lze jednotku na celou obrazovku načíst do překryvného okna prohlížeče. Následující zástupné prvky je třeba nahradit vlastními hodnotami. Pokud je pro vaši síť k dispozici, můžete ukázkový kód použít k vytvoření šablony reklam.

  • [BANNER_UNIT]: URL bannerové kreativy.
  • [WIDTH]: Šířka bannerové kreativy.
  • [HEIGHT]: Výška bannerové reklamy.
  • [FULLSCREEN_UNIT]: URL reklamy na celou obrazovku. Poznámka: Jednotka na celou obrazovku by měla zahrnovat javascriptový kód, který analyzuje cílovou adresu URL a při obdržení akce kliknutí přesměruje uživatele na vstupní stránku. Další podrobnosti naleznete v tématu Práce s cílovou adresou URL z jednotky na celou obrazovku.
  • [DESTINATION_URL]: URL cílové stránky.
  • [FALLBACK_URL]: Záložní cílová adresa URL, která se použije v případě, že se funkce jazyka JavaScript nespustí.
  • [ORIENTATION]: Podporovaná orientace pro cílovou adresu URL. (Pro orientaci na výšku zadejte „p“, pro orientaci na šířku zadejte „l“. Pokud tuto hodnotu neuvedete, budou povoleny obě orientace.)

Zde je ukázka kódu kreativy:

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

Práce s cílovou URL z jednotky na celou obrazovku

Funkce admob.opener.openOverlay() neumožňuje určit cílovou URL obsahu HTML. Za předpokladu, že jste cílovou adresu URL při určování jednotky na celou obrazovku předali ve formě páru klíč–hodnota (například „https://odkaz.na.jednotku.na.celou.stranku?destination=https://cilova.adresa.url“), můžete napsat jednoduchou funkci jazyka JavaScript a zahrnout fragment kódu HTML, který zachytí kliknutí a přesměruje uživatele na cílovou adresu.

 

Zde je zdroj vzorové stránky:

<!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>
Cílové okno: nové okno prohlížeče

Pomocí funkce admob.opener.openUrl() můžete otevřít nové okno nativního prohlížeče (mimo aplikaci). Níže naleznete ukázku kódu pro jednoduchý banner, ve kterém lze cílovou adresu URL načíst do nového okna prohlížeče. Následující zástupné prvky je třeba nahradit vlastními hodnotami. Pokud je pro vaši síť k dispozici, můžete ukázkový kód použít k vytvoření šablony reklam.

  • [BANNER_UNIT]: URL bannerové kreativy.
  • [WIDTH]: Šířka bannerové kreativy.
  • [HEIGHT]: Výška bannerové reklamy.
  • [FULLSCREEN_UNIT]: URL reklamy na celou obrazovku.
  • [FALLBACK_URL]: Záložní cílová URL, která se použije v případě, že se funkce jazyka JavaScript nespustí.

Zde je ukázka kódu kreativy:

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

 

Také si přečtěte příručku Guide to Mobile Ad Development služby AdMob.
Pomohly vám tyto informace?
Jak bychom článek mohli vylepšit?