

Los ejemplos que se incluyen en este tutoriales en linea son modificaciones aceptables del código de anuncio de AdSense, y no infringirá las políticas del programa de AdSense si modifica el código de anuncio adaptable como se describe en estos ejemplos.

Ejemplo de tamaño exacto 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>
.ejemplo_adaptable_tl_1{ width: 320px; height: 100px; }
@media(min-width: 500px) { .ejemplo_adaptable_tl_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .ejemplo_adaptable_tl_1 { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Ejemplo de codigo de Adsense -->
<ins class="adsbygoogle ejemplo_adaptable_tl_1"
style="display:inline-block"
data-ad-client="ca-pub-123456789123456789"
data-ad-slot="123456"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Para adaptar este código de ejemplo a su propio sitio web siga los siguientes pasos:1 - Cree un bloque de anuncios adaptable en su cuenta de AdSense y anote esta información de su código de anuncio adaptable:
- Su ID de editor, por ejemplo, ca-pub-123456789123456789
- El ID del bloque de anuncios (data-ad-slot), por ejemplo, 123456.
2 - En el código de ejemplo: Sustituya todas las instancias de ejemplo_adaptable_tl_1 por un nombre único, por ejemplo., Página_principal, etc...
Notas: Su nombre único (que va hacer la categoría que le vamos asignar a nuestro código de publicidad) 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-123456789123456789 por su propio ID de editor.
- Sustituya 123456 por el ID del bloque de anuncios.
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.
Una vez insertado el código de anuncio, le recomendamos que pruebe los anuncios en distintos dispositivos y pantallas para asegurarse de que se adaptan correctamente a todos ellos.
Ejemplos de funciones del código de anuncio adaptable
Si le parece que con los código de anuncio adaptable de Adsense no obtiene los resultados que esperaba, puede modificarlo para especificar el tamaño exacto del bloque de anuncios mediante CSS.
Ejemplo de anchura expandible con altura fija
En este ejemplo se muestra cómo modificar el código de anuncio adaptable para especificar 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:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
Especificar un tamaño exacto por anchura de pantalla
Puede modificar el código de anuncio adaptable de Adsense 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:inline-block;"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></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. Si quiere ofrecer compatibilidad con navegadores antiguos, como Internet Explorer 7 o versiones anteriores, le recomendamos que antes especifique un tamaño predeterminado. De este modo, se asegurará de que el anuncio se muestre aunque las media queries no sean compatibles. Tenga en cuenta que no se garantiza la compatibilidad al definir el tamaño del código de anuncio 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:inline-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-1234"
data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></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.
Comentarios