Desenvolver anúncios para o SDK dos anúncios para dispositivos móveis do Google

Este é um artigo sobre como desenvolver anúncios para o SDK dos anúncios para dispositivos móveis do Google. Ele discute quais informações são necessárias para o desenvolvedor. Depois, como essas informações são usadas para criar tags que especificam o comportamento do anúncio.

Há diferentes formatos de anúncio disponíveis, incluindo banners no app, banners expansíveis e anúncios de tela cheia. Cada formato de anúncio tem os próprios recursos e funcionalidades do criativo. Por exemplo, os banners expansíveis podem mudar de tamanho e cor de fundo quando clicados. O SDK dos anúncios para dispositivos móveis do Google é compatível com os padrões MRAID.

Para usar o SDK dos anúncios para dispositivos móveis do Google, é preciso enviar o ID do app, os IDs de blocos de anúncios e os tamanhos de anúncios para o desenvolvedor.

Nesta página:

Localizar os IDs de apps de anúncios para dispositivos móveis do Google

  1. Faça login no Google Ad Manager.
  2. Clique em Inventário e depois em Apps.
  3. Encontre o app para dispositivos móveis de cujo ID você precisa ou reivindique um novo app.
  4. Clique em Clique para copiar para copiar o "ID do app" para a área de transferência. Por exemplo, ca-app-pub-3940256099942544~3347511713
  5. Envie essas informações para seu desenvolvedor.

Encontrar IDs e tamanhos de blocos de anúncios

  1. Clique em Inventário e depois em Blocos de anúncios.
  2. Clique no nome do bloco de anúncios em que você quer criar uma tag de anúncio ou crie um novo bloco de anúncios.
  3. Clique em Tags.
  4. Selecione o tipo "tag de app para dispositivos móveis" e clique em Continuar.
  5. Em "Resultados de tag", copie o "ID do bloco de anúncios" e os "Tamanhos de blocos de anúncios". Envie essas informações para seu desenvolvedor.

Mais funções em JavaScript

Para usar a funcionalidade do SDK dos anúncios para dispositivos móveis do Google, consulte a documentação do desenvolvedor.

Veja algumas funções destacadas para modificar a seção <head> do criativo.

Abrir tudo  Fechar tudo

Acesso às funcionalidades do dispositivo

O SDK expõe as funcionalidades dos navegadores no app disponíveis no iOS e no Android. Isso permite que os desenvolvedores acessem as funcionalidades do dispositivo, como o acelerômetro, o giroscópio e a bússola pelo HTML5, quando a plataforma for compatível com essas funcionalidades.

documentação do desenvolvedorSaiba mais sobre esses recursos para Android e iOS.
Eventos de apps

Os eventos de apps permitem executar código personalizado no seu aplicativo quando um criativo gera um evento de app. Com esses eventos, você pode introduzir execuções personalizadas de anúncios que interagem com o aplicativo, como mudar a cor de fundo dele.

Como dimensionar a imagem para tela cheia

Se você constatar que o anúncio de tela cheia ocupa somente parte da tela, insira o seguinte código na seção <head> do criativo:

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

Exemplo de código para anúncio no app: clique para a agenda do dispositivo móvel usando o MRAID v2.0

Este modelo é um bloco de anúncios em banner que começa como um banner na parte inferior da tela. Se um usuário clicar no banner, o aplicativo de agenda padrão criará um novo evento com seu consentimento.

Comportamento e elementos da IU

O criativo compreende os seguintes elementos da IU:

  • A imagem do banner, sua altura e largura.
  • São obrigatórias informações sobre o evento, como resumo, descrição, localização, data de início e de término.
Nome Tipo Obrigatório Descrição
Arquivo de imagem do banner Arquivo Sim É a imagem do anúncio de banner.
Largura da imagem do banner Número Sim É a largura da imagem do banner.
Altura da imagem do banner Número Sim É a altura da imagem do banner.
Resumo do evento Texto Sim Inclui o resumo do evento.
Descrição do evento Texto Sim É a descrição do evento.
Local do evento Texto Não É a localização do evento.
Data de início do evento Texto Sim A data de início do evento. A data de início deve ter o seguinte formato: "2016-10-22T00:00-05:00". Por exemplo, esta data é 22 de outubro de 2016, de 0h a 5h.
Data de término do evento Texto Sim A data de término do evento. A data de término deve ter o seguinte formato: "2016-10-22T00:00-05:00". Por exemplo, esta data é 22 de outubro de 2016, de 0h a 5h.
 

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

