Como Criar Anúncios que se Ajustam ao Tema Responsivo

0
2429

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.

- Publicidade -

Receba atualizações do Tutoriart

É grátis, e você pode escolher entre receber só sugestões sobre arte, design gráfico, Photoshop, etc, ou só sobre WordPress, blogging, design web, snippets, etc. Ou tudo, se preferir!

Quero assinar...
Ao assinar, você concorda com os Termos de Privacidade.

DEIXE UMA RESPOSTA

Por favor, digite seu comentário!
Por favor, digite seu nome aqui