Si quiere personalizar el diseño de sus bloques de contenido relacionado adaptables, puede añadir parámetros al código de los anuncios de adsense. Estos parámetros le permiten modificar aspectos como el diseño de sus bloques de contenido relacionado y organizar las filas y columnas de las recomendaciones que contienen.


También puede usar parámetros si quiere definir una configuración para móviles y otra distinta para ordenadores. Por ejemplo, si asigna al parámetro de diseño un único valor, el bloque de contenido relacionado tendrá el mismo diseño en ambos tipos de dispositivos. No obstante, si elige dos valores, el primero determinará el diseño que se usará en móviles y el segundo, el que se mostrará en ordenadores. También puede usar los parámetros con los bloques de contenido relacionado AMP.

Tenga en cuenta que estas opciones solo pueden utilizarse con bloques de contenido relacionado adaptables y que debe configurar todos los parámetros para que funcionen correctamente. Una vez que haya modificado el código de anuncio, asegúrese de probar los bloques de contenido relacionado en diversos dispositivos y pantallas.

Cambiar el diseño de un bloque de Contenido Relacionado

Utilice el parámetro de diseño (data-matched-content-ui-type) para controlar la disposición del texto y de las imágenes de los bloques de Contenido Relacionado. Puede hacer que la imagen aparezca al lado del texto, sobre él, etc. Puede usar las siguientes opciones de diseño:

Imagen al lado del texto

En este diseño, la imagen aparece al lado del texto. Para usarlo, añada el parámetro data-matched-content-ui-type="image_sidebyside"al código de anuncio.

<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>

Tarjeta con la imagen al lado del texto

En este diseño, la imagen aparece al lado del texto dentro de una tarjeta. Para usarlo, añada el parámetro data-matched-content-ui-type="image_card_sidebyside"al código de anuncio.

<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>

Imagen sobre el texto

En este diseño, la imagen aparece sobre el texto. Para usarlo, añada el parámetro data-matched-content-ui-type="image_stacked"al código de anuncio.

<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>

Tarjeta con la imagen sobre el texto

En este diseño, la imagen aparece sobre el texto dentro de una tarjeta. Para usarlo, añada el parámetro data-matched-content-ui-type="image_card_stacked"al código de anuncio.

<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>

Solo texto

Un diseño que no contiene imágenes, sino solo texto. Para usarlo, añada el parámetro data-matched-content-ui-type="text"al código de anuncio.

<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>

Tarjeta de texto

Un diseño que solo contiene texto dentro de tarjetas. Para usarlo, añada el parámetro data-matched-content-ui-type="text_card" al código de anuncio.

Indicar el número de filas y columnas de un bloque de Contenido Relacionado

En los bloques de Contenido Relacionado, las recomendaciones aparecen en una tabla. Puede especificar el número de filas y columnas que quiere mostrar dentro de ella. Por ejemplo, puede configurar un bloque de Contenido Relacionado como un cuadrado de 2x2, una columna de 4x1, etc.

El parámetro data-matched-content-rows-num determina el número de filas, mientras que data-matched-content-columns-num indica el de columnas. Debe configurar ambos parámetros junto con matched-content-ui-type.

4x1 (móviles) y 2x2 (ordenadores) en sitios web adaptables

Este código de ejemplo indica cómo generar un bloque de Contenido Relacionado adaptable de 4x1 en móviles y de 2x2 en ordenadores. Se recomienda usar esta configuración en sitios web adaptables.

<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>