Como fazer com que as unidades de anúncio do DFP sejam responsivas

Kean Graham

8 years ago

This post was most recently updated on January 13th, 2021

Então você tem uma tema responsivo e agora deseja trocar do AdSense pro DFP. A primeira coisa que você percebe é que não há mais unidades de anúncios responsivas como você tipicamente encontrava no AdSense. As instruções de suporte do Google podem ser um pouco complicadas. Então, hoje eu vou mostrar como você pode fazer os códigos do DFP responsivos em alguns passos simples.

Seguem algumas coisas que devem ser feitas antes de começarmos:

Configure o seu inventário: Leia: Melhores práticas de integração AdSense e DFP.
Quando você tiver adicionado todas suas unidades de anúncios, gere os códigos e selecione todas suas unidades de anúncios.
Marque a opção síncrono e desmarque a opção de “Habilitar pedido único”.
Passe para o próximo passo e você terá os códigos.
Agora faça dois arquivos de texto e salve-os. Use um bom editor de texto (Eu prefiro usar o Notepad** porque é gratuito e fácil de se mexer)
Faça um arquivo para a etiqueta (tag) do cabeçalho e outro para a do corpo do texto.
Salve as etiquetas do corpo do texto.
Abra o arquivo head.txt que você criou.

Quer as melhores dicas para aumentar sua receita e saber de tudo o que acontece no mundo da otimização de anúncios, Header Bidding e Ad Tech? Assine a nossa Newsletter e não perca nenhuma dica ou tendência da indústria.

Fazendo com que a etiqueta do cabeçalho seja responsiva

Abra o arquivo head.txt no Notepad ++. Primeiro, vamos fazer passo a passo. O código do cabeçalho vai ser algo do tipo:

(function() {

var useSSL = ‘https:’ == document.location.protocol;

var src = (useSSL ? ‘https:’ : ‘http:’) +

‘//www.googletagservices.com/tag/js/gpt.js’;

document.write(‘<scr’ + ‘ipt src=”‘ + src + ‘”></scr’ + ‘ipt>’);

})();

</script>

googletag.cmd.push(function() {

// Comments: Here, we have to define size mapping for each of the ad unit.

googletag.defineSlot(‘/120037321/Header_Ad1’, [300, 250], ‘div-gpt-ad-1446934432723-0’).addService(googletag.pubads());

googletag.defineSlot(‘/120037321/content_Ad1’, [320, 50], ‘div-gpt-ad-1446934432723-1’).addService(googletag.pubads());

googletag.defineSlot(‘/120037321/Content_Ad2’, [320, 50], ‘div-gpt-ad-1446934432723-2’).addService(googletag.pubads());

googletag.defineSlot(‘/120037321/RightRail_Ad1’, [320, 50], ‘div-gpt-ad-1446934432730-3’).addService(googletag.pubads());

googletag.defineSlot(‘/120037321/RightRail_Ad2’, [320, 50], ‘div-gpt-ad-1446934432730-4’).addService(googletag.pubads());

googletag.pubads().enableSyncRendering();

googletag.enableServices();

});

</script>

Eu destaquei uma parte do código

