Blocos de anúncios

Como personalizar seu bloco de conteúdo correspondente responsivo

Se você tiver requisitos específicos para blocos de conteúdo correspondente responsivos, poderá personalizar a aparência deles adicionando parâmetros ao seu código de anúncio. Com esses parâmetros, você pode alterar o layout dos blocos de conteúdo correspondente e especificar como quer organizar as linhas e colunas de recomendações dentro deles.

Também é possível usar os parâmetros para definir diferentes configurações para dispositivos móveis e computadores. Por exemplo, se você fornecer ao parâmetro de layout um único valor, seu bloco de conteúdo correspondente terá o mesmo layout em dispositivos móveis e computadores. Se você fornecer dois valores ao parâmetro de layout, seu bloco de conteúdo correspondente terá um layout em dispositivos móveis (o primeiro valor) e outro em computadores (o segundo valor).

Essas opções só estão disponíveis para blocos de conteúdo correspondente responsivos, e todos os parâmetros são necessários para que as personalizações funcionem. Depois de modificar seu código de anúncio, teste os blocos de conteúdo correspondente em diferentes dispositivos e telas para conferir se eles estão funcionando corretamente.

Os exemplos descritos neste artigo são modificações aceitáveis do código de anúncio do Google AdSense. Você não viola as políticas do programa Google AdSense modificando o código de conteúdo correspondente de acordo com estas formas aprovadas.

Alterar o layout do bloco de conteúdo correspondente

O parâmetro de layout (data-matched-content-ui-type) permite que você controle a disposição do texto e das imagens nos seus blocos de conteúdo correspondente. Por exemplo, você pode optar por colocar imagem e texto lado a lado, a imagem acima do texto etc.

Veja quais são as opções de layout disponíveis:

Imagem e texto lado a lado

Nesse layout, a imagem e o texto são exibidos um ao lado do outro. Para escolhê-lo, adicione o parâmetro data-matched-content-ui-type="image_sidebyside" ao seu código de anúncio.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_sidebyside"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Image and text side by side layout

Imagem e texto lado a lado em um cartão

Nesse layout, a imagem e o texto são exibidos um ao lado do outro em um cartão. Para escolhê-lo, adicione o parâmetro data-matched-content-ui-type="image_card_sidebyside" ao seu código de anúncio.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_card_sidebyside"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Image and text side by side with card layout

Imagem acima do texto

Nesse layout, a imagem e o texto são dispostos um sobre o outro. Para escolhê-lo, adicione o parâmetro data-matched-content-ui-type="image_stacked" ao seu código de anúncio.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_stacked"
     data-matched-content-rows-num="3"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Image stacked above text layout

Imagem acima do texto em um cartão

Nesse layout, a imagem e o texto são dispostos um sobre o outro em um cartão. Para escolhê-lo, adicione o parâmetro data-matched-content-ui-type="image_card_stacked" ao seu código de anúncio.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_card_stacked"
     data-matched-content-rows-num="3"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Image stacked above text with card layout

Somente texto

Um layout somente de texto sem imagens. Para escolhê-lo, adicione o parâmetro data-matched-content-ui-type="text" ao seu código de anúncio.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="text"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

text-only layout

Texto em um cartão

Um layout somente de texto em um cartão. Para escolhê-lo, adicione o parâmetro data-matched-content-ui-type="text_card" ao seu código de anúncio.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="text_card"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Text with card layout

Especificar o número de linhas e colunas no seu bloco de conteúdo correspondente

As recomendações dentro de um bloco de conteúdo correspondente são dispostas em uma grade. É possível especificar quantas linhas e colunas você quer exibir na grade. Por exemplo, você pode definir que seu bloco de conteúdo correspondente será um quadrado de 2 x 2, uma coluna de 4 x 1 etc.

Com os parâmetros data-matched-content-rows-num e data-matched-content-columns-num, você define o número de linhas e de colunas respectivamente. É necessário definir esses dois parâmetros e o data-matched-content-ui-type juntos.

