Tutorial ¿Cómo configurar Anuncios Responsive de Adsense en mi blog de Blogger?
¿Necesito configurar mis anuncios de Adsense para que se vean correctamente en teléfonos inteligentes y Tablets? ¿Cómo hacer que mis anuncios de Adsense se hagan totalmente Responsive “Sensibles” y se muestren en diferentes tamaños al abrir cualquier entrada en teléfonos Smartphone y en Computadoras de escritorio? Algunas de estas preguntas son fácil de responder, Google Adsense dispone de este servicio para que se muestren sus anuncios publicitarios de forma totalmente Responsive “Sensibles” para todas la paginas web y sitios móviles amigables.
¿Por qué debería utilizar bloques de anuncios Responsive “Sensibles”?
Al igual que cómo un diseño web Responsive le permite controlar de forma dinámica la presentación de su página web de acuerdo con las propiedades del tamaño de la pantalla que se está viendo en forma similar, un bloque de anuncios Sensible “Responsive” le permite controlar el tamaño del anuncio en su página. Puede elegir un anuncio de tamaño Responsive para mostrarlo correctamente en su Teléfono iPhone, Samsung, Tablet o iPad. También puede decidir cuándo mostrar anuncios y cuando ocultarlo para dispositivos de pantalla pequeña.
Bloques de anuncios adaptables
El diseño web adaptable permite controlar dinámicamente la presentación del sitio web según las propiedades de la pantalla o del dispositivo donde se visualiza. Con un bloque de anuncios adaptable se puede controlar el tamaño de los anuncios en la página, en consonancia con el modo en que se controla el diseño del resto de la página en diferentes dispositivos.
Funciones principales
Tamaño que se adapta automáticamente al espacio disponible. Para simplificar su código y ahorrarle tiempo, el código del anuncio adapta automáticamente el tamaño del bloque de anuncios al diseño de la página. El tamaño adecuado se calcula de forma dinámica en función del ancho del contenedor principal del bloque de anuncios y, a continuación, se determina cuál es la altura estándar más adecuada para el ancho calculado.
¿Cómo funciona?
Admite cambios de tamaño de anuncio al cambiar la orientación de la pantalla. Si su página adaptable cambia de diseño al cambiar la orientación del dispositivo (p. ej., cuando un tablet o un teléfono pasa de la orientación vertical a la horizontal), se cargara un nuevo anuncio con unas dimensiones adecuadas para el nuevo diseño de la página, pero esto no sucede muy a menudo.
Nota: Al cargar un anuncio nuevo según la orientación del dispositivo, se guarda en caché el anuncio original que se mostró. Si el dispositivo vuelve a la orientación anterior, se mostrará de nuevo el anuncio original en lugar de cargar otro nuevo.
La actualización de los anuncios para los cambios de orientación de dispositivo crea solicitudes de anuncio adicionales, lo que puede provocar una ligera reducción de las métricas RPM y CTR. Puede estar seguro de que no tendrá ningún impacto negativo en sus ingresos globales.
Funciones técnicas:
- Su sitio utiliza JavaScript de terceros: Si el sitio utiliza secuencias de comandos que se ejecutan antes que el código del anuncio adaptable (por ejemplo, para ocultar los anuncios en su página hasta que esta se cargue completamente), el código no podrá calcular el tamaño que requiere el bloque de anuncios adaptable. En este caso, deberá modificar el código y usar consultas de medios de CSS para definir el tamaño del bloque de anuncios.
- No se ha establecido una anchura en el contenedor principal: Si coloca el código del anuncio adaptable dentro un contenedor principal sin una anchura definida (por ejemplo, dentro de un elemento flotante), el código del anuncio no podrá calcular el tamaño necesario del bloque de anuncios adaptable. En este caso, deberá modificar el código y usar consultas de medios de CSS para definir el tamaño del contenedor principal.
Además, debe tener en cuenta lo siguiente:
- Dispositivos móviles de conectividad reducida: Es posible que, en los dispositivos móviles de conectividad reducida, el navegador recalcule su aspecto mientras el código del anuncio adaptable calcula la mejor altura estándar para el ancho del contenedor principal.
Crear un bloque de anuncios adaptable
Los bloques de anuncios adaptables permiten mostrar anuncios en una gran variedad de dispositivos (como en teléfonos, tablets, etc.), puesto que adaptan su tamaño automáticamente en función del diseño de la página. Independientemente del tipo de dispositivo que los usuarios utilicen para visitar su sitio, los bloques de anuncios adaptables permiten ofrecer una excelente experiencia publicitaria.
Nota importante: Aunque los bloques de anuncios adaptables están concebidos para las páginas con un diseño web adaptable, también funcionan con los sitios no adaptables. Si está pensando en realizar la transición al entorno multipantalla, agregar bloques de anuncios adaptables puede ahorrarle un tiempo muy valioso. Tenga en cuenta que para reemplazar los bloques de anuncios existentes por otros adaptables, primero debe quitar el código de anuncio anterior y, después, agregar el nuevo código de anuncio adaptable.
Para crear un bloque de anuncios adaptable siga las siguientes instrucciones:
1 Ir a Adsense.com
2 Un clic en “Mis Anuncios”
3 Un clic en “Nuevo bloque de anuncios”
4 Se le desprenderá una ventana como la siguiente imagen
5 Un clic en “Adaptable”
6 Llene los campos y de un nombre a su anuncio Adaptable por ejemplo “Ads Adaptable”
7 Un clic en “Guardar y obtener el código”
8 Se abrirá una nueva venta igual a la siguiente imagen
9 Copie su código asíncrono en su blog de notas de su computador, para después copiar unos dos códigos de su anuncio: Mire la siguiente imagen
Vamos a añadir un bloque de anuncios en un widget de nuestro blog de Blogger
1 Ir a Blogger
2 Un clic en “Diseño”
3 Un clic en “Añadir un gadget”
4 Busca el widget que dice “HTML/Javascript”
5 Ingrese las siguientes líneas de código en su interior
<style type="text/css">
.adslot_1 { max-width: 300px; height: auto; margin:10px 0px; }
@media (min-width:100px) { .adslot_1 { width:125px;
height:125px; } }
@media (min-width:180px) { .adslot_1 { width:180px; height:150px; } } @media (min-width:200px) { .adslot_1 { width:200px; height:200px; } } @media (min-width:250px) { .adslot_1 { width:250px; height:250px; } } @media (min-width:300px) { .adslot_1 { width:300px; height:600px; } } @media (min-width:336px) { .adslot_1 { width:336px; height:280px; } } @media (min-width:468px) { .adslot_1 { width:468px; height:60px; } } @media (min-width:728px) { .adslot_1 { width:728px; height:90px; } }
</style>
<script async
src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adslot_1" style="display:inline-block;" data-ad-client="Aquí el código" data-ad-slot="Aquí el código slot"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> |
He marcado de 2 diferentes colores en los lugares que se deberán realizar sus diferentes cambios:
Puede cambiar el tamaño de 300 si lo va a utilizar en la barra lateral. Si la barra lateral es de 400 entonces deberá cambiarlo por 400. Por ejemplo, si va a mostrar anuncios en el pie de página o en la cabecera, donde incluso se puede mostrar grandes anuncios, entonces usted puede configurar el ancho hasta 800 que es el tope máximo.
- Cambie donde dice “Aquí el código” el cual está marcado de color azul, por el código de su anuncio:
data-ad-client="ca-pub-0062151245828120"
- Y por último, cambie donde dice “Aquí el código slot” el cual está marcado de color rojo, por el código de su anuncio:
data-ad-slot="1984633543"
6 Eso es todo, un clic en “Guardar”
Fácil verdad! Ahora ya tiene sus anuncios de Adsense totalmente Responsive, y podrá ganar un dinero extra, gracias a la buena implementación de sus anuncios publicitarios al mostrarse correctamente en teléfonos inteligentes y en computadoras de escritorio.
¿Cómo seguir agregando mas bloques de anuncios Responsives?
Siga las siguientes instrucciones:
Si desea añadir otro bloque de anuncios en un nuevo widget “HTML/Javascript”, puede utilizar el mismo código que se ha compartido anteriormente realizando un cambio.
- Va a reemplazar adslot_1 con adslot_2 en todos los lugares.
- Además para insertar un tercer anuncio deberá copiar todo el código anterior y cambiar en todos los lugares que dicen adslot_1 con adslot_3.
Ejemplo:
<style type="text/css">
.adslot_3 { max-width: 300px; height: auto; margin:10px
0px; }
@media (min-width:100px) { .adslot_3 { width:125px;
height:125px; } }
@media (min-width:180px) { .adslot_3 { width:180px;
height:150px; } }
@media (min-width:200px) { .adslot_3 { width:200px;
height:200px; } }
@media (min-width:250px) { .adslot_3 { width:250px;
height:250px; } }
@media (min-width:300px) { .adslot_3 { width:300px;
height:600px; } }
@media (min-width:336px) { .adslot_3 { width:336px;
height:280px; } }
@media (min-width:468px) { .adslot_3 { width:468px;
height:60px; } }
@media (min-width:728px) { .adslot_3 { width:728px;
height:90px; } }
</style>
<script async
src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adslot_3"
style="display:inline-block;"
data-ad-client="ca-pub-0062151245828120"
data-ad-slot="1984633543"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
|
Nota: Dentro de las políticas de Adsense permiten realizar este tipo de modificación en los anuncios, siempre y cuando sean adaptables, una de sus políticas dice:
Comportamiento de los anuncios
Los editores pueden realizar modificaciones en el código de anuncio de AdSense, siempre que dichos cambios no aumenten artificialmente el rendimiento de los anuncios ni perjudiquen a los anunciantes. Consulte Modificación del código del anuncio de AdSense para obtener más información.
Visite también: Políticas del programa de AdSense
¿Necesitas ayuda?
Cualquier pregunta dude en hacérmelo saber
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
0 comments:
Publicar un comentario