googletag.cmd.push(function() {

Você precisa adicionar uma parte do código depois da linha destacada. Abaixo está o código que você precisa adicionar. Cole o número de vezes correspondente ao número de unidades de anúncios que você possui ou, pelo menos, o número de unidades que você deseja tornar responsivas.

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();

Eu destaquei outra parte do código. Esse é o nome do mapeamento o qual nós vamos colocar na unidade de anúncio logo mais. Tenha certeza que é diferente para cada unidade de anúncios. Por continência, eu prefiro fazê-lo dessa forma: mappingadunitname, logo para o nosso exemplo acima nós precisaremos de mais cinco ocorrências e adicionar depois de :

googletag.cmd.push(function() {

Depois de adicionar o mapeamento, seu código será algo do tipo:

(function() {

var useSSL = ‘https:’ == document.location.protocol;

var src = (useSSL ? ‘https:’ : ‘http:’) +

‘//www.googletagservices.com/tag/js/gpt.js’;

document.write(‘<scr’ + ‘ipt src=”‘ + src + ‘”></scr’ + ‘ipt>’);

})();

</script>

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();

var mappingrightrail2 = googletag.sizeMapping().

addSize([992, 0], [[300, 250], [300, 600], [160, 600], [1, 1]]). //desktop

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

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

build();

googletag.defineSlot(‘/120037321/Header_Ad1’, [300, 250], ‘div-gpt-ad-1446934432723-0’).addService(googletag.pubads());

googletag.defineSlot(‘/120037321/content_Ad1’, [320, 50], ‘div-gpt-ad-1446934432723-1’).addService(googletag.pubads());

googletag.defineSlot(‘/120037321/Content_Ad2’, [320, 50], ‘div-gpt-ad-1446934432723-2’).addService(googletag.pubads());

googletag.defineSlot(‘/120037321/RightRail_Ad1’, [320, 50], ‘div-gpt-ad-1446934432730-3’).addService(googletag.pubads());

googletag.defineSlot(‘/120037321/RightRail_Ad2’, [320, 50], ‘div-gpt-ad-1446934432730-4’).addService(googletag.pubads());

googletag.pubads().enableSyncRendering();

googletag.enableServices();

});

</script>

Agora o último passo: Você precisa definir o mapeamento para cada código que eu destaquei. Vamos pegar um aqui e eu mostrarei o que adicionar e aonde adicionar:

googletag.defineSlot(‘/120037321/RightRail_Ad2’, [320, 50], ‘div-gpt-ad-1446934432730-4’).addService(googletag.pubads());

Agora você precisa adicionar esse pedaço de código .defineSizeMapping(mappingadunitname) entre a parte azul e vermelha do código acima, i.e. antes do ponto.

O importante aqui é que as palavras dentro de parênteses devem corresponder com o mapeamento que você deseja adicionar dentro da unidade de anúncio. No nosso exemplo, RightRail 2 deve ter a seguinte aparência:

googletag.defineSlot(‘/120037321/RightRail_ad2’, [320, 50], ‘div-gpt-ad-1446934432730-7’).defineSizeMapping(mappingrightrail2).addService(googletag.pubads());

Adicionando o mapeamento da mesma forma para todas as unidades você terá o seu código finalizado.

(function() {

var useSSL = ‘https:’ == document.location.protocol;

var src = (useSSL ? ‘https:’ : ‘http:’) +

‘//www.googletagservices.com/tag/js/gpt.js’;

document.write(‘<scr’ + ‘ipt src=”‘ + src + ‘”></scr’ + ‘ipt>’);

})();

</script>

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();

var mappingrightrail2 = googletag.sizeMapping().

addSize([992, 0], [[300, 250], [300, 600], [160, 600], [1, 1]]). //desktop

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

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

build();

googletag.defineSlot(‘/120037321/Header_ad1’, [300, 250], ‘div-gpt-ad-1446934432730-1’).defineSizeMapping(mappingheaderad1).addService(googletag.pubads());

googletag.defineSlot(‘/120037321/content_ad1’, [320, 50], ‘div-gpt-ad-1446934432730-2’).defineSizeMapping(mappingcontentad1).addService(googletag.pubads());

googletag.defineSlot(‘/120037321/content_ad2’, [320, 50], ‘div-gpt-ad-1446934432730-3’).defineSizeMapping(mappingcontentad2).addService(googletag.pubads());

googletag.defineSlot(‘/120037321/RightRail_Ad1’, [320, 50], ‘div-gpt-ad-1446934432730-6’).defineSizeMapping(mappingrightrail1).addService(googletag.pubads());

googletag.defineSlot(‘/120037321/RightRail_ad2’, [320, 50], ‘div-gpt-ad-1446934432730-7’).defineSizeMapping(mappingrightrail2).addService(googletag.pubads());

googletag.pubads().enableSyncRendering();

googletag.enableServices();

});

</script>

Nota: Parte do código destacado em vermelho deve se auto corresponder para cada unidade de anúncio.

Agora vamos dar uma olhada no mapeamento:

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

O código em vermelho define a largura e altura do browser. Em geral, a altura não é importante porque só é considerada quando temos larguras iguais para duas linhas no código acima.

Agora estamos dizendo isso na primeira linha:

Se a largura do browser é igual ou maior que 992px, por favor mostre tamanho dos anúncios em 728×280 ou 728×90 ou 336×280 ou 300×250 ou 1×1.

E na última linha estamos dizendo:

Se largura do browser é igual ou maior que 320px, por favor mostre 320×50 ou 320×100 ou 300×250 ou 1×1 ad sizes.

Os valores 992px , 768px e 320px vão funcionar para a maioria dos sites dado que eles seguem os tamanhos convencionais para browsers em desktop, tablet e mobile.

Entretanto, se você tem um site com um tema mobile ou para tablets, você pode perguntar ao seu desenvolvedor qual o tamanho do navegador a transição do tema é ativada e então você pode adicionar tal tamanho no lugar do 768px e 320px, respectivamente.

Aqui na MonetizeMore, nosso foco é fazer com que você alcance as maiores receitas dos seus anúncios – incluindo anúncios responsivos. Para que você possa começar, se inscreva de graça no Ad Exchange; ou se seu site tem mais de 5 milhões de páginas vistas por mês, você pode entrar em contato conosco de graça para configurar seu DFP gratuitamente.

Leituras relacionadas:

Kean Graham

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.