En este Tutoriales En Linea les mostraremos la manera de modificar el código de los anuncios adaptables de Adsense, en algunos casos nos hemos visto que los anuncios adaptable se salen del espacio que hemos asignado para la publicidad en nuestro sitio, como muestra la siguiente imagen:
Si le parece que con los códigos de anuncio adaptable no obtiene los resultados que esperaba, 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

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...

• 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.

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>

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>