Monetização

Como Criar Anúncios que se Ajustam ao Tema Responsivo

Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Quem usa template responsivo no blog junto com anúncios, seja de AdSense, Boo-Box ou outros, já notou o grande problema: eles são de tamanho fixo, e portanto não respeitam a resolução do dispositivo. Você arruma tudo pro tema ajustar o conteúdo num tablet ou celular, mas quando vai ver, o bloco de anúncio grande ficou lá, enorme e detonando o layout.

Com PHP dá pra apontar um modelo de anúncio para cada limite de largura de tela, e assim obter uma “responsividade”: quando o script for carregado, é feita a verificação da tela e chama-se o anúncio que melhor se aplica naquela resolução.

AdSense

<script type="text/javascript">
google_ad_client = "ca-pub-IDPublicador";

if(window.innerWidth > 958) {
google_ad_slot = "IDSlot";
google_ad_width = largura;
google_ad_height = altura;} 
 	
if  (window.innerWidth < 959) {
google_ad_slot = "IDSlot";
google_ad_width = largura;
google_ad_height = altura;} 

if  (window.innerWidth < 767){
google_ad_slot = "IDSlot";
google_ad_width = largura;
google_ad_height = altura;} 
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

Pra quem está acostumado, é fácil notar que é um código do AdSense dentro de algumas condicionais if. No primeiro trecho, mude o IDPublicador pelo seu ID – copie de qualquer anúncio de sua conta AdSense.

Em cada bloco de if, o innerWidth confere se a janela (monitor, tela do celular, tablet, etc) é menor que a largura que você determinar. Existe uma variação enorme de resoluções, então é conveniente que você siga os padrões do seu tema. No meu exemplo, a tela se ajusta de acordo com três larguras: maiores que 958 pixels (monitores desktop), até 959 pixels (alguns monitores e telas de tablets) e até 767 pixels (celulares em visão retrato ou paisagem).

Aí é só colocar o identificador do slot do anúncio, a largura e a altura em cada if. Se a página for carregada numa tela grande, o primeiro bloco entra em ação; se for a tela de um tablet, entra o segundo, e numa tela bem menor, o último bloco age.

Exemplo prático

Digamos que tenho três blocos de AdSense, e quero carregar um banner grande 728 x 90 na tela grande, ou uma caixa 336 x 280 naquele mesmo lugar se for num tablet, ou uma caixa pequena 250 x 250 se for um celular.

Então vou a minha conta AdSense e crio os anúncios, obtendo o código de cada um. Supondo que ficaria assim:

Banner grande:

<script type="text/javascript"><!--
google_ad_client = "ca-pub-XXXXXXXXXXXXXXXX";
/* 728 x 90 */
google_ad_slot = "YYYYYYYYYY";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Caixa 336 x 280

<script type="text/javascript"><!--
google_ad_client = "ca-pub-XXXXXXXXXXXXXXXX";
/* 336 x 280 */
google_ad_slot = "ZZZZZZZZZZ";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Caixa 250 x 250

<script type="text/javascript"><!--
google_ad_client = "ca-pub-XXXXXXXXXXXXXXXX";
/* 250 x 250 */
google_ad_slot = "WWWWWWWWWW";
google_ad_width = 250;
google_ad_height = 250;
//-->

<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Então copie o trecho do ad_slot, ad_width e ad_height de cada um para o if correspondende no script passado. Usando os códigos do modelo acima, ficaria assim:

<script type="text/javascript">
google_ad_client = "ca-pub-XXXXXXXXXXXXXXXX";

if(window.innerWidth > 958) {
google_ad_slot = "YYYYYYYYYY";
google_ad_width = 728;
google_ad_height = 90;} 
 	
if  (window.innerWidth < 959) {
google_ad_slot = "ZZZZZZZZZZ";
google_ad_width = 336;
google_ad_height = 280;} 

if  (window.innerWidth < 767){
google_ad_slot = "WWWWWWWWWW";
google_ad_width = 250;
google_ad_height = 250;} 
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

Boo-Box

Os anúncios do Boo-Box também podem ser usados, é quase a mesma coisa: gere os códigos de cada modelo de anúncio, copie o trecho central de cada um e aplique em cada if.

<script type="text/javascript">
bb_bid = "XXXXXXX";
bb_lang = "pt-BR";
bb_name = "custom";

if (window.innerWidth >= 978) {
bb_limit = "4";
bb_format = "XXX";
}

if (window.innerWidth < 978) {
bb_limit = "4";
bb_format = "XXX";
} 

if (window.innerWidth < 739) {
bb_limit = "6";
bb_format = "XXX";
} 
</script>
<script type="text/javascript" src="http://static.boo-box.com/javascripts/embed.js"></script>

No trecho inicial, fora das condicionais (antes do primeiro if) está o identificador dos seus anúncios, idioma, etc, ou seja, a parte que não muda em qualquer bloco.

Dentro de cada if, insira o que altera o tipo de anúncio. É bem simples. Funciona com qualquer script de anúncio que tenha identificadores similares.

Legalidade

O AdSense – e outros sistemas similares – tem regras quanto à alteração do código de seu anúncio, principalmente por se preocupar com a manipulação do anúncio resultante. Uma opção mais comum que alguns donos de sites adotaram foi colocar o anúncio dentro de uma div que, dependendo do layout, ganha display:none via CSS. Isso é contra as regras, já que o anúncio, apesar de não aparecer, ainda será carregado e pode ser contado como pageview.

De acordo com o autor da solução que apresentei aqui, o Google aprova o método usando if, já que ele só carrega o anúncio de acordo com tal condição, ao contrário do display:none.

A resposta traduzida do Google (original em alemão) foi:

Anúncios do AdSense podem ser adaptados a diferentes layouts usando um simples snippet em JavaScript. Para melhor resultado em design responsivo, crie múltiplos formatos de anúncios, como 728 x 90, 468 x 60 e 300 x 250. Então implemente fragmentos de “if-else” para que o anúncio certo seja exibido de acordo com o dispositivo do usuário.

[…]Gostaria de enfatizar que outras modificações ao código AdSense não são permitidas. Anúncios também não devem ser escondidos com CSS.

Anúncios Google

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Deixe um Comentário

Pin