Nome do bloco de anúncios de teste: ali_Calendar

Exemplo de código para anúncios de display: modelo de rodapé expansível com MRAID v2.0

Esse modelo é um bloco de anúncios de dois componentes que começa como um anúncio de banner na parte inferior da tela. Se um usuário clicar no banner, o anúncio vai ser redimensionado para algumas dimensões expandidas específicas. Se o usuário clicar no anúncio com as dimensões expandidas, vai acessar o URL definido como o URL de clique.

A largura pode corresponder ao tamanho do banner ou ocupar toda a largura da tela (se o valor de FullWidthResize for "Sim").

Comportamento e elementos da IU

O criativo compreende os seguintes elementos da IU:

  • Recursos do criativo (o arquivo, a altura e a largura de cada recurso são obrigatórios)
    • Componente de imagem do banner
    • Componente de banner redimensionado
    • Ícone do botão "Fechar"
  • É possível ajustar a posição do botão "Fechar" para que ele fique no canto superior direito ou no canto superior esquerdo da tela.
  • É possível alterar a cor do plano de fundo do anúncio.
Nome Tipo Obrigatório Descrição
Arquivo de imagem do banner Arquivo Sim É a imagem que vai ser exibida no banner.
Altura da imagem do banner Número Sim É a altura da imagem do banner.
Largura da imagem do banner Número Sim É a largura da imagem do banner.
Cor do plano de fundo Texto Sim É a cor de segundo plano do espaço ocupado pela imagem redimensionada e do espaço ocupado pelo banner.
URL de clique URL Sim É o URL usado para redirecionar o usuário quando o anúncio redimensionado receber um clique.
Arquivo da imagem redimensionada Arquivo Sim É a imagem que vai ser exibida quando o banner receber um clique.
Altura da imagem redimensionada Número Sim É a altura da imagem redimensionada.
Largura da imagem redimensionada Número Sim É a largura da imagem redimensionada.
Ícone "Fechar" Arquivo Sim É o arquivo de imagem para o botão "Fechar".
Largura do ícone "Fechar" Número Sim É a largura do botão "Fechar". 30 é a largura média.
Altura do ícone "Fechar" Número Sim É a altura do botão "Fechar". 30 é a altura média.
Posição do botão "Fechar" Lista Não É possível posicionar o botão "Fechar" para que ele fique no canto superior direito ou esquerdo da tela. Os valores possíveis são "Right" (direito) ou "Left" (esquerdo). Se esse valor for deixado em branco, a posição do botão "Fechar" será definida no canto superior direito da tela.
Redimensionamento da largura total Lista Não Pode fazer o anúncio redimensionado ocupar toda a largura da tela se o valor for "Yes". Se o valor for "No", a largura terá o mesmo tamanho do banner original. Os valores possíveis são "Yes" (sim) e "No" (não). O padrão é "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>

Nome do bloco de anúncios de teste: ali_resizeBanner

Esse modelo é um bloco de anúncios de dois componentes que começa como um anúncio de banner na parte inferior da tela. Se um usuário clicar no banner, o anúncio vai ser redimensionado para cobrir toda a tela. Se o usuário clicar no anúncio com as dimensões expandidas, vai acessar o URL definido como o URL de clique.

Este modelo usa o botão "Fechar" MRAID padrão.

Comportamento e elementos da IU

O criativo compreende os seguintes elementos da IU:

  • Recursos do criativo:
    • Componente de imagem do banner (altura e largura também são obrigatórias)
    • Componente de expansão do banner
  • Pode alterar a cor de segundo plano do anúncio em banner e o anúncio expandido.
Nome Tipo Obrigatório Descrição
Arquivo de imagem do banner Arquivo Sim É a imagem que vai ser exibida no banner.
Altura da imagem do banner Número Sim É a altura da imagem do banner.
Largura da imagem do banner Número Sim É a largura da imagem do banner.
Cor do plano de fundo Texto Sim É a cor do plano de fundo do espaço ocupado pela imagem do banner.
URL de clique URL Sim É o URL usado para redirecionar o usuário quando o anúncio redimensionado receber um clique.
Arquivo da imagem expandida Arquivo Sim É a imagem que vai ser exibida quando o banner receber um clique.
Altura da imagem expandida Número Sim É a altura da imagem expandida.
Largura da imagem expandida Número Sim É a largura da imagem expandida.
 

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

Nome do bloco de anúncios de teste: ali_expandDefaultClose

