Programe anúncios para o SDK de Anúncios para Dispositivos Móveis da Google

Para usar o SDK de Anúncios para Dispositivos Móveis da Google, tem de reunir o ID da app, os IDs dos blocos de anúncios e os tamanhos dos anúncios para o programador.

Encontre os IDs das aplicações para anúncios para dispositivos móveis da Google

  1. Inicie sessão no Google Ad Manager.
  2. Clique em Inventário e, em seguida, Apps.
  3. Encontre a app para dispositivos móveis cujo ID precisa ou reivindique uma nova app para dispositivos móveis.
  4. Clique em Clique para copiar para copiar o "ID da app" para a área de transferência. Por exemplo, ca-app-pub-3940256099942544~3347511713
  5. Envie esta informação ao programador.

Encontre os IDs e os tamanhos dos blocos de anúncios

  1. Clique em Inventário e, em seguida, Blocos de anúncios.
  2. Clique no nome do bloco de anúncios para o qual pretende criar uma etiqueta do anúncio ou crie um novo bloco de anúncios.
  3. Clique em Etiquetas.
  4. Selecione o tipo de etiqueta "Etiqueta de app para dispositivos móveis" e clique em Continuar.
  5. Em "Resultados de etiquetas", copie o "ID do bloco de anúncios" e os "Tamanhos dos blocos de anúncios". Envie esta informação ao programador.

Funções JavaScript adicionais

Para tirar partido da funcionalidade do SDK de anúncios para dispositivos móveis da Google, consulte a documentação para programadores.

Seguem-se algumas funções realçadas para modificar a secção <head> do criativo.

Expandir tudo  Reduzir tudo

Aceda às capacidades do dispositivo

O SDK expõe as capacidades dos navegadores na app disponíveis no iOS e Android. Isto permite aos programadores acederem através de HTML5 às capacidades do dispositivo, como o acelerómetro, o giroscópio e a bússola, se a plataforma as suportar.

documentação para programadoresSaiba mais sobre estas capacidades para Android e iOS.
Eventos de apps

Os eventos de apps permitem a execução de código personalizado na sua aplicação quando um criativo remete um evento de apps. Com eventos de apps, pode introduzir execuções de anúncios personalizados que interagem com a aplicação, como alterar a cor de fundo da app.

Dimensionar a imagem para ecrã inteiro

Se constatar que o seu anúncio de ecrã inteiro ocupa apenas parte do ecrã, introduza o seguinte código na secção <head> do criativo:

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

Exemplo de código para anúncios na app: clique para calendário em dispositivos móveis com MRAID v2.0

Este modelo é um bloco de anúncios de faixa que começa como uma faixa de ecrã na parte inferior. Se um utilizador clicar na faixa, a respetiva aplicação de calendário predefinida cria um novo evento com o seu consentimento.

Comportamento e elementos da IU

O criativo é constituído pelos seguintes elementos da IU:

  • A imagem da faixa e a respetiva altura e largura.
  • São necessárias informações acerca do evento, tais como o resumo, a descrição, a localização, a data de início e a data de fim.
Nome Tipo Obrigatório Descrição
Ficheiro de imagem da faixa Ficheiro Sim Imagem do anúncio de faixa.
Largura da imagem da faixa Número Sim Largura da imagem da faixa.
Altura da imagem da faixa Número Sim Altura da imagem da faixa.
Resumo do evento Texto Sim Resumo do evento.
Descrição do evento Texto Sim Descrição do evento.
Localização do evento Texto Não 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". Neste caso, trata-se do dia 22 de outubro de 2016, das 00:00 às 05:00.
Data de fim do evento Texto Sim A data de fim do evento. A data de fim deve ter o seguinte formato: "2016-10-22T00:00-05:00". Neste caso, trata-se do dia 22 de outubro de 2016, das 00:00 às 05:00.
 

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

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

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

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

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

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

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

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

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

Este modelo é um bloco de anúncios de dois componentes que começa como um anúncio de faixa na parte inferior do ecrã. Se um utilizador clicar na faixa, o anúncio é redimensionado para algumas dimensões expandidas específicas. Se o utilizador clicar no anúncio com as dimensões expandidas, é redirecionado para o URL definido como o URL de clique.

