Modificar el código de anuncio adaptable

Si le parece que nuestro código de anuncio adaptable no da los resultados que espera, puede modificarlo para que se ajuste mejor a los requisitos de su sitio web adaptable. En los ejemplos siguientes se indica cómo realizar estas modificaciones correctamente:

Importante:

• Si no tiene experiencia con las media queries de CSS y la modificación del código de anuncio, le recomendamos que primero consulte el ejemplo de tamaño exacto del bloque de anuncios según la anchura de la pantalla.
• Si ya está familiarizado con las media queries de CSS y la modificación del código de anuncio, vaya a la sección de ejemplos de características del código de anuncio adaptable.

Nota: Los ejemplos que se incluyen en este artículo son modificaciones aceptables del código de anuncio de AdSense. Por lo tanto, si modifica el código de anuncio adaptable como se describe en estos ejemplos, no infringirá las políticas del programa de AdSense.

Ejemplo de tamaño del bloque de anuncios según la anchura de la pantalla

En este ejemplo se explica cómo modificar el código adaptable para establecer los tamaños de bloque de anuncios específicos de las tres categorías de anchura de pantalla: dispositivo móvil, tablet y ordenador. Para seguir este ejemplo no necesita experiencia previa en media queries de CSS ni modificar el código de anuncio de AdSense.

A continuación se incluye el código de anuncio adaptable que define los siguientes tamaños exactos del bloque de anuncios según la anchura de la pantalla:

• En pantallas con una anchura inferior a 500 píxeles: un bloque de anuncios de 320x100.
• En pantallas con una anchura de 500 píxeles a 799 píxeles: un bloque de anuncios de 468x60.
• En pantallas con una anchura de 800 píxeles o superior: un bloque de anuncios de 728x90.

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Para adaptar este código de muestra a su propio sitio web, siga estos pasos:

1. Cree un bloque de anuncios de display en su cuenta de AdSense y asegúrese de dejar la opción Adaptable seleccionada en la sección "Tamaño del anuncio". Luego, anote la información del código de anuncio adaptable que le indicamos a continuación:
   • Su ID de editor (por ejemplo, ca-pub-1234567890123456)
   • El ID del bloque de anuncios (es decir, data-ad-slot); por ejemplo, 1234567890
2. En el código de ejemplo:
   • Sustituya todas las instancias de example_responsive_1 por un nombre único (por ejemplo, página_principal o página_información_123).
     Notas:

     • Su nombre único debe contener solo letras del alfabeto inglés (A-Z), números y guiones bajos. Además, el primer carácter debe ser una letra del alfabeto inglés.
     • Debe utilizar un nombre único diferente cada vez que adapte este código de ejemplo.
   • Sustituya ca-pub-1234567890123456 por su propio ID de editor.
   • Sustituya 8XXXXX1 por el ID del bloque de anuncios.
3. Decida el tamaño que quiere que ocupe el bloque de anuncios en cada anchura de pantalla:
   • Si le parecen bien los tamaños de los bloques de anuncios del código de ejemplo, no tendrá que cambiar nada más.
   • Si quiere definir tamaños de bloque de anuncios distintos para cada anchura de pantalla, realice estas modificaciones en el código de ejemplo:
     • Sustituya 320px y 100px por la anchura y la altura del bloque de anuncios que quiera usar con anchuras de pantalla de hasta 500 píxeles.
     • Sustituya 468px y 60px por la anchura y la altura del bloque de anuncios que quiera usar con anchuras de pantalla desde 500 píxeles hasta 799 píxeles.
     • Sustituya 728px y 90px por la anchura y la altura del bloque de anuncios que quiera usar con anchuras de pantalla de 800 píxeles o mayores.
4. Copie y pegue el código de anuncio modificado en el código fuente HTML de la página en la que quiere que aparezcan los anuncios.
   Nota: Una vez que haya insertado el código de anuncio, le recomendamos que pruebe los anuncios en distintos dispositivos y pantallas para comprobar que se adaptan correctamente a todos ellos.

Ejemplos de funciones del código de anuncio adaptable

Si considera que con nuestro código de anuncio adaptable no le proporciona los resultados que esperaba, puede modificarlo para especificar el tamaño exacto del bloque de anuncios mediante CSS.

Nota: Si no tiene claro qué cambios tiene que realizar en el código de anuncio, le recomendamos que no use estas funciones avanzadas.

Especificar una anchura expandible y una altura fija

Puede modificar el código de anuncio adaptable para especificar la anchura expandible y la altura fija de su bloque de anuncios mediante CSS. En el ejemplo siguiente le indicamos cómo realizar estas modificaciones:

Ejemplo de anchura expandible con altura fija

En este ejemplo se muestra cómo modificar el código de anuncio adaptable para determinar una altura fija de 90 píxeles y una anchura variable de 400 píxeles (mínimo) a 970 píxeles (máximo):
<ins class="adsbygoogle"
   style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Especificar un tamaño exacto por anchura de pantalla

Puede modificar el código de anuncio adaptable para especificar el tamaño exacto de su bloque de anuncios mediante CSS. En el ejemplo siguiente le indicamos cómo realizar estas modificaciones:

Ejemplo de tamaño exacto por anchura de pantalla

Si ya sabe qué tamaños deben tener los bloques de anuncios de su sitio web adaptable en cada dispositivo, puede utilizar media queries de CSS3 para definir el tamaño del bloque de anuncios adaptable. En el siguiente ejemplo, verá cómo modificar el código de anuncio para usar media queries de CSS3:
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
    style="display:block;"
    data-ad-client="ca-pub-1234567890123456"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Las reglas @media forman parte de la sintaxis de CSS3 y son compatibles con todos los navegadores actuales. Tenga en cuenta que no se garantiza la compatibilidad al definir el tamaño del bloque de anuncios mediante CSS en hojas de estilo externas.

Ocultar un bloque de anuncios

En ciertos casos, sobre todo en los dispositivos móviles más pequeños, puede que prefiera no mostrar anuncios. Si quiere ocultar un bloque de anuncios, puede establecer un parámetro con media queries de CSS de forma que no se presente ninguna solicitud de anuncios ni se muestre el anuncio. En el ejemplo siguiente le indicamos cómo realizar estas modificaciones:

Ejemplo de cómo ocultar anuncios en tamaños de pantalla concretos

Si solo quiere mostrar anuncios en algunos tamaños de pantalla, puede hacerlo mediante CSS. En el ejemplo siguiente se muestra cómo modificar el código de anuncio para utilizar media queries de CSS3 con el fin de ocultar anuncios en tamaños de pantalla concretos:
<style type="text/css">
.adslot_1 { display:block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

En este ejemplo, no se mostrarán anuncios si la anchura de pantalla es inferior a 400 píxeles.

A pesar de la flexibilidad que aportan estas opciones, recuerde que debe cumplir siempre nuestras políticas sobre la ubicación de los anuncios. Tenga en cuenta que nuestras Políticas de programa solo permiten realizar modificaciones limitadas en el código.