Código de exemplo para o fechamento automático de um intersticial
Somente intersticiais reservados diretamente podem ser fechados de maneira automática. Os intersticiais veiculados pela alocação dinâmica (por exemplo, Ad Exchange, Google AdSense ou AdMob) só podem ser dispensados pelo usuário.

Para fechar um intersticial após um determinado período, faça o seguinte:

  • Inclua o código no criativo para fechar o intersticial após um determinado período. O código a seguir pode ser usado como modelo dessa abordagem:

<!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>
Janela de segmentação: janela de sobreposição no app

Usando admob.opener.openOverlay(), é possível abrir um navegador de sobreposição de tela cheia que é animado desde a parte inferior dela. Esse navegador não inclui uma barra de status e sempre exibe um botão "Fechar" no canto superior esquerdo. Essa opção pode funcionar bem para um anúncio expansível em que o criativo de tela cheia é hospedado em uma página separada.

Veja abaixo o código de exemplo de um banner em que o bloco de tela cheia pode ser carregado em uma janela do navegador de sobreposição. Substitua os elementos de marcação a seguir pelos seus valores. Se estiver disponível para sua rede, use o código de exemplo para criar um modelo de criativo.

  • [BANNER_UNIT]: é o URL de um criativo de banner.
  • [WIDTH]: é a largura de um criativo de banner.
  • [HEIGHT]: é a altura de um criativo de banner.
  • [FULLSCREEN_UNIT]: é o URL de um criativo de tela cheia. Observação: a unidade de tela cheia precisa incluir o código JavaScript para analisar o URL de destino e redirecionar o usuário à página de destino ao receber uma ação de clique. Consulte Manuseio do URL de destino de uma unidade de tela cheia para saber mais detalhes.
  • [DESTINATION_URL]: é o URL de uma página de destino.
  • [FALLBACK_URL]: é o URL de destino do substituto que vai ser usado caso uma função JavaScript não seja executada.
  • [ORIENTATION]: é a orientação compatível com o URL de destino. Use "p" para retrato, "l" para paisagem ou omita esse valor para permitir qualquer orientação.

Veja um exemplo de código do criativo:


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

Manuseio do URL de destino de uma unidade de tela cheia

A função admob.opener.openOverlay() não tem opção de especificar o URL de destino do conteúdo html.

Se você tiver transmitido o URL de destino na forma de par de chave-valor ao especificar o bloco de tela cheia (por exemplo, "https://link.to.fullscreen.unit?destination=https://my.destination.url"), será possível criar uma função JavaScript e incluir um snippet de código HTML para capturar o clique e redirecionar o usuário à página de destino.

Veja um exemplo de código-fonte da página:


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

Compatibilidade com MRAID

O SDK dos anúncios para dispositivos móveis do Google é compatível com o padrão MRAID (Definições de interface para anúncios rich media para dispositivos móveis) do IAB para publicidade em aplicativos para dispositivos móveis. Defina um item de linha como MRAID v1 ou MRAID v2 nas configurações de segmentação do item de linha em Adicionar segmentação Capacidade do dispositivo.

Requisitos de MRAID:

  • O MRAID v2 precisa do Google Play Services v7.8 ou mais recente para Android e do SDK dos anúncios para dispositivos móveis do Google v7.4.0 ou mais recente para iOS.
  • O MRAID v3 precisa do Google Play Services v15.0.0 ou mais recente para Android e do SDK dos anúncios para dispositivos móveis do Google v7.30.0 ou mais recente para iOS.

Para usar as funções do MRAID em um criativo de anúncio, é preciso importar o arquivo qty.js para ele. Para fazer isso, inclua <script src="mraid.js"> no seu criativo. Como o SDK dos anúncios para dispositivos móveis do Google é compatível com MRAID, ele busca esse código no criativo e o substitui por um URL que direciona à implementação do MRAID. Outros SDKs compatíveis com MRAID também fazem isso, embora os URLs sejam diferentes.

Como alternativa, é possível incluir bibliotecas MRAID, bem como a funcionalidade SDK dos anúncios para dispositivos móveis do Google, no mesmo criativo.

mraid.resize() e outras funções semelhantes só vão entrar em vigor quando o anúncio receber um clique. Isso impede que um criativo nocivo seja automaticamente redimensionado e ocupe toda a tela.
documentação do desenvolvedorSaiba mais sobre a compatibilidade com MRAID para Android ou iOS.

Isso foi útil?

Como podemos melhorá-lo?
Pesquisa
Limpar pesquisa
Fechar pesquisa
Menu principal
1525584340728923357
true
Pesquisar na Central de Ajuda
true
true
true
true
true
148
false
false