Este é um artigo acerca da programação de anúncios para o SDK de Anúncios para Dispositivos Móveis da Google. Aborda as informações necessárias para o seu programador. Em seguida, explica como essas informações são usadas para criar etiquetas que especificam o comportamento do anúncio.
Existem diferentes formatos de anúncio disponíveis, incluindo faixas na app, faixas expansíveis e anúncios de ecrã inteiro. Cada formato de anúncio tem os seus próprios recursos e funcionalidades dos criativos. Por exemplo, as faixas expansíveis podem mudar de tamanho e cor de fundo quando alguém clica nelas. O SDK de Anúncios para Dispositivos Móveis da Google é compatível com as normas MRAID.
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.
Nesta página:
- Encontre os IDs das aplicações para anúncios para dispositivos móveis da Google
- Encontre os IDs e os tamanhos dos blocos de anúncios
- Funções JavaScript adicionais
- Compatibilidade com MRAID
Encontre os IDs das aplicações para anúncios para dispositivos móveis da Google
- Inicie sessão no Google Ad Manager.
- Clique em Inventário e, de seguida, em Apps.
- Encontre a app para dispositivos móveis cujo ID precisa ou reivindique uma nova app para dispositivos móveis.
- Clique em para copiar o "ID da app" para a área de transferência. Por exemplo,
ca-app-pub-3940256099942544~3347511713
- Envie esta informação ao programador.
Encontre os IDs e os tamanhos dos blocos de anúncios
- Clique em Inventário e, de seguida, em Blocos de anúncios.
- 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.
- Clique em Etiquetas.
- Selecione o tipo de etiqueta "Etiqueta de app para dispositivos móveis" e clique em Continuar.
- 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.
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.
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.
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"/>
.
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
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". 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
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>
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 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ã.