Blocos de anúncios

Como personalizar seu bloco de conteúdo correspondente responsivo

Se você tiver requisitos específicos para os 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 e especificar como quer organizar as linhas e colunas de recomendações dentro deles, entre outros ajustes.

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). Os parâmetros também funcionam com blocos de conteúdo correspondente compatíveis com AMP.

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 garantir que eles estejam funcionando corretamente.

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

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ê tem 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?