Blocos de anúncios

Como modificar seu código de anúncio responsivo

Se nosso código de anúncio responsivo não é suficiente para tudo o que você precisa, é possível modificar seu código para atender melhor aos requisitos do seu site responsivo. Os exemplos a seguir mostram como fazer essas modificações corretamente:

Importante:

Observação: os exemplos descritos neste artigo são modificações aceitáveis do código de anúncio do Google AdSense. Você pode modificar o código de anúncio responsivo de acordo com os formatos aprovados nas políticas do programa Google AdSense.

Exemplo de tamanho de bloco de anúncios exato por largura de tela

Este exemplo mostra como modificar o código de anúncio responsivo para definir tamanhos de blocos de anúncios específicos para três variações de largura de tela (celular, tablet e computador). Não é necessário ter experiência prévia com consultas de mídia CSS ou modificações do código de anúncio do Google AdSense para seguir este exemplo.

Veja alguns códigos de anúncio responsivo modificados que definem os tamanhos de blocos de anúncios exatos por largura de tela:

  • Para larguras de tela de até 500 px: um bloco de anúncios de 320 x 100.
  • Para larguras de tela entre 500 px e 799 px: um bloco de anúncios de 468 x 60.
  • Para larguras de tela de 800 px ou maior: um bloco de anúncios de 728 x 90.
<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Para adaptar esse código de exemplo ao seu site, faça o seguinte:

  1. Crie um bloco de anúncios gráficos na sua conta do Google AdSense e mantenha a opção Responsivo selecionada na seção "Tamanho do anúncio". Anote as seguintes informações do seu código de anúncio responsivo:
    • Seu ID do editor, por exemplo, ca-pub-1234567891234567
    • O ID do bloco de anúncios (data-ad-slot), por exemplo, 1234567890
  2. No código de exemplo:
    • Substitua todas as instâncias de example_responsive_1 por um nome exclusivo, por exemplo, Home_Page, front_page_123 etc.
      Observações:
      • Seu nome exclusivo precisa conter letras do alfabeto (de A a Z), números e sublinhados. O primeiro caractere precisa ser uma letra do alfabeto.
      • Você precisará usar um nome exclusivo sempre que adaptar esse código de exemplo.
    • Substitua ca-pub-XXXXXXX11XXX9 pelo seu ID de editor.
    • Substitua 8XXXXX1 pelo ID do seu bloco de anúncios.
  3. Defina os tamanhos de bloco de anúncios por largura de tela que você quer usar:
    • Se você estiver satisfeito com os tamanhos de bloco de anúncios existentes no código de exemplo, não precisará fazer alterações adicionais.
    • Se você quiser definir tamanhos diferentes de bloco de anúncios por largura de tela, aplique as alterações a seguir no código de exemplo:
      • Substitua 320 px e 100 px pela largura e altura do bloco de anúncios que você deseja usar para larguras de tela de até 500 px.
      • Substitua 468 px e 60 px pela largura e altura do bloco de anúncios que você deseja usar para larguras de tela entre 500 px e 799 px.
      • Substitua 728 px e 90 px pela largura e altura do bloco de anúncios que você deseja usar para larguras de tela de 800 px ou maior.
  4. Copie e cole o código de anúncio modificado no código-fonte HTML da página em que você quer exibir os anúncios.
    Observação: depois de inserir o código, recomendamos que você teste seus anúncios em dispositivos e telas diferentes para verificar se o comportamento responsivo está funcionando corretamente.

Exemplos de recursos avançados do código de anúncio responsivo

Se nosso código de anúncio responsivo não atender às suas necessidades, é possível modificar seu código para especificar um tamanho exato para o bloco de anúncios via CSS.

Observação: não use esses recursos avançados a menos que tenha certeza de como modificar seu código de anúncio.

Especificar uma largura expandida e uma altura fixa

É possível modificar o código de anúncio responsivo para especificar uma largura expansível e uma altura fixa do bloco de anúncios via CSS. O exemplo a seguir mostra como fazer essas modificações:

Exemplo de largura expansível com altura fixa
Este exemplo mostra como modificar seu código de anúncio responsivo para especificar uma altura fixa de 90 px e uma largura variável de no mínimo 400 px a no máximo 970 px:
<ins class="adsbygoogle"
   style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Especificar um tamanho exato por largura de tela

É possível modificar o código de anúncio responsivo para especificar o tamanho exato do bloco de anúncios via CSS. O exemplo a seguir mostra como fazer essas modificações:

Exemplo de tamanho exato por largura de tela
Se você sabe exatamente quais tamanhos de bloco de anúncios por dispositivo são mais adequados para seu site responsivo, use consultas de mídia CSS3 para definir o tamanho do seu bloco. O exemplo a seguir mostra como modificar seu código de anúncio para usar consultas de mídia CSS3:
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }

@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
    style="display:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
As regras @media são uma sintaxe CSS3 compatíveis com todos os navegadores modernos. Se você precisa de compatibilidade com navegadores mais antigos, como o Internet Explorer 7 ou versões anteriores, sugerimos que especifique um tamanho padrão primeiro. Isso garantirá a renderização do anúncio mesmo quando as consultas de mídia não forem suportadas. Não há suporte oficial para definir o tamanho do código de anúncio via CSS em folhas de estilo externas.

Como ocultar um bloco de anúncios

Em determinados casos, particularmente em dispositivos móveis menores, convém não exibir anúncios. Se você quiser ocultar um bloco de anúncios, defina um parâmetro com consultas de mídia CSS para que nenhuma solicitação seja feita e nenhum anúncio seja exibido. O exemplo abaixo mostra como fazer essas modificações:

Exemplo de como ocultar anúncios para tamanhos de tela específicos
Use o CSS se você quiser exibir anúncios apenas para determinados tamanhos de tela. O exemplo a seguir mostra como modificar seu código de anúncio para usar as consultas de mídia CSS3 e ocultar anúncios para tamanhos de tela específicos:
<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Nesse exemplo, nenhum anúncio será exibido se a largura da tela for menor que 400 px.

Aproveite essa flexibilidade, mas siga nossas políticas de canal do anúncio. Lembre-se de que apenas modificações limitadas ao seu código são permitidas de acordo com as políticas do programa.
Isso foi útil?
Como podemos melhorá-lo?