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!

Como fazer unidades de anúncio de DFP responsivas MonitizeMore

More than 1500 publishers see 50-400% ad revenue growth with us.

Don't just take our word for it

$100M+

Paid to Publishers

3B+

Ad Requests Monthly

1500+

Happy Publishers

Recommended Reading

ad-placement-guide
Ad Optimization
March 27, 2024

Ultimate Guide To Ad Placements for Ad Revenue Optimization

Read More
make-money-vignette-ads
Blog
Last updated: March 27, 2024

Vignette Ads:How publishers are seeing 10X gains with it?

Read More
march-core-update-penalty
Blog
March 21, 2024

Surviving Google’s March 2024 Core Update

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