A largura pode ser o tamanho da faixa ou ocupar toda a largura do ecrã (se o valor de FullWidthResize for "Yes").

Comportamento e elementos da IU

O criativo é constituído pelos seguintes elementos da IU:

  • Recursos do criativo (para cada um destes recursos, são necessários o ficheiro, a altura e a largura)
    • Componente da imagem da faixa
    • Componente da faixa redimensionada
    • Ícone do botão de fechar
  • Pode ajustar a posição do botão de fechar para que fique na parte superior direita ou na parte superior esquerda do ecrã.
  • Pode alterar a cor do fundo do anúncio.
Nome Tipo Obrigatório Descrição
Ficheiro de imagem da faixa Ficheiro Sim A imagem que é apresentada no anúncio de faixa.
Altura da imagem da faixa Número Sim A altura da imagem da faixa.
Largura da imagem da faixa Número Sim A largura da imagem da faixa.
Cor de fundo Texto Sim A cor de fundo do espaço ocupado pela imagem redimensionada e do espaço ocupado pela faixa.
URL de clique URL Sim O URL para o qual o utilizador é redirecionado quando clica no anúncio redimensionado.
Ficheiro de imagem redimensionada Ficheiro Sim A imagem que é apresentada quando se clica na faixa.
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 de fechar Ficheiro Sim O ficheiro de imagem para o botão "fechar".
Largura do ícone de fechar Número Sim A largura do botão "fechar". (30 é a largura média).
Altura do ícone de fechar Número Sim A altura do botão "fechar". (30 é a altura média).
Posição do botão de fechar Lista Não Pode posicionar o botão "fechar" para que fique na parte superior direita ou na parte superior esquerda do ecrã. Os valores possíveis são "Direita" ou "Esquerda". Se este campo for deixado em branco, o botão de fechar fica posicionado na parte superior direita do ecrã.
Redimensionamento da largura completa Lista Não Pode fazer com que o anúncio redimensionado ocupe toda a largura do ecrã se o valor for "Sim". Se o valor for "Não", a largura terá o mesmo tamanho que a faixa original. Os valores possíveis são "Sim" e "Não" e a predefinição é "Não".
 

<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

Este modelo é um bloco de anúncios de dois componentes que começa como um anúncio de faixa na parte inferior do ecrã. Se um utilizador clicar na faixa, o anúncio é redimensionado para cobrir o ecrã inteiro. Se o utilizador clicar no anúncio com as dimensões expandidas, é redirecionado para o URL definido como o URL de clique.

Este modelo usa o botão de fechar predefinido do MRAID.

Comportamento e elementos da IU

O criativo é constituído pelos seguintes elementos da IU:

  • Recursos do criativo:
    • Componente da imagem da faixa (a altura e a largura também são obrigatórias)
    • Componente de expansão da faixa
  • Pode alterar a cor de fundo do anúncio de faixa e do anúncio expandido
Nome Tipo Obrigatório Descrição
Ficheiro de imagem da faixa Ficheiro Sim A imagem que é apresentada no anúncio de faixa.
Altura da imagem da faixa Número Sim A altura da imagem da faixa.
Largura da imagem da faixa Número Sim A largura da imagem da faixa.
Cor de fundo Texto Sim A cor de fundo do espaço ocupado pela imagem da faixa.
URL de clique URL Sim O URL para o qual o utilizador é redirecionado quando clica no anúncio redimensionado.
Ficheiro de imagem expandida Ficheiro Sim A imagem que é apresentada quando se clica na faixa.
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

Exemplo de código para fechar automaticamente um anúncio intercalar
Apenas os anúncios intercalares reservados diretamente podem ser encerrados automaticamente; os anúncios intercalares publicados através de uma atribuição dinâmica (ou seja, com o Ad Exchange, o AdSense ou o AdMob) apenas podem ser ignorados pelo utilizador.

Para encerrar um anúncio intercalar após um período de tempo estabelecido:

  • No criativo, inclua o código para fechar o anúncio intercalar após terminar o período de tempo estabelecido. Pode usar o seguinte código como um modelo para esta 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 destino: janela de sobreposição na app

