Como implementar os banner responsivo no Google Adsense

Banner responsivo adsense. Possui dúvidas sobre como implementar em seu site ou blog? Veja um tutorial sobre como utilizar os novos banners do adsense.

Depois de muito tempo, o google adsense disponibiliza, ainda em versão BETA os anúncios para sites responsivos. Vamos a um passo a passo de como implementar os anúncios.

Como pode ver na imagem abaixo, existe agora uma opção de criar banner responsivo. Neste caso você não precisa setar o tamanho do banner. Simplesmente crie o banner com o nome e os critérios personalizados (se trabalhar com este campo) e crie o banner. O código pode parecer meio confuso no começo, mas pode ser alterado.

Banner Responsivo - Google Adsense

Banner Responsivo – Google Adsense

Código do Banner responsivo

O código gerado pelo adsense para os anúncios responsivos possuem um código CSS inline, e isto não é muito bem visto pelos sistemas de busca e pode não validar o código no W3C. Ele pode ser modificado. Vamos ao código do Banner.

Código do Banner responsivo

Código do Banner responsivo

Como deu para perceber o Código CSS “vem de fábrica” no código do banner responsivo. Não é necessário manter este campo. Para sites que possuam “responsividade” até aparelhos mobiles o código não funcionaria. Um smartphone Iphone por exemplo. A resolução dele possui 320 pixels de largura e o banner não apareceria corretamente neste caso.

Veja o código original do banner gerado pelo sistema do adsense:

<style>
.topo-lucrei { width: 320px; height: 50px; }
@media(min-width: 500px) { .topo-lucrei { width: 468px; height: 60px; } }
@media(min-width: 800px) { .topo-lucrei { width: 728px; height: 90px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- topo_lucrei -->
<ins class="adsbygoogle topo-lucrei"
     style="display:inline-block"
     data-ad-client="ca-pub-7694278931713084"
     data-ad-slot="9534186597"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

O nome da classe CSS (topo-lucrei) é o nome do banner criado no sistema. E como pode ver, o tamanho mínimo de “responsividade” é de 500 pixels (min-width: 500px), ou seja, se você tiver uma resolução de 320 pixels como muitos aparelhos celulares possuem ele não irá aparecer.

Para resolver isto, eu criei mais um @media com o tamanho máximo de 500 pixels. No caso qualquer resolução que chegue até 500 pixels irá mostrar o banner de um determinado tamanho.

Veja como ficou:

<style>
@media(max-width: 500px) { .topo-lucrei { width: 300px; height: 250px; } }
@media(min-width: 500px) { .topo-lucrei { width: 468px; height: 60px; } }
@media(min-width: 800px) { .topo-lucrei { width: 728px; height: 90px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- topo_lucrei -->
<ins class="adsbygoogle topo-lucrei"
     style="display:inline-block"
     data-ad-client="ca-pub-7694278931713084"
     data-ad-slot="9534186597"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

No caso da resolução ser menor que 500 pixels, eu mostro um banner do tamanho 300×250 pixels. Este tamanho tem que ser exatamente do tamanho das possibilidades que o sistema oferece. Se você criar um tamanho aleatório não irá funcionar, ou se funcionar você pode ter problemas com o adsense. Se você remover o @media do código o banner simplesmente não aparece no site.

Eu estou utilizando este código no topo do lucrei.com e está funcionando perfeitamente.

Boa sorte na implementação do banner responsivo do adsense!

4 thoughts on “Como implementar os banner responsivo no Google Adsense

  1. Paula

    Amigo eu posso usar qualquer formato suportado? Inclusive os de linhas de texto? 728×15, por exemplo)
    Consegui usar como bloco mas nas medidas padrão disponiveis no site do google não encontro as medidas como linha…

    Reply
    1. admin Post author

      Sim, em sua última atualização, o google adsense implementou a possibilidade de você gerar seus banners de tamanhos aleatórios, de forma que você enquadre o banner ao seu layout. Só existe o limite de um banner deste tipo por página.

      Reply
  2. Davi

    Colega você possui algum vídeo ou link com vídeo explicando este passo a passo? Pois sou um pouco leigo com códigos.

    Obrigado,

    Davi

    Reply
    1. admin Post author

      Infelizmente não tenho, mas qual sua dúvida. O sistema do google mudou um pouco desde que publiquei este artigo. Ficou bem mais fácil.

      Reply

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *