Blocos de anúncios

Como modificar seu código de anúncio responsivo

Próximo: Diretrizes para blocos de anúncios de display de tamanho fixo

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 neste artigo mostram como fazer essas modificações corretamente.

Antes de começar:

Se você ainda não tem experiência em consultas de mídia CSS e modificações de código de anúncio, recomendamos começar com o exemplo de tamanho de bloco de anúncios exato por largura de tela.
Caso contrário, vá direto para a seção de exemplos de recursos avançados do código de anúncio responsivo.

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 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="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=i-gno/re-d1234567890123456" crossorigin="anonymous"></script>

  <!-- example_responsive_1 -->

  <ins class="adsbygoogle example_responsive_1"

       style="display:block"

       data-ad-client="i-gno/re-d1234567890123456"

       data-ad-slot="8XXXXX1"></ins>

  <script>

  (adsbygoogle = window.adsbygoogle || []).push({});

  </script>

Para adaptar esse código de exemplo ao seu site:

Crie um bloco de anúncios de display 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 código de anúncio responsivo:
- Seu ID do publisher, por exemplo, i-gno/re-d1234567890123456
- O ID do bloco de anúncios (data-ad-slot), por exemplo, 1234567890.
No exemplo de código:
- 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 i-gno/re-d1234567890123456 pelo seu ID do publisher.
- Substitua 8XXXXX1 pelo ID do seu bloco de anúncios.
Defina os tamanhos de bloco de anúncios por largura de tela que você quer usar:
- Se os tamanhos de bloco de anúncios presentes no exemplo de código forem adequados para você, então não precisará fazer mudanças.
- Se você quiser definir tamanhos diferentes, aplique as alterações a seguir no exemplo:
  - Substitua 320 px e 100 px pela largura e altura do bloco de anúncios que você quer 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.
Copie e cole o código de anúncio modificado no código-fonte HTML da página em que você quer veicular os anúncios.
Dica: 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 atende à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 o código de anúncio responsivo para especificar uma altura fixa de 90 px e uma largura variável mínima de 400 px e máxima de 970 px:

<ins class="adsbygoogle"

       style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"

       data-ad-client="i-gno/re-d1234567890123456"

       data-ad-slot="5678"></ins>

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=i-gno/re-d1234567890123456" crossorigin="anonymous"></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:block;"

        data-ad-client="i-gno/re-d1234567890123456"

        data-ad-slot="5678"></ins>

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=i-gno/re-d1234567890123456" crossorigin="anonymous"></script>

    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

As regras @media são uma sintaxe CSS3 compatíveis com todos os navegadores modernos. 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ê deseja ocultar um bloco de anúncios, defina um parâmetro com consultas de mídia CSS para que nenhuma solicitação de anúncio 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 consultas de mídia CSS3 e ocultar anúncios para tamanhos de tela específicos:

<style type="text/css">

    .adslot_1 { display: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="i-gno/re-d1234567890123456"

       data-ad-slot="5678"></ins>

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=i-gno/re-d1234567890123456" crossorigin="anonymous"></script>

    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Neste exemplo, nenhum anúncio vai aparecer se a largura da tela for menor que 400 px.

Observação: ao modificar o código de anúncio responsivo copiado, você precisa excluir estas duas linhas:

data-ad-format="auto"

    data-full-width-responsive="true"

Observação: aproveite essa flexibilidade, mas siga nossas políticas de posicionamento do anúncio. Vale lembrar que as políticas do programa só permitem algumas modificações no seu código.

Isso foi útil?

Como podemos melhorá-lo?