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.
Localizar os IDs de apps de anúncios para dispositivos móveis do Google
- Faça login no Google Ad Manager.
- Clique em Inventário
Apps.
- Encontre o app para dispositivos móveis de cujo ID você precisa ou reivindique um novo app.
- Clique em
para copiar o "ID do app" para a área de transferência. Por exemplo,
ca-app-pub-3940256099942544~3347511713 - Envie essas informações para seu desenvolvedor.
Encontrar IDs e tamanhos de blocos de anúncios
- Clique em Inventário
- 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.
- Clique em Tags.
- Selecione o tipo "tag de app para dispositivos móveis" e clique em Continuar.
- 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.
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.
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.
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"/>.
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 a seguinte forma: "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 final deve ter a seguinte forma: "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
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" (direita) ou "Left" (esquerda). 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
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>
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 apps 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.