Como fazer unidades de anúncio de DFP responsivas

Portuguese articles
Last updated: May 26, 2020 | by Kean Graham
Como fazer unidades de anncio de DFP responsivas

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! 

Se você precisa de ajuda, entre em contato conosco aqui.

Antes de começar, certifique-se de fazer o seguinte:

  1. 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 
  2. Confira nosso tutorial de como gerar várias tags do Ad Manager aqui: https://www.youtube.com/watch?v=s74dMDzczyc&feature=youtu.be
  3. 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).
  4. Faça um para o cabeçalho (head) e um para as tags do corpo.
  5. Salve as tags do corpo.
  6. 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?

Se você está interessado em obter ajuda para configurar as unidades de anúncio responsivas do DFP, junte-se à MonetizeMore hoje!

monetizemore programmatic revenue optimization

"NET RPM increased 61.3% compared to our yearly average before working with MonetizeMore, and NET Revenues increased 54.8%. There is no doubt that turning over the day-to-day management of our ad inventory to MonetizeMore's team of experts has been the right move for our business."

$100M+

Paid to Publishers

3B+

Ad Requests Monthly

1500+

Happy Publishers

Recommended Reading

ad-blocker-monetize
Ad Blocking
February 28, 2024

Ad Blocker Monetization: How publishers can still make money

Read More
ad block
Ad Blocking
February 28, 2024

How Google Chrome Plans To Evolve And Overcome Ad Blocking Copy

Read More
Blog
Last updated: February 27, 2024

How finance sites can 10X their ad revenue? [monetization tricks included]

Read More

Trusted by 1,500+ publishers worldwide

10X your ad revenue with our award-winning solutions.

Let's Talk

Close

Ready to 10X your ad revenue with the #1 ad management partner?

Start Now