Bloques de anuncios

Personalizar un bloque de Contenido Relacionado adaptable

Si quiere personalizar el diseño de sus bloques de Contenido Relacionado adaptables, puede añadir parámetros al código de los anuncios. Además, puede organizar las filas y las 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.

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

Los ejemplos que se incluyen en este artículo son modificaciones aceptables del código de anuncio de AdSense No infringirá las políticas del programa si modifica el código de Contenido Relacionado como se describe en estos ejemplos.

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 las imágenes de los bloques de Contenido Relacionado. Por ejemplo, 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 elegirlo, 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>

Image and text side by side layout

Tarjeta con la imagen al lado del texto

En este diseño, la imagen aparece al lado del texto dentro de una tarjeta. Para elegirlo, 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>

Image and text side by side with card layout

Imagen sobre el texto

En este diseño, la imagen aparece sobre el texto. Para elegirlo, 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>

Image stacked above text layout

Tarjeta con la imagen sobre el texto

En este diseño, la imagen aparece sobre el texto dentro de una tarjeta. Para elegirlo, 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>

Image stacked above text with card layout

Solo texto

Un diseño que no contiene imágenes, sino solo texto. Para elegirlo, 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>

text-only layout

Tarjeta de texto

Un diseño con una tarjeta que solo contiene texto. Para elegirlo, añada el parámetro data-matched-content-ui-type="text_card" 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_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

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 con matched-content-ui-type.

Nota:
  • Hay algunas restricciones en relación con el número de filas y columnas que puede definir. Un bloque de Contenido Relacionado debe contener entre 1 y 30 recomendaciones en total. Si intenta mostrar un número distinto, el bloque se mostrará vacío.
  • Es posible que a veces no aparezca la cantidad exacta de filas o columnas que ha indicado. Por ejemplo, si ha definido muchas columnas y el bloque de contenido relacionado no es suficientemente ancho, ajustaremos el número de filas y columnas en función del espacio disponible para ofrecer una buena experiencia de usuario.

Ejemplos de filas y columnas

4x1 (móviles y ordenadores)

Este código de ejemplo indica cómo generar un bloque de Contenido Relacionado de cuatro filas y una sola columna que muestra un total de cuatro recomendaciones.

<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

2x2 (móviles y ordenadores)

Este código de ejemplo indica cómo generar un bloque de Contenido Relacionado de dos filas y dos columnas que muestra un total de cuatro recomendaciones.

<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

3x3 (móviles y ordenadores)

Este código de ejemplo indica cómo generar un bloque de Contenido Relacionado de tres filas y tres columnas que muestra un total de nueve recomendaciones.

<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

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

Este código de ejemplo indica cómo generar un bloque de Contenido Relacionado de 4x1 para mostrarlo en móviles y de 2x2 para publicarlo 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>

4x1 grid

2x2 grid

Compartir sus comentarios

Nos encantaría conocer su opinión sobre la personalización de bloques de Contenido Relacionado. Para contarnos lo que le parece bien y lo que cree que podría mejorarse, use este formulario de comentarios.

Solución de problemas

Una vez que haya personalizado un bloque de Contenido Relacionado, es posible que no se muestre exactamente como esperaba. A continuación, se describen algunos problemas comunes y se indica cómo solucionarlos:

El bloque de Contenido Relacionado está vacío

Puede suceder por dos motivos:

  • El número total de recomendaciones del bloque de Contenido Relacionado es inferior a 1 o superior a 30. Debería cambiarlo para que esté dentro de los límites estipulados.
  • El bloque de Contenido Relacionado es demasiado ancho para el número de recomendaciones que ha definido. En este caso, debería estrecharlo.

El bloque de Contenido Relacionado tiene menos recomendaciones de lo esperado

Puede suceder si no hay suficiente espacio para mostrar el número exacto de recomendaciones que ha definido. Por ejemplo, cuando elige un gran número de recomendaciones y el bloque de Contenido Relacionado es demasiado estrecho o se está viendo en una pantalla pequeña. Si esto ocurre, ajustamos el número de filas y columnas para aprovechar mejor el espacio disponible. En tal caso, puede cambiar la anchura del bloque de Contenido Relacionado en cuestión o configurar un número de filas y columnas para mostrarlo en móviles, y otro distinto para publicarlo en ordenadores.

Las recomendaciones solo incluyen texto

Puede ocurrir si el bloque de Contenido Relacionado es demasiado estrecho en comparación con el número de recomendaciones que ha definido. En este caso, pruebe a ensancharlo.

Usar la consola para detectar errores en los bloques de Contenido Relacionado

Puede usar la consola de su navegador para comprobar si ha modificado correctamente el código de anuncio de un bloque de Contenido Relacionado. Por ejemplo, puede detectar si falta un parámetro obligatorio en el código de anuncio o si alguno contiene un valor que no sea válido.

Si usa Chrome, siga estos pasos para probar el código de anuncio en Console de DevTools:

  1. Visite la página que incluye los bloques de Contenido Relacionado.
  2. Pulse Ctrl + Mayús + J (en Windows/Linux) o Cmd + Opt + J (en Mac).
  3. Compruebe si hay mensajes de error en el panel Console.

 

¿Te ha resultado útil esta información?
¿Cómo podemos mejorar esta página?