Observação:
  • Há algumas restrições sobre o número de linhas e colunas que pode ser definido. O número total de recomendações no seu bloco de conteúdo correspondente precisa ser entre 1 e 30. Se você tentar exibir menos de uma ou mais de 30 recomendações, seu bloco de conteúdo correspondente aparecerá em branco.
  • Às vezes, não é possível exibir o número exato de linhas e/ou colunas que você especificou (por exemplo, se você tiver definido um grande número de colunas, mas seu bloco de conteúdo correspondente não for grande o suficiente para acomodar todas elas). Nesse caso, ajustaremos o número de linhas e/ou colunas para que suas recomendações caibam no espaço disponível e proporcionem uma boa experiência ao usuário.

Exemplos de linha e coluna

4 x 1 (dispositivos móveis e computadores)

Este código de exemplo mostra como gerar um bloco de conteúdo correspondente com quatro linhas e uma única coluna (quatro recomendações no total).

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

4x1 grid

2 x 2 (dispositivos móveis e computadores)

Este código de exemplo mostra como gerar um bloco de conteúdo correspondente com duas linhas e duas colunas (quatro recomendações no total).

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="2"
     data-matched-content-columns-num="2"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

2x2 grid

3 x 3 (dispositivos móveis e computadores)

Este código de exemplo mostra como gerar um bloco de conteúdo correspondente com três linhas e três colunas (nove recomendações no total).

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="3"
     data-matched-content-columns-num="3"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

3x3 grid

4 x 1 (dispositivos móveis) e 2 x 2 (computadores) para sites responsivos

Este código de exemplo mostra como gerar um bloco de conteúdo correspondente com uma grade de 4 x 1 em dispositivos móveis e 2 x 2 em computadores. Convém usar essa configuração se você tiver um site responsivo.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="4,2"
     data-matched-content-columns-num="1,2"
     data-matched-content-ui-type="image_stacked,image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

4x1 grid

2x2 grid

Compartilhar feedback

Gostaríamos de saber sua opinião sobre a personalização de blocos de conteúdo correspondente. Conte-nos o que funciona para você e o que pode ser melhorado por meio deste formulário de feedback.

Solução de problemas

Depois que você personaliza seu bloco de conteúdo correspondente, é possível que ele não seja exibido exatamente como esperado. Veja alguns problemas comuns com os blocos de conteúdo correspondente e como solucioná-los:

Seu bloco de conteúdo correspondente está em branco

Existem dois motivos pelos quais isso pode acontecer:

  • O número total de recomendações no seu bloco de conteúdo correspondente é inferior a 1 ou superior a 30. Você deve alterar o número de linhas e/ou colunas no seu bloco de conteúdo correspondente para que o número total de recomendações fique dentro do limite.
  • Seu bloco de conteúdo correspondente é muito grande para o número de recomendações que você definiu. Nesse caso, tente reduzir a largura do seu bloco de conteúdo correspondente.

Seu bloco de conteúdo correspondente tem menos recomendações do que o esperado

Isso pode acontecer quando não há espaço suficiente para mostrar o número exato de recomendações que você especificou. Por exemplo, se você definiu um grande número de recomendações e seu bloco de conteúdo correspondente é muito estreito ou está sendo visualizado em uma tela pequena. Quando isso acontece, ajustamos o número de linhas e/ou colunas para aproveitar melhor o espaço disponível. Você poderia considerar a possibilidade de alterar a largura do seu bloco de conteúdo correspondente ou configurar diferentes números de linhas e colunas para dispositivos móveis e computadores.

Suas recomendações são somente de texto

Essa mensagem poderá aparecer se seu bloco de conteúdo correspondente for muito estreito para o número de recomendações que você definiu. Nesse caso, você deve tentar aumentar a largura do seu bloco de conteúdo correspondente.

Como usar o console para encontrar erros nos seus blocos de conteúdo correspondente

Você pode usar o console no navegador para verificar se modificou corretamente seu código de anúncio de conteúdo correspondente. Por exemplo, o console informará se houver um parâmetro obrigatório faltando no seu código de anúncio ou se houver algum valor inválido em um parâmetro.

Se você estiver usando o Google Chrome, siga estas etapas para testar seu código de anúncio no DevTools Console:

  1. Acesse a página com seus blocos de conteúdo correspondente.
  2. Pressione Ctrl+Shift+J (Windows / Linux) ou Cmd+Opt+J (Mac).
  3. Verifique se há mensagens de erro no painel do Console.

 

Isso foi útil?
Como podemos melhorá-lo?