This post was most recently updated on May 26th, 2020
Você já tem um tema responsivo e agora quer migrar do Google Ad Manager (GAM) para o AdSense. A primeira coisa que você nota é que não há mais unidades de anúncio responsivas como tipicamente encontradas no AdSense.
As instruções de suporte do Google podem ser um pouco difíceis ou complicadas. Então hoje eu vou te mostrar como você tornar os códigos GAM em responsivos em alguns passos simples.
|
Personalizar o código do DFP para deixar unidades de anúncio responsivas não é uma tarefa fácil. Se você não tem experiência em codificação, seria mais prudente deixar os especialistas fazerem corretamente na primeira vez. Você não quer arriscar perder a sua receita de anúncios! |
Antes de começar, certifique-se de fazer o seguinte:
- Configure seu inventário. Configure todos os tamanhos relevantes por unidade de anúncios. Leia: Melhores práticas de integração do AdSense e do GAM
- Confira nosso tutorial de como gerar várias tags do Ad Manager aqui: https://www.youtube.com/watch?v=s74dMDzczyc&feature=youtu.be
- Agora crie dois arquivos de texto e salve-os. Use um bom editor de texto (eu prefiro usar o Notepad++ porque é de graça e fácil de trabalhar).
- Faça um para o cabeçalho (head) e um para as tags do corpo.
- Salve as tags do corpo.
- Abra o arquivo head.txt que você criou.
Deixando a tag do cabeçalho responsiva
Etapa 1: Abra o head.txt no Notepad++. Primeiro, vamos fazer o passo a passo. Seu código do cabeçalho será mais ou menos assim:
| <!– Start GPT Tag –>
<script async src=’https://securepubads.g.doubleclick.net/tag/js/gpt.js’></script> <script> window.googletag = window.googletag || {cmd: []}; googletag.cmd.push(function() { googletag.defineSlot(‘/1234567/Header_Ad1’, [[970,90],[970,250],[728,90],[300,250]], ‘div-gpt-ad-9386839-1’) .addService(googletag.pubads()); googletag.defineSlot(‘/1234567/content_Ad1’, [[728,90],[320,50],[320,100]], ‘div-gpt-ad-9386839-2’) .addService(googletag.pubads()); googletag.defineSlot(‘/1234567/Content_Ad2’, [[728,90],[336,280],[300,250],[320,100],[320,50]], ‘div-gpt-ad-9386839-3’) .addService(googletag.pubads()); googletag.defineSlot(‘/1234567/RightRail_Ad1’, [[300,250],[320,50],[320,100]], ‘div-gpt-ad-9386839-4’) .addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.pubads().collapseEmptyDivs(); googletag.enableServices(); }); </script> <!– End GPT Tag –> |
Etapa 2: Eu destaquei o pedaço de um código aqui:
googletag.cmd.push(function() {
Você precisa adicionar um pouco de código após a linha destacada. Abaixo está o código fornecido que você deve adicionar. Cole quantas instâncias (cópias) dele corresponderem à rota que você escolher dentre as seguintes:
- O número de mapas de tamanho. Você pode reutilizar o mesmo mapa de tamanho em várias unidade de anúncio, se aplicável
- O número de unidades de anúncio que você possui
- O número de unidades de anúncio que você deseja responder
| var mappingadunitname = googletag.sizeMapping().
addSize([992, 0], [[970, 90], [728, 90], [300, 250], [1, 1]]). //desktop addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //tablet addSize([320, 0], [[320, 50], [320, 100], [300, 250], [1, 1]]). //mobile addSize([0, 0], [[320, 50], [1, 1]]). //other build(); |
Etapa 3: Eu destaquei outro código. Esse é o nome do mapeamento que vamos passar na unidade de anúncios daqui a pouco. Prefiro fazê-lo dessa maneira, mappingadunitname. Então, para o nosso exemplo acima, estou escolhendo criar um mapa de tamanho por unidade, o que significa que precisaremos de 4 instâncias dele e colocá-lo depois:
googletag.cmd.push(function() {
Step 4: Depois de adicionar o mapeamento, o seu cabeçalho deveria estar parecido com isso:
| <!– Start GPT Tag –>
<script async src=’https://securepubads.g.doubleclick.net/tag/js/gpt.js’></script> <script> window.googletag = window.googletag || {cmd: []}; googletag.cmd.push(function() { var mappingheaderad1 = googletag.sizeMapping(). addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1]]). //desktop addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //tablet addSize([0, 0], [1, 1]). //other build(); var mappingcontentad1 = googletag.sizeMapping(). addSize([992, 0], [[728, 280], [728, 90], [1, 1]]). //desktop addSize([768, 0], [[728, 280], [728, 90], [1, 1]]). //tablet addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //mobile addSize([0, 0], [[320, 50], [1, 1]]). //other build(); var mappingcontentad2 = googletag.sizeMapping(). addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //desktop addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //tablet addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //mobile addSize([0, 0], [[300, 250], [1, 1]]). //other build(); var mappingrightrail1 = googletag.sizeMapping(). addSize([992, 0], [[300, 250], [1, 1]]). //desktop addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //tablet addSize([0, 0], [1, 1]). //other build(); googletag.defineSlot(‘/1234567/Header_Ad1’, [[970,90],[970,250],[728,90],[300,250]], ‘div-gpt-ad-9386839-1’) .addService(googletag.pubads()); googletag.defineSlot(‘/1234567/content_Ad1’, [[728,90],[320,50],[320,100]], ‘div-gpt-ad-9386839-2’) .addService(googletag.pubads()); googletag.defineSlot(‘/1234567/Content_Ad2’, [[728,90],[336,280],[300,250],[320,100],[320,50]], ‘div-gpt-ad-9386839-3’) .addService(googletag.pubads()); googletag.defineSlot(‘/1234567/RightRail_Ad1’, [[300,250],[320,50],[320,100]], ‘div-gpt-ad-9386839-4’) .addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.pubads().collapseEmptyDivs(); googletag.enableServices(); }); </script> <!– End GPT Tag –> |
Etapa 5: Agora uma última etapa: você precisa definir ou atribuir o mapeamento de tamanho para cada uma das unidades de anúncios. Vamos pegar um aqui e depois eu vou mostrar o que adicionar e onde.
| googletag.defineSlot(‘/1234567/RightRail_Ad1’, [[300,250],[320,50],[320,100]], ‘div-gpt-ad-9386839-4’)
.addService(googletag.pubads()); |
Etapa 6: Agora você precisa adicionar esse trecho de código .defineSizeMapping(mappingadunitname) entre a parte azul e vermelha do código acima, ou seja, antes do ponto.
O importante aqui é que as palavras entre colchetes correspondam ao mapa de tamanho que você deseja adicionar dentro da unidade de anúncios. Para o nosso exemplo aqui, RightRail_Ad1 deve ter essa aparência:
| googletag.defineSlot(‘/1234567/RightRail_Ad1’, [[300,250],[320,50],[320,100]], ‘div-gpt-ad-9386839-4’)
.defineSizeMapping(mappingrightrail1).addService(googletag.pubads()); |
Passo 7: Adicionar mapeamento semelhante para todos os outros blocos de anúncios fornecerá seu código final.
| <!– Start GPT Tag –>
<script async src=’https://securepubads.g.doubleclick.net/tag/js/gpt.js’></script> <script> window.googletag = window.googletag || {cmd: []}; googletag.cmd.push(function() { var mappingheaderad1 = googletag.sizeMapping(). addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1]]). //desktop addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //tablet addSize([0, 0], [1, 1]). //other build(); var mappingcontentad1 = googletag.sizeMapping(). addSize([992, 0], [[728, 280], [728, 90], [1, 1]]). //desktop addSize([768, 0], [[728, 280], [728, 90], [1, 1]]). //tablet addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //mobile addSize([0, 0], [[320, 50], [1, 1]]). //other build(); var mappingcontentad2 = googletag.sizeMapping(). addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //desktop addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //tablet addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //mobile addSize([0, 0], [[300, 250], [1, 1]]). //other build(); var mappingrightrail1 = googletag.sizeMapping(). addSize([992, 0], [[300, 250], [1, 1]]). //desktop addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //tablet addSize([0, 0], [1, 1]). //other build(); googletag.defineSlot(‘/1234567/Header_Ad1’, [[970,90],[970,250],[728,90],[300,250]], ‘div-gpt-ad-9386839-1’) .defineSizeMapping(mappingheaderad1).addService(googletag.pubads()); googletag.defineSlot(‘/1234567/content_Ad1’, [[728,90],[320,50],[320,100]], ‘div-gpt-ad-9386839-2’) .defineSizeMapping(mappingcontentad1).addService(googletag.pubads()); googletag.defineSlot(‘/1234567/Content_Ad2’, [[728,90],[336,280],[300,250],[320,100],[320,50]], ‘div-gpt-ad-9386839-3’) .defineSizeMapping(mappingcontentad2).addService(googletag.pubads()); googletag.defineSlot(‘/1234567/RightRail_Ad1’, [[300,250],[320,50],[320,100]], ‘div-gpt-ad-9386839-4’) .defineSizeMapping(mappingrightrail1).addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.pubads().collapseEmptyDivs(); googletag.enableServices(); }); </script> <!– End GPT Tag –> |
Nota: partes do código foram destacadas para enfatizar qual mapa de tamanho foi usado para qual unidade de anúncios.
Etapa 8: Agora vamos ver o mapeamento de tamanho:
| var mappingcontentad2 = googletag.sizeMapping().
addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //desktop addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //tablet addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //mobile addSize([0, 0], [[300, 250], [1, 1]]). //other build(); |
O código em vermelho define a largura e altura do navegador. Normalmente, a altura não é importante, pois só é considerada quando temos larguras iguais para 2 linhas no código acima.
Passo 9: Agora estamos dizendo isso na primeira linha:
- Se a largura do navegador for igual ou superior a 922px, mostre os tamanhos de anúncio 728×90 ou 336×280 ou 300×250 ou 1×1
E na última linha, estamos dizendo:
- Se a largura do navegador for igual ou superior a 320px, mostre os tamanhos de anúncio 320×50 ou 320×100 ou 320×200 ou 300×250 ou 1×1
Os no.s, 992px, 768px and 320px funcionarão para a maioria dos sites, pois seguem os tamanhos convencionais de navegadores de desktop, tablet, e celulares.
No entanto, se você tem um site com um tema para tablet ou celular, você pode perguntar para o seu desenvolvedor que tamanho de navegador a transição do tema é acionada e aí você poderá adicionar esse tamanho no lugar do 768px e 320px respectivamente.
320px respectivamente.
Qual é a sua estratégia de receitas programáticas para 2019?
Na MonetizeMore, nós ajudamos editores a aumentar a receita com seus inventários de anúncios já existentes. Somos um dos principais Parceiros de Publicação do Google e temos um conjunto de soluções de monetização para ajudar nossos clientes a atingir suas metas de receitas e solucionar as dores de cabeça com as operações de anúncios.
Embora seja completamente possível configurar as unidades de anúncio responsivas do DFP, é importante considerar sua oportunidade de custo. Vale a pena usar o tempo que você gastaria crescendo seu negócio e arriscar perder receitas por causa de uma configuração falha?
Kean Graham is the CEO and founder of MonetizeMore & a pioneer in the Adtech Industry. He is the resident expert in Ad Optimization, covering areas like Adsense Optimization,GAM Management, and third-party ad network partnerships. Kean believes in the supremacy of direct publisher deals and holistic optimization as keys to effective and consistent ad revenue increases.