Como criar blocos de anúncios do DFP responsivos

Publicados: 2016-01-22
anúncios responsivos do google dfp - exemplo de tag doubleclick

Esta postagem foi atualizada pela última vez em 31 de agosto de 2021

Então você tem um tema responsivo e agora deseja migrar do AdSense para o Google Ad Manager (GAM). A primeira coisa que você vê é que não há mais blocos de anúncios responsivos como os que você normalmente encontra no Google AdSense.

As instruções de suporte do Google podem ser um pouco difíceis ou complicadas. Então, hoje vou mostrar como você pode tornar os códigos GAM responsivos em algumas etapas simples.

Personalizar o código do DFP para criar anúncios responsivos do Google Ad Manager não é uma tarefa fácil.Se você não tem experiência em codificação, seria mais prudente que os especialistas fizessem isso por você corretamente na primeira vez.Você não quer correr o risco de perder suas receitas de anúncios!

Se precisar de ajuda , entre em contato conosco aqui.

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

  1. Configure seu inventário. Configure todos os tamanhos relevantes por bloco de anúncios. Leia: Práticas recomendadas de integração do Adsense e do GAM
  2. Confira nosso tutorial sobre como gerar várias tags do Ad Manager aqui: https://youtu.be/s74dMDzczyc
  3. Agora crie dois arquivos de texto e salve-os. Use um bom editor de texto (prefiro usar o Notepad++ porque é gratuito e fácil de trabalhar).
  4. Faça um para a cabeça e outro para as marcas do corpo.
  5. Salve as tags do corpo.
  6. Abra o arquivo head.txt que você criou.

Tornando a tag de cabeçalho responsiva

Passo 1: Abra o arquivo head.txt no Notepad++.Primeiro, vamos fazer isso passo a passo. Seu código de cabeçalho ficará mais ou menos assim:

<!– Iniciar etiqueta GPT –>

<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>

<!– Terminar etiqueta GPT –>

Etapa 2: destaquei um trecho de código lá:

googletag.cmd.push(function() {

Você tem que 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 a qualquer rota que você escolher entre as seguintes:

  • O número de mapas de tamanho. Você pode reutilizar o mapa de mesmo tamanho em vários blocos de anúncios, se aplicável
  • O número de blocos de anúncios que você tem
  • O número de blocos de anúncios que você deseja tornar responsivos
var mappingadunitname = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [728, 90], [300, 250], [1, 1]]). //Área de Trabalho

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //tábua

addSize([320, 0], [[320, 50], [320, 100], [300, 250], [1, 1]]). //móvel

addSize([0, 0], [[320, 50], [1, 1]]). //outro

construir();

Etapa 3: destaquei outro trecho de código.Este é o nome do mapeamento que passaremos no bloco de anúncios daqui a pouco. Prefiro fazer assim,mappingadunitname, então, para o nosso exemplo acima, estou escolhendo criar 1 tamanho de mapa por unidade, o que significa que precisaremos de 4 instâncias dele e colocá-lo depois:

googletag.cmd.push(function() {

Passo 4: Depois de adicionar o mapeamento, seu código de cabeçalho deve ser algo como isto:

<!– Iniciar etiqueta GPT –>

<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] ]). //Área de Trabalho

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //tábua

addSize([0, 0], [1, 1]). //outro

construir();

var mappingcontentad1 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [1, 1]]). //Área de Trabalho

addSize([768, 0], [[728, 280], [728, 90], [1, 1]]). //tábua

addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //móvel

addSize([0, 0], [[320, 50], [1, 1]]). //outro

construir();

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //Área de Trabalho

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //tábua

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //móvel

addSize([0, 0], [[300, 250], [1, 1]]). //outro

construir();

var mappingrightrail1 = googletag.sizeMapping().

addSize([992, 0], [[300, 250], [1, 1]]). //Área de Trabalho

addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //tábua

addSize([0, 0], [1, 1]). //outro

construir();

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>

