Bloques de anuncios

Cómo personalizar bloques de anuncios multiplex adaptables

Siguiente: Acerca de Accelerated Mobile Pages (AMP)

Nota: Estas opciones están obsoletas. Puede seguir usándolas para personalizar sus anuncios multiplex, pero no garantizamos que funcionen en todas las circunstancias.

Si quiere personalizar el diseño de sus bloques de anuncios multiplex adaptables, puede añadir parámetros a su código de anuncio. Estos parámetros le permiten modificar aspectos como el diseño de sus bloques y ordenar las filas y columnas de los anuncios 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 un único valor al parámetro de diseño, el bloque de anuncios multiplex 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 anuncios multiplex 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 anuncios multiplex en diversos dispositivos y pantallas.

Nota: 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 los anuncios multiplex como se describe en estos ejemplos.

Mostrar todo Ocultar todo

Cambiar el diseño de un bloque de anuncios multiplex

Utilice el parámetro de diseño (data-matched-content-ui-type) para elegir la disposición del texto y de las imágenes de los bloques de anuncios multiplex. 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?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>

      <!-- pbad -->

      <ins class="adsbygoogle"

           style="display:block"

           data-ad-client="ca-pub-1234567890123456"

           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>

Ejemplo de anuncios con imágenes y texto dispuestos en paralelo.

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?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>

      <!-- pbad -->

      <ins class="adsbygoogle"

           style="display:block"

           data-ad-client="ca-pub-1234567890123456"

           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>

Example of an ad with Image and text side-by-side with card layout.

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?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>

      <!-- pbad -->

      <ins class="adsbygoogle"

           style="display:block"

           data-ad-client="ca-pub-1234567890123456"

           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>

Ejemplo de anuncios con imágenes apiladas sobre una disposición de texto.

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?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>

      <!-- pbad -->

      <ins class="adsbygoogle"

           style="display:block"

           data-ad-client="ca-pub-1234567890123456"

           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>

Ejemplo de anuncios con imágenes apiladas sobre un texto con una disposición de tarjeta.

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?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>

      <!-- pbad -->

      <ins class="adsbygoogle"

           style="display:block"

           data-ad-client="ca-pub-1234567890123456"

           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>

Ejemplo de disposición de anuncios de solo texto.

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.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>

      <!-- pbad -->

      <ins class="adsbygoogle"

           style="display:block"

           data-ad-client="ca-pub-1234567890123456"

           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>

Ejemplo de texto con la disposición de anuncio de tarjeta.

Indicar el número de filas y columnas de un bloque de anuncios multiplex

Los anuncios que contiene un bloque de anuncios multiplex se agrupan en una cuadrícula. Puede especificar el número de filas y columnas que quiere mostrar dentro de ella. Por ejemplo, puede configurar un bloque de anuncios multiplex 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.

Nota:

Hay algunas restricciones que puede definir en relación con el número de filas y columnas. El número total de anuncios de su bloque de anuncios multiplex debe estar entre 1 y 30. Si intenta mostrar un número distinto, el bloque de anuncios multiplex aparecerá vacío.
A veces, puede que no aparezca la cantidad exacta de filas o columnas que ha indicado. Por ejemplo, si ha definido muchas columnas, pero la anchura del bloque de anuncios multiplex no es suficiente, ajustaremos el número de filas o de 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 anuncios multiplex de cuatro filas y una sola columna que muestra un total de cuatro anuncios.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>

        <!-- pbad -->

        <ins class="adsbygoogle"

             style="display:block"

             data-ad-client="ca-pub-1234567890123456"

             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>

Ejemplo de anuncios de imagen y texto colocados uno encima del otro en AdSense.

2x2 (móviles y ordenadores)

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

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>

        <!-- pbad -->

        <ins class="adsbygoogle"

             style="display:block"

             data-ad-client="ca-pub-1234567890123456"

             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>

Bloque de anuncios multiplex de AdSense que muestra un total de cuatro anuncios distribuidos en dos filas y dos columnas.

3x3 (móviles y ordenadores)

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

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>

        <!-- pbad -->

        <ins class="adsbygoogle"

             style="display:block"

             data-ad-client="ca-pub-1234567890123456"

             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>

Bloque de anuncios multiplex de AdSense que muestra un total de nueve anuncios distribuidos en tres filas y tres columnas.

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

Este código de ejemplo indica cómo generar un bloque de anuncios multiplex 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?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>

        <!-- pbad -->

        <ins class="adsbygoogle"

             style="display:block"

             data-ad-client="ca-pub-1234567890123456"

             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>

Ejemplo de anuncios de imagen y texto colocados uno encima del otro en AdSense.

Bloque de anuncios multiplex de AdSense que muestra un total de cuatro anuncios distribuidos en dos filas y dos columnas.

Solución de problemas

Puede que, después de personalizar el bloque de anuncios multiplex, el bloque no se muestre exactamente como esperaba. A continuación, se describen algunos problemas habituales y se indica cómo solucionarlos:

El bloque de anuncios multiplex está vacío

Puede suceder por dos motivos:

El número total de anuncios de su bloque de anuncios multiplex es inferior a 1 o superior a 30. Debe cambiar el número de filas o de columnas del bloque para que el número total de anuncios esté dentro de los límites estipulados.
El bloque de anuncios multiplex es demasiado ancho para el número de anuncios que ha definido. En ese caso, pruebe a estrecharlo.

El bloque de anuncios multiplex tiene menos anuncios de lo esperado

Puede suceder en los casos en los que no haya suficiente espacio para mostrar el número exacto de anuncios que ha definido. Por ejemplo, si ha seleccionado muchos anuncios y el bloque 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. Puede cambiar la anchura del bloque o bien definir un número de filas y columnas específico para móviles y otro para ordenadores.

Los anuncios solo contienen texto

Puede ocurrir si el bloque de anuncios multiplex es demasiado estrecho para el número de anuncios definido. En ese caso, pruebe a aumentarlo.

Usar la consola para detectar errores en los bloques de anuncios multiplex

Puede usar la consola de su navegador para comprobar si ha modificado correctamente el código de anuncio de un bloque de anuncios multiplex. 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:

Visite la página que incluye los bloques de anuncios multiplex.
Pulse Ctrl + Mayús + J (en Windows y Linux) o Cmd + Opt + J (en Mac).
Compruebe si hay mensajes de error en el panel Console.

¿Te ha resultado útil esta información?

¿Cómo podemos mejorar esta página?