• Principal
  • Ganhar Dinheiro na Internet
  • Categorias
    • Sistemas de Afiliados
    • Hospedagem
    • Notícias
    • Artigos Técnicos
    • Outros
  • Banners
  • Contato

Como implementar os banner responsivo no Google Adsense

  • Principal
  • Sistemas de Afiliados Adsense
  • Como implementar os banner responsivo no Google Adsense
Ganhar Dinheiro com meu Blog
Como Ganhar dinheiro com meu Blog
11 de agosto de 2013
Categorias
  • Adsense
Tags
  • banner adsense
  • banner responsivo
Banner Responsivo - Google Adsense

Banner Responsivo - Google 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!

compartilhar
40

Artigos relacionados

Bloco de anúncio correspondente no adsense

Bloco de anúncio correspondente no adsense

22 de abril de 2015

Bloco de conteúdo correspondente no adsense


Ler mais
Criar banner adsense

Criar banner adsense

11 de agosto de 2013

Google adsense? Aprenda e dê os seus primeiros passos [Tutorial]


Ler mais

4 Comments

  1. Paula disse:
    18 de outubro de 2013 às 13:19

    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…

    Responder
    • admin disse:
      19 de dezembro de 2013 às 23:10

      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.

      Responder
  2. Davi disse:
    21 de setembro de 2014 às 1:05

    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

    Responder
    • admin disse:
      3 de dezembro de 2014 às 21:17

      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.

      Responder

Deixe uma resposta Cancelar resposta

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

lucrei_rodape

Fuja de métodos infalíveis na internet. Todo negócio exige investimentos e investimentos exigem riscos. Aqui vamos oferecer boas oportunidades para você ganhar dinheiro na internet.

Tenha seus lucros 24 horas por dia em alguns métodos. Em outros, com conhecimento, retorno rápido. Aqui falamos sobre trading esportivo, forex, sistemas de afiliados entre outras formas de lucro.

© 2021 Dicas de como ganhar dinheiro na internet - Trabalhe em casa. All Rights Reserved. Muffin group