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 de este artículo se explica cómo hacer estas modificaciones correctamente.
Antes de empezar:
- 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 funciones avanzadas del código de anuncio adaptable.
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:
- 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". Tome nota de la siguiente información del código de anuncio adaptable:
- Su ID de editor (por ejemplo, ca-pub-1234567890123456)
- El ID del bloque de anuncios (es decir,
data-ad-slot
); por ejemplo, 1234567890
- 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.
- Sustituya todas las instancias de
- 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
y100px
por la anchura y la altura del bloque de anuncios que quiera usar con anchuras de pantalla de hasta 500 píxeles. - Sustituya
468px
y60px
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
y90px
por la anchura y la altura del bloque de anuncios que quiera usar con anchuras de pantalla de 800 píxeles o mayores.
- Sustituya
- 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 avanzadas 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.
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:
<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:
<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>
@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:
<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 muestran anuncios si la anchura de la pantalla es inferior a 400 píxeles.