<!– Terminar etiqueta GPT –>

Etapa 5: Agora, uma última etapa: você precisa definir ou atribuir mapeamento de tamanho para cada uma das unidades de anúncio.Vamos pegar um aqui e depois mostrarei o que adicionar e onde.

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.addService(googletag.pubads());

Passo 6: Agora você precisa adicionar este trecho de código .defineSizeMapping(mappingadunitname)entre as partes azul e vermelha do código acima. ou seja, antes do ponto

O importante aqui é que as palavras entre colchetes devem corresponder ao tamanho do mapa que você deseja adicionar ao bloco de anúncios. Para nosso exemplo aqui, RightRail_Ad1 deve ter esta aparência:

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.defineSizeMapping(mappingrightrail1).addService(googletag.pubads());

Etapa 7: adicionar um mapeamento semelhante para todos os outros blocos de anúncios fornecerá seu código final.

<!– Iniciar etiqueta GPT –>

<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] ]). //Área de Trabalho

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //tábua

addSize([0, 0], [1, 1]). //outro

construir();

var mappingcontentad1 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [1, 1]]). //Área de Trabalho

addSize([768, 0], [[728, 280], [728, 90], [1, 1]]). //tábua

addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //móvel

addSize([0, 0], [[320, 50], [1, 1]]). //outro

construir();

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //Área de Trabalho

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //tábua

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //móvel

addSize([0, 0], [[300, 250], [1, 1]]). //outro

construir();

var mappingrightrail1 = googletag.sizeMapping().

addSize([992, 0], [[300, 250], [1, 1]]). //Área de Trabalho

addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //tábua

addSize([0, 0], [1, 1]). //outro

construir();

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>

<!– Terminar etiqueta GPT –>

Observação: partes do código destacadas para enfatizar qual mapa de tamanho foi usado para qual bloco de anúncios.

Passo 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]]). //Área de Trabalho

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //tábua

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //móvel

addSize([0, 0], [[300, 250], [1, 1]]). //outro

construir();

O código em vermelho define a largura e a altura do navegador. Normalmente a altura não é importante porque é levada em consideração apenas 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 992 px, mostre 728 × 280 ou 728 × 90 ou 336 × 280 ou 300 × 250 ou 1 × 1 tamanhos de anúncio

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 nºs, 992px, 768px e 320px funcionarão para a maioria dos sites, pois seguem os tamanhos convencionais de desktop, tablet e navegadores móveis.

No entanto, se você tiver um site com um tablet e um tema móvel, poderá perguntar ao seu desenvolvedor qual tamanho do navegador a transição do tema é acionada e, em seguida, adicionar esse tamanho no lugar de 768px e 320px, respectivamente.

Qual é a sua estratégia de receita programática para 2019?

Na MonetizeMore, ajudamos os editores a obter mais receita de seu inventário de anúncios existente.Somos um dos principais parceiros de publicação do Google e temos um conjunto de soluções de monetização para editores que ajudam nossos clientes a atingir suas metas de receita e resolver suas dores de cabeça com operações de anúncios.

Embora seja totalmente possível configurar blocos de anúncios responsivos do DFP por conta própria, é importante considerar o custo de oportunidade.Vale a pena gastar o tempo que você poderia estar gastando no crescimento de seus negócios e correr o risco de perder receitas devido a uma configuração defeituosa?

Se você estiver interessado em obter ajuda para configurar blocos de anúncios responsivos do DFP.Inscreva-se para uma conta Premium na MonetizeMore hoje!

otimização de receita programática monetizemore

Leituras Relacionadas:

  • O Google AdSense oferece blocos de anúncios responsivos
  • Principais tipos de anúncio para celular de 2016
  • Os benefícios das Accelerated Mobile Pages da Doubleclick para editores
  • Como preparar os editores, já que os gastos com anúncios em dispositivos móveis superam os de computadores
  • Doubleclick agora oferece rastreamento entre dispositivos e publicidade nativa para anunciantes e editores móveis