Ao usar admob.opener.openOverlay(), pode abrir um navegador de sobreposição de ecrã inteiro que é animado a partir da parte inferior do ecrã. Este navegador não inclui uma barra de estado e apresenta sempre um botão de fechar no canto superior esquerdo. Esta opção pode funcionar muito bem para um anúncio expansível, em que o criativo de ecrã inteiro pode ser alojado numa página separada.

Abaixo, encontra-se um exemplo de código para uma faixa, em que o bloco de ecrã inteiro pode ser carregado numa janela do navegador de sobreposição. Deve substituir os seguintes elementos de marcador de posição pelos seus próprios valores. Se estiver disponível para a sua rede, pode usar o exemplo de código para criar um modelo de criativo.

  • [BANNER_UNIT]: URL de um criativo de faixa.
  • [WIDTH]: largura de um criativo de faixa.
  • [HEIGHT]: altura de um criativo de faixa.
  • [FULLSCREEN_UNIT]: URL de um criativo de ecrã inteiro. Nota: o bloco de ecrã inteiro deve incluir código de JavaScript para analisar o URL de destino e redirecionar o utilizador para a página de destino após receber uma ação de clique. Consulte Gerir o URL de destino de um bloco de ecrã inteiro para obter mais detalhes.
  • [DESTINATION_URL]: URL de uma página de destino.
  • [FALLBACK_URL]: URL de destino alternativo a utilizar se a função JavaScript não for executada.
  • [ORIENTATION]: orientação suportada para o URL de destino (use "p" para retrato, "l" para paisagem ou omita este valor para permitir qualquer orientação).

Segue-se um exemplo de um código de anúncio:


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

Gerir o URL de destino de um bloco de ecrã inteiro

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

Supondo que transmitiu o URL de destino na forma de par de chave-valor ao especificar o bloco de ecrã inteiro, por exemplo, "https://link.to.fullscreen.unit?destination=https://my.destination.url", pode escrever uma função JavaScript e incluir um fragmento do código HTML para capturar o clique e redirecionar o utilizador para a página de destino.

Segue-se um exemplo de origem 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() {
  // Obter URL atual depois de ?
  var destinationUrl = window.location.search;

  // Retirar o '?' principal
  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); 

  // Abrir destino dentro da sobreposição
  window.location = url;

  // Abrir destino num navegador externo
  // 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 de Anúncios para Dispositivos Móveis da Google suporta a norma Definições de interface de anúncios multimédia para telemóvel (MRAID) do IAB para publicidade em apps para dispositivos móveis. Pode definir um elemento publicitário como MRAID v1 ou MRAID v2 através das definições de segmentação de elementos publicitários, em Adicionar segmentação e, em seguida, Capacidade do dispositivo.

Requisitos do MRAID:

  • O MRAID v2 requer os Serviços do Google Play v7.8 ou superior para o Android e o SDK de Anúncios para Dispositivos Móveis da Google v7.4.0 ou superior para o iOS.
  • O MRAID v3 requer os Serviços do Google Play v15.0.0 ou superior para o Android e o SDK de Anúncios para Dispositivos Móveis da Google v7.30.0 ou superior para o iOS.

Para usar as funções do MRAID nos seus criativos de anúncios, tem de importar mraid.js para o criativo. Para isso, inclua <script src="mraid.js"> no criativo. Sendo um SDK compatível com MRAID, o SDK de Anúncios para Dispositivos Móveis da Google procura esse código no criativo e substitui-o por um URL real que aponta para uma implementação do MRAID. Os outros SDKs compatíveis com MRAID fazem o mesmo, embora os URLs reais sejam diferentes.

Opcionalmente, pode incluir as bibliotecas do MRAID, assim como a funcionalidade do SDK de anúncios para dispositivos móveis da Google, no mesmo criativo.

mraid.resize() e outras funções semelhantes não terão qualquer efeito antes de alguém clicar no anúncio. Isso impede que um criativo malicioso seja automaticamente redimensionado e ocupe a totalidade do ecrã.
documentação para programadoresSaiba mais sobre a compatibilidade com MRAID para Android ou iOS.

A informação foi útil?

Como podemos melhorá-la?
Pesquisa
Limpar pesquisa
Fechar pesquisa
Menu principal
15385449484682280565
true
Pesquisar no Centro de ajuda
true
true
true
true
true
148
false
false