Si considera que nuestro código de anuncio responsivo no satisface sus necesidades, le recomendamos que lo modifique para que se adapte mejor a los requisitos de su sitio responsivo. En los siguientes ejemplos, le mostramos cómo realizar estas modificaciones correctamente.
Importante:
- Si es la primera vez que utiliza las consultas de medios CSS y modifica su código de anuncio, le recomendamos que comience con la sección Ejemplo sobre el tamaño exacto de la unidad de anuncios en función del ancho de la pantalla.
- Si ya está familiarizado con las consultas de medios CSS y la modificación de su código de anuncio, vaya directamente a la sección Ejemplos de funciones avanzadas del código de anuncio responsivo.
Ejemplo sobre el tamaño exacto del bloque de anuncios en función del ancho de la pantalla
En este ejemplo, le mostramos cómo modificar su código responsivo si desea configurar tamaños de bloque de anuncios específicos para tres rangos de anchos de pantalla, es decir, dispositivos móviles, tablets y computadoras de escritorio. Para seguir este ejemplo, no es necesario que cuente con experiencia previa con las consultas de medios CSS o la modificación del código de anuncio de AdSense.
A continuación, le mostramos un código de anuncio responsivo modificado para configurar los siguientes tamaños exactos del bloque de anuncios en función del ancho de la pantalla:
- Para anchos de pantalla de hasta 500 px: un bloque de anuncios de 320 x 100
- Para anchos de pantalla de entre 500 px y 799 px: un bloque de anuncios de 468 x 60
- Para anchos de pantalla de 800 px y superiores: una unidad de anuncios de 728 x 90
<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>Si desea adaptar este código de muestra para su propio sitio, siga estos pasos:
- Cree una unidad de anuncios gráficos en su cuenta de AdSense. Asegúrese de dejar seleccionada la opción Responsivo en la sección "Tamaño del anuncio". Busque la siguiente información en su código de anuncio responsivo y anótela:
- Su ID de publicador; por ejemplo, ca-pub-1234567890123456
- El ID de su unidad de anuncios (
data-ad-slot), por ejemplo, 1234567890
- En el código de muestra, realice lo siguiente:
- Reemplace todas las instancias de
example_responsive_1con un nombre único, por ejemplo, Home_Page, front_page_123, etcétera.Notas:- Su nombre único solo debe contener letras del alfabeto inglés (A-Z), números y guiones bajos, y el primer carácter debe ser una letra de dicho alfabeto.
- Debe usar un nombre único diferente cada vez que adapte este código de muestra.
- Reemplace
ca-pub-1234567890123456por su propio ID de publicador. - Reemplace
8XXXXX1por su propio ID de la unidad de anuncios.
- Reemplace todas las instancias de
- Decida qué tamaños desea que adopte su unidad de anuncios en función del ancho de la pantalla:
- Si está satisfecho con los tamaños existentes de la unidad de anuncios del código de muestra, no es necesario que realice cambios adicionales.
- Si desea configurar diferentes tamaños de la unidad de anuncios según el ancho de la pantalla, realice los siguientes cambios en el código de muestra:
- Reemplace
320pxy100pxcon el ancho y la altura de la unidad de anuncios que desea utilizar para anchos de pantalla de hasta 500 px. - Reemplace
468pxy60pxcon el ancho y el alto del bloque de anuncios que desea utilizar para anchos de pantalla de entre 500 px y 799 px. - Reemplace
728pxy90pxcon el ancho y el alto del bloque de anuncios que desea utilizar para anchos de pantalla de 800 px y superiores.
- Reemplace
- Copie y pegue su código de anuncio modificado en el código fuente HTML de la página donde desea que aparezcan los anuncios.
Nota: Luego de implementar el código de anuncio, le recomendamos que pruebe sus anuncios en dispositivos y pantallas diferentes para asegurarse de que el comportamiento responsivo funcione correctamente.
Ejemplos de funciones avanzadas del código de anuncio responsivo
Si considera que nuestro código de anuncio responsivo no satisface sus necesidades, le recomendamos que modifique su código de anuncio a fin de especificar un tamaño exacto para su bloque de anuncios mediante CSS.
Cómo especificar un ancho expandible y una altura fija
Puede modificar su código de anuncio responsivo a fin de especificar un ancho expandible y una altura fija para su bloque de anuncios mediante CSS. En el siguiente ejemplo, le mostramos 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>Cómo especificar un tamaño exacto en función del ancho de la pantalla
Puede modificar su código de anuncio responsivo a fin de especificar el tamaño exacto de su bloque de anuncios mediante CSS. En el siguiente ejemplo, le mostramos 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 CSS3 y son compatibles con todos los navegadores actualizados. Tenga en cuenta que la configuración del tamaño de la unidad de anuncios mediante CSS en hojas de estilo externas no se admite oficialmente.Cómo ocultar una unidad de anuncios
En determinados casos, especialmente en los dispositivos móviles más pequeños, es posible que no desee mostrar un anuncio. Si desea ocultar un bloque de anuncios, puede configurar un parámetro mediante consultas de medios CSS de manera que no se generen solicitudes de anuncios y no se muestre ningún anuncio. En el siguiente ejemplo, le mostramos 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 mostrarán anuncios si el ancho de la pantalla es inferior a 400 px.
