Publicidad en versión móvil de Blogger: guía completa
En esta guía o tutorial se explicará, paso a paso y de forma detallada (con código incluido), cómo añadir publicidad en la versión móvil de un blog de Blogger. Lo aquí explicado valdrá para poner cuadros de publicidad tanto de AdSense como de cualquier otra plataforma, así como para mostrar anuncios diferentes respecto a la versión “normal” del blog. Esto habrá de hacerse con condicionales, editando el código puro y duro, aunque con añadidos bastante sencillos y fáciles de implementar, como veremos.
Se trata de una duda que estoy seguro que ha asaltado a muchas personas. ¿Cómo poner publicidad en la versión móvil de mi blog? O también, ¿cómo poner anuncios diferentes o en sitios distintos en la versión móvil?
Como sabemos, a día de hoy el panel de diseño de Blogger es único, se usa tanto para la versión “normal” como para la versión móvil de nuestra web. Así pues, cuando añadimos un gadget cualquiera a nuestro blog (artículos más leídos, archivo, cuadro de búsqueda, etc), en principio lo estamos haciendo para ambas versiones a la vez. No obstante, al mirar nuestra web desde un dispositivo móvil, veremos a menudo que dichos añadidos no se están mostrando.
Si ponemos un cuadro de HTML/Javascript, para meter dentro el código de un anuncio de AdSense, estaremos exactamente en el mismo caso. Dicho anuncio se mostrará, en principio, solo en los equipos de escritorio. No aparecerá en los dispositivos móviles. ¿Por qué ocurre esto? Fácil, porque los gadgets están configurados por defecto así (tiene su lógica, luego lo veremos).
También ocurre a menudo que aparecen anuncios efectivamente en ambas versiones, pero no obstante hay alguna publicidad que no aparece en la versión móvil. Esto sucede porque los hemos añadido mediante la pestaña Ingresos, o algún otro menú de Blogger, y no de forma manual mediante código en un gadget HTML. Es típico que hayamos configurado la aparición de dos anuncios, y veamos luego que solo está saliendo uno en la versión móvil (o incluso que no aparezca ninguno en absoluto). También explicaremos por qué sucede esto, más adelante.
En definitiva, la primera pregunta sería: ¿por qué no se muestran los anuncios de la versión normal en la versión móvil? La respuesta es casi siempre sencilla: si son gadget HTML, llevan por defecto incluida la orden de no aparecer, como hemos comentado. Dicha configuración viene indicada en su código, que se genera automáticamente al añadirlos a nuestro blog.
Afortunadamente esto es fácil de solucionar, basta con hacer un pequeño añadido en la plantilla, luego lo veremos. Peor solución tiene el problema, si los anuncios se han creado de forma automática mediante una configuración de menú (pestaña "Ingresos", etc). Luego veremos también este caso, aunque ya adelanto que cuando se añaden anuncios mediante los menús el resultado es muy rígido, y poco configurable.
Pérdida de ingresos.
Sea como sea, lo más probable es que estemos perdiendo ingresos, pues la mayoría de webs son visitadas también desde la versión móvil (que es la mostrada en los smartphones y dispositivos móviles de pantalla pequeña en general). Blogger direcciona automáticamente a dicha versión si ésta está activada y navegamos desde un móvil.
*Tip1: Para ver la versión móvil de nuestro blog desde un PC, basta con añadir ?m=1 a la URL de la página en la que estemos. A continuación, para hacernos una idea de cómo se verá en pantallas más pequeñas, podemos reducir el tamaño de la ventana del navegador, y recargar la página. Podemos incluso ver también si la plantilla es responsive –adaptable- o no, viendo si fluye el texto al hacer mayor o menor la ventana. Por ejemplo, en este blog sería: https://comunicacion-multimedia.info/?m=1
Imaginemos que hemos añadido un gran banner de 728x90, rectangular horizontal de tipo leaderboard. Como es lógico este banner quedaría fatal en la versión móvil, pues sencillamente no cabe en las pequeñas pantallas de los teléfonos o celulares. Lo descuadraría todo. Por ese motivo los blogs de Blogger no muestran por defecto ningún cuadro de publicidad en la versión móvil, a no ser que los hayamos creado automáticamente desde algún menú, como el de la pestaña "Ingresos" (que tienen un tamaño adaptado "de fábrica" al espacio en que salen).
Los añadidos manualmente uno a uno, mediante gadgets HTML, están por defecto desactivados a nivel de código para la versión móvil, precisamente para evitar este problema.
La solución.
Podríamos pensar que entonces basta con poner los anuncios mediante los menús... Pero en este caso solo se mostrarán dos -cuando se dignan aparecer ambos-, y en ubicaciones fijas. Esto está lejos de estar optimizado en cuanto a ingresos. Así pues, ¿cómo lo solucionamos? Afortunadamente es sencillo, hay que poner los anuncios uno a uno, manualmente, mediante cuadros HTML. Con el gadget HTML/Javascript, por tanto, y no de forma automática mediante los menús.
Hay que crear un cuadro HTML para cada anuncio que queramos poner, y pegar dentro el código de AdSense de dicho anuncio (a su vez tendremos que crearlos también uno a uno dentro de AdSense, al menos los que tengan un tamaño diferente). Acto seguido, tendremos que hacer un pequeño añadido en el código de nuestra plantilla de Blogger, muy sencillo por otra parte, así que tranquilos.
Por tanto, y dado que no existe un panel de diseño exclusivo para la versión móvil, lo que tendremos que hacer es añadir gadgets de HTML para incluir en ellos todos los anuncios que queramos, para ambas versiones (pueden ser los mismos anuncios o no). Después, mediante un sencillo añadido en el código de la plantilla -o de otras formas más complicadas que también explicaré-, diremos a Blogger que muestre cada uno de ellos sólo en la versión móvil, en la de escritorio, o en ambas.
Vamos a verlo todo paso a paso, aunque recuerdo antes que nada que no debemos exceder el límite de 3 anuncios por página establecido por AdSense. Son 3 anuncios en la página que se esté mostrando en ese momento, no en total (esto es una duda que le surge a muchas personas). Así que podemos crear muchos anuncios diferentes, según el tipo de página en concreto: podremos pensar unos anuncios para la versión “normal” y otros diferentes para la versión móvil (por ejemplo grandes rectángulos horizontales para los monitores mayores, y banners tipo recuadro, verticales y/o adaptables para los smartphone). Pero esto es ya una configuración avanzada, vamos a empezar por el principio.
Activar la versión móvil del blog.
Lógicamente, lo primero de todo será asegurarnos de que la versión móvil está activa. Esto se determina en el panel de control, en la pestaña “Plantilla”:
Como puede verse en estas capturas, aquí podremos también elegir algunas plantillas para dicha versión. No obstante, para poder activar o desactivar los widgets (entre ellos los que tengamos con publicidad) de la versión "normal" en la móvil, es imprescindible usar la plantilla para móviles personalizada (o custom en inglés). Con las demás plantillas no podremos personalizar la aparición o no de los widgets, son casi totalmente fijas.
*Tip2: No obstante es posible poner publicidad en las plantillas predeterminadas, aunque habrá que hacerlo desde el panel de control de Blogger en la pestaña Ingresos, y también puede hacerse desde el Panel de Diseño, editando el cuadro Entradas del Blog, hay una opción para ello también allí. No obstante no podremos colocar de esta forma la publicidad donde queramos, tendremos sólo unas opciones bastante limitadas.
Código HTML para establecer que los elementos se muestren o no en la versión móvil.
OJO A ESTA PARTE QUE ES LA MÁS IMPORTANTE.
Antes de nada, como siempre a la hora de editar el código de nuestra plantilla, guardaremos primero una copia por si hay problemas. Esto es fundamental, no dejéis nunca de hacerlo.
Una vez hecho esto, lo siguiente será explicaros el lugar del código en el que se indica si un widget de la plantilla ha de mostrarse o no en la versión móvil. Es relativamente sencillo de hacer, basta con buscar dicho widget en el código de nuestro blog. Será algo como:
<b:widget id='HTML3' locked='false' title='' type='HTML'>
Este widget se llama HTML3 (es su ID), aunque es un ejemplo. En vuestro blog puede llamarse HTML1, HTML2, etc…, dependiendo de los que hayáis ido poniendo.
Bien, muy atentos que hemos llegado a la parte importante: si añadimos dentro de esta etiqueta la orden mobile='yes' o mobile='no', le estaremos indicando que muestre o no dicho widget en la versión móvil. Si escribimos mobile='only', entonces habremos establecido que se muestro SÓLO en la versión móvil. Es decir únicamente aparecerá si la web se muestra en dichos dispositivos.
<b:widget id='HTML3' locked='false' mobile='no' title='' type='HTML'>
<b:widget id='HTML6' locked='false' mobile='yes' title='' type='HTML'>
<b:widget id='HTML6' locked='false' mobile='only' title='' type='HTML'>
Para ver la documentación de Google al respecto, dirigirse a: Etiquetas de elementos de la página para los diseños.
Afortunadamente es sencillo, ¿verdad? Esto vale para todos los gadgets que añadamos desde el panel de diseño, incluyendo los cuadros de publicidad, naturalmente. Todo lo que veamos que aparece en la versión normal y no en la versión móvil puede habilitarse de esta forma.
Por supuesto, de igual forma pueden “desactivarse” cosas en la versión móvil con este sistema. Basta con buscar el widget y añadirle mobile='no' (si no ponemos nada no aparecerán tampoco, este es el motivo por el que no aparecen por defecto, están configurados así).
Así pues, lo difícil será identificar el “nombre” o ID del widget que nos interesa. En el caso de los cuadros HTML/Javascript que hayamos añadido para poner publicidades, se llamarán HTML1, HTML2, etc… (de forma correlativa según los hayamos ido añadiendo). Una forma de averiguar los ID pasa por revisar el código fuente de la web en busca de códigos de AdSense; éstos estarán dentro de una etiqueta div del tipo <div class='widget HTML' id='HTML1'>. Ahí podremos ver el ID de ese widget, para activarlo o no.
*Tip3: Si esto parece muy difícil, sencillamente el número del ID corresponde al orden en que ha sido añadido el cuadro HTML desde el panel de diseño (el primero que pusimos será HTML1, el segundo HTML2 y así).
De esta forma, si nuestro problema consistía meramente en que los anuncios no aparecían en la versión móvil, ya lo habremos solucionado. Solo hay que añadirles mobile='yes' a sus widgets.
Por otra parte, si además de ello queremos poner anuncios distintos para dicha versión móvil, tendremos que seguir trabajando.
Problemas con los anuncios generados mediante la pestaña "Ingresos".
Recientemente he conocido un problema nuevo, que sucede en blogs que publican anuncios generados de forma automática, mediante paneles de opciones, en lugar de añadiendo uno a uno los anuncios. Ocurre básicamente con los del apartado "Ingresos", y es posible que también con los creados automáticamente al editar las "Entradas del Blog" (en el aparatado "Diseño").
Pues bien, sucede que, al elegir que se muestren por ejemplo anuncios bajo los post y arriba de la columna lateral, vemos que en la versión móvil no aparecen todos. Es común que se muestre solo uno, generalmente el situado bajo los post, pero no el de la columna. O incluso que no aparezca ninguno. Mientras tanto, en la versión de escritorio se ven ambos perfectamente.
¿A qué se debe esto? En primer lugar, a que en la versión móvil la barra lateral se muestra inmediatamente a continuación de los post, de forma que puede ser que ambos anuncios estén demasiado cerca uno del otro. Es muy común, uno no se muestra por tanto (esto es un claro ejemplo de situación en la que se requiere mostrar unos anuncios en la versión PC, y otros en la móvil).
La única solución, consiste en desactivar los anuncios generados automáticamente, y crearlos de nuevo manualmente uno a uno, mediante gadgets HTML. Esto además soluciona otro problema muy común: que no nos deje añadir nuevos anuncios en sitios como la cabecera, o sobre los post.
Si colocamos los anuncios automáticos, solo tendremos uno o dos, y no nos dejará añadir otros adicionalmente en esas ubicaciones tan buenas. Habremos de conformarnos con los que aparezcan según la opción elegida. Así pues, para poner los que queramos, y donde queramos, habremos de ponerlos nosotros mismos, uno a uno, manualmente.
Tipos de anuncio más seguros para la versión móvil.
Si nos preguntamos sobre qué tamaños de anuncio elegir, dependerá de si vamos a mostrar los mismos en ambas versiones, o diferentes y especiales para cada una. Lógicamente lo más avanzado es poner anuncios específicos para cada versión, como hemos comentado, aunque si no queremos complicarnos mucho la vida puede bastarnos con los mismos.
Eso sí, en ese caso debemos poner anuncios que sean totalmente seguros para mostrarse en las pequeñas pantallas de un dispositivo móvil. Así pues, las mejores opciones serían:
- Utilizar solo los nuevos anuncios adaptables de AdSense. Estos anuncios se adaptan al tamaño del monitor, son responsive (responsivos). O, hablando propiamente, lo que hacen es sencillamente elegir un tamaño para el banner en función del tamaño en píxeles disponible, mostrando así uno u otro (cuadrado, rectángulo, etc…). Lo malo es que no colocará nunca banners verticales, únicamente los cuadrados o rectangulares horizontales si hay más espacio.
- Colocar sólo anuncios de ancho pequeño (como máximo el cuadro de 300x250 píxeles). ¿Por qué? Pues porque las pantallas de los smartphone tienen más o menos ese ancho mínimo, los hay con pantallas que sólo disponen de 320 píxeles de ancho. Si el anuncio es mayor se saldrá de la pantalla. De esta forma podríamos solucionar el problema poniendo sólo banners verticales y cuadros de 300x250 píxeles (además de los adaptables del primer punto).
Hay buenas opciones, por tanto, aunque en la mayoría de ocasiones no conseguiremos la mejor optimización posible para la versión de escritorio de nuestra web.
Mostrar anuncios diferentes en la versión móvil respecto a la versión PC.
Poner los mismos anuncios en ambas versiones no está mal, pero aquellos que quieran una optimización completa deberán crear anuncios específicos para cada versión (e incluso para cada página concreta de su web, luego veremos también eso).
Para mostrar anuncios diferentes en la versión móvil respecto a la de escritorio, haremos lo siguiente (no es tan difícil, tranquilos). Desde el panel de diseño, añadiremos nuevos cuadros HTML en los lugares donde nos interese poner publicidad en la versión móvil. Sólo los cuadros, no pondremos todavía nada en ellos (o si se quiere se puede poner un texto tipo anuncio móvil 1, anuncio móvil 2, etc… para identificarlos mejor). Antes de incluir el código AdSense de los nuevos anuncios, tenemos que localizar el ID de los nuevos widgets que se habrán generado. Esto es fácil, pues como los números son correlativos, continuarán el último de los antiguos (ej: HTML7, HTML8 y así).
Atención ahora: No pondremos todavía los códigos de AdSense. Una vez localizado el widget que contendrá cada nuevo anuncio, indicaremos que se muestre ÚNICAMENTE en la versión móvil (mobile='only'). Por el contrario, en todos los anuncios antiguos diremos que no (mobile='no').
Con esto habremos logrado que los antiguos anuncios no aparezcan en la versión móvil, y que los nuevos lo hagan sólo en dicha versión. El trabajo está por tanto terminado. De esta forma ya podemos poner los códigos de AdSense.
Eso sí, para estar seguros recomiendo hacer primero algunas pruebas, por ejemplo poniendo dentro del widget un texto como antes indiqué (el nombre del mismo es buena opción: HTML4, HTML5, etc…). Así podremos asegurarnos fácilmente de que todo está funcionando bien. Bastará con mirar la versión normal y luego comprobar la versión móvil (navegando desde un smartphone o sencillamente añadiendo ?m=1 a la URL de la página en la que estemos). Una vez comprobado que en cada versión carga los cuadros que tiene que cargar, añadiremos los anuncios nuevos. Es importante hacer estas pruebas, pues es bastante habitual que hayamos cometido algún error en alguna comilla o carácter dentro del código, es muy típico eso, y el menor fallo hará que no funcione.
Uso de condicionales de Blogger para añadir publicidades directamente en la plantilla (fuera de widgets).
Esto es ya bastante más avanzado. Si queremos poner publi fuera de un widget, directamente dentro de un DIV en el código de la plantilla, no existe otra forma más que ésta de evitar que aparezca en todas las páginas y versiones del blog. No podremos usar lo de mobile='only', pues no estaremos dentro de un widget.
Por ejemplo podría interesarnos colocar un anuncio justo al terminar el post en la versión móvil, antes de los comentarios y demás (es un sitio bastante bueno). O en general en cualquier punto concreto que se nos ocurra. Sólo mediante condicionales podremos discriminar en qué tipo de páginas aparecerá, así como su presencia exclusiva en la versión móvil o "normal". Vamos con ello:
<b:if cond='data:blog.isMobile'>
Aquí el código del anuncio o cualquier otra cosa que queramos.
</b:if>
Como siempre en Blogger, habrá que utilizar el condicional IF. Todo lo que pongamos dentro aparecerá sólo si estamos en la versión móvil de la página. En caso contrario no será tenido en cuenta, como si no existiera.
*Tip4: Importante: al colocar publicidades de AdSense fuera de widgets, hay un problemilla que no nos dejará guardar la plantilla (dará error). Es debido al atributo
ASYNC
, incluido en el código de todos los anuncios, y que sirve para que estos carguen de forma asíncrona (sin seguir el orden del resto de elementos, por su cuenta digamos, reduciéndose así el tiempo de carga). Al usar el código que nos da AdSense dentro de un widget no habrá problemas, pero fuera no dejará guardar la plantilla. Esto se soluciona añadiendo unas comillas sin nada dentro, como cualquier otro atributo, para que Blogger no lo tome por algo extraño:<script async="" src="…>
Combinaciones de condicionales: mostrar anuncios sólo en páginas de artículos y diferente según versión móvil o normal.
Vamos a ver un ejemplo bastante extremo, que es ni más ni menos que el que tengo yo aplicado en el anuncio que se muestra bajo cada post. Sólo aparece en las páginas tipo ITEM (las de artículos, en la portada y resto de páginas tipo INDEX no aparece). Además de ello, en la versión móvil muestra un anuncio adaptable y en la versión PC un gran cuadro de 336x280 píxeles. ¿Cómo se hace? Combinando los condicionales y usando ELSE:
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.isMobile'>
Aquí código del anuncio adaptable para la versión móvil (recuerdo que hay que poner async='' de esta forma).
<b:else/>
Aquí el código del anuncio para la versión PC (recuerdo que hay que poner async='' de esta forma).
</b:if>
</b:if>
La primera línea de código indica que lo de dentro sólo se tendrá en cuenta en las páginas tipo ITEM (las de artículos). Si no no existirá. Así pues, si estamos en la página de un artículo, aplicará el segundo condicional. Dicho segundo condicional indica que en la versión móvil mostrará un código, y si no estamos en la versión móvil (<b:else/>
significa en caso contrario), pues aplicará la segunda parte. Es decir, el código del anuncio para la versión normal.
En otras entradas ya hablé extensamente sobre los condicionales, recomiendo seriamente a las personas decididas a seguir este paso que las lean también para documentarse. Es fundamental para todo usuario de Blogger entender su uso (no exagero):
- Evitar contenido duplicado en Blogger: tipos de página y uso de condicionales
- Mostrar sólo primer párrafo o texto diferente en la portada de Blogger
- Quitar sidebar en páginas de artículos de blogs de Blogger
Todas estas cosas que enumero arriba (y muchas más, la imaginación es el límite) pueden hacerse por medio de los condicionales de Blogger. Como digo recomiendo seriamente leer esos artículos y entenderlo todo bien. Lo vuelvo a resumir de todas formas: lo que pongamos dentro de etiquetas <b:if></b:if>
se aplicará si se cumple la condición que establezcamos. En caso contrario todo lo que haya dentro no será siquiera leído. No aparecerá en la página, será como si no existiera.
Uso de condicionales dentro de widgets.
Es posible también usar condicionales dentro de un widget, lo que podríamos usar para mostrarlo sólo en un tipo de páginas concreto (que aparezca sólo en páginas de artículos, etc…).
Habrá que ir directamente al código de la plantilla, ir al widget y desplegar todo su código. El condicional ha de aplicarse en el sitio exacto:
<b:widget id='HTML6' locked='false' mobile='only' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
También puede usarse esto como forma alternativa para mostrar algo o no en la versión móvil (usando <b:if cond='data:blog.isMobile'>
).
Sea como sea, el condicional tiene que estar en el sitio adecuado. En el ejemplo de arriba lo he puesto en negrita. Hay que ponerlo tras la etiqueta b:includable
. Si no está bien puesto Blogger no nos permitirá guardar la plantilla. Lógicamente habrá que cerrar después el condicional, antes de la etiqueta de cierre /b:includable
.
Uso de CSS para no mostrar elementos en la versión móvil o normal.
Existe incluso una tercera opción: también podríamos valernos del CSS para no mostrar las publicidades (con la orden display:none). Yo lo tengo también puesto en algunos de mis sitios (todo a la vez, las 3 formas), aunque en principio si se ha hecho lo anterior no será necesario.
Lo explicaré de todas formas, pues como forma rápida de ocultar un widget en un tipo de página concreto a veces viene bien. Eso sí, para las publicidades usaremos en primer lugar lo de antes, y luego esto también de forma opcional, si queremos aún más seguridad.
Al principio de la etiqueta <body> añadiremos:
<b:if cond='data:blog.isMobile'>
<style type='text/css'>
#HTML1 {display:none}
#HTML2 {display:none}
</style>
</b:if>
#HTML1 y #HTML2 se refieren aquí a nuestros anuncios antiguos. ¿Qué hemos hecho aquí? Establecer que si estamos en la versión móvil no se muestren (si hemos hecho lo de antes no iban a hacerlo de todas formas, pero por si acaso).
A continuación haremos lo inverso para los anuncios nuevos de la versión móvil:
<b:if cond='data:blog.isMobile == "false"'>
<style type='text/css'>
#HTML3 {display:none}
#HTML4 {display:none}
</style>
</b:if>
#HTML3 y #HTML4 se refieren aquí a dichos anuncios nuevos (lógicamente habrá que poner los ID reales de nuestro blog, esto son ejemplos). Lo que hemos hecho aquí es decir: “si no estamos en la versión móvil, entonces que no se muestren estos nuevos anuncios”.
Publicidad en sitios distintos según el tipo de página de Blogger usando CSS.
Si se han leído los artículos que recomendé antes, entonces ya sabremos que en Blogger hay diversos tipos de página (entradas, portada, archivos, etc…). Es otra cosa absolutamente fundamental a entender si se quiere tener un blog de Blogger en condiciones. Usando condicionales y CSS también podremos establecer que aparezcan o no anuncios (o cualquier cosa) en dichas páginas.
Por ejemplo, podríamos hacer:
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#HTML2 {display:none}
#HTML4 {display:none}
</style>
</b:if>
¿Qué hemos hecho aquí? Establecer que en las páginas de tipo ITEM (las de los artículos) no se muestren los anuncios HTML2 y HTML4. Obviamente las posibilidades son infinitas, depende del desarrollo web que quiera hacer cada uno (que un anuncio aparezca en la portada pero no en el artículo, anuncios incluso diferentes en cada tipo de página, etc…). El procedimiento es el mismo que hemos seguido para personalizar los anuncios de la versión móvil: usar condicionales y asegurarnos de activar y desactivar lo correspondiente en cada sitio.
Así pues no me extenderé más en esta ocasión, remitiendo a los interesados al artículo antes citado Evitar contenido duplicado en Blogger: tipos de página y uso de condicionales. En él se explican de forma exhaustiva los diferentes tipos de página que existen en Blogger, un conocimiento imprescindible para todo aquel que quiera tener un blog único y avanzado.
-
Tengo un blog con publicidad, ahora puse un widget de publi para la version movil, pero no me aparece, segui tus pasos pero no consegui nada ya que el dichoso wiget no lo encuentro.
como se en que widget añadi la publicidad para el movil?
La publicidad NO es de adsense. -
Hola, he entrado en tu blog y en efecto en la versión móvil del mismo no aparece ninguna publicidad.
Es un blog de Blogger, por tanto el contenido de este artículo te afecta de lleno. Vamos, es exactamente la información que necesitas.
Dices que no encuentras el widget que has añadido. En efecto lo he buscado en tu código y no aparece. Esto se debe a que en la plantilla no está activado en la versión móvil, de forma que cuando crea el código para la versión móvil directamente no tiene en cuenta dicho widget, como si no existiera.
Has de activarlo, de la forma que se indica en este artículo. En el código de la plantilla, has de añadir mobile='yes' en dicho widget.
Lee de nuevo el artículo con calma y haz lo que pone. Mira las imágenes, he puesto una captura con ejemplos de códigos. El widget que añadas se llamará HTML y un número (HTML4, HTML5, etc...), según el orden en que lo hayas añadido. El último widget será el número más alto.
Por cierto, he visto que usas un sistema de publicidad que no conocía, ADPV, ¿qué tal funciona?
Un saludo amigo, te calma y verás como lo solucionas, no es demasiado difícil. A las malas me puedes enviar por mail un copia del código de tu plantilla y te digo donde es.
-
ADPV es una muy buena alternativa a adsense, yo diria que la mejor para publico español, te paso un post que cree sobre adpv para que te informes de como va.
http://artigoo.com/adpv-alternativa-adsense
Intentare hacerlo yo, si no te paso la plantilla, muchas gracias, ya te dire, saludos -
hola, no he sido capaz de hacer que se vea la publi en version movil, si quieres te envio la plantilla a ver si lo puedes encontrar donde esta el wiget de las narices.
-
Vale, mándame la plantilla por mail o vía G+ o Twitter (tienes las formas de contactar arriba, en la pestaña "El autor"). Te lo explicaré, ya verás que no era tan difícil.
-
Hola excelente artículo, me ha sido de gran ayuda, he puesto como has indicado
mobile='yes'a los widgets de la sidebar lateral que quería que se vieran también en la versión móvil y he comprobado que se ven, excepto el widget de adsense, en la versión móvil sólo me aparece el que está entre las entradas pero no el del sidebar lateral a pesar de haberle puesto mobile='yes'. No sé qué estoy haciendo mal.Muchísimas gracias, tienes un blog excelente. Un saludo.
-
Hola Noemí, he mirado tu blog y en efecto el widget de Adsense del sidebar no se muestra en la versión móvil.
Si el código está correcto hay una posible explicación: está demasiado cerca del otro banner. Esto ocurre sólo en la versión móvil, que no tiene sidebar, todo va a continuación en una única columna. De esta forma, al terminar el contenido principal se muestre inmediatamente después lo que esté en el sidebar. Y con ello los 2 banners están juntos. Van uno a continuación del otro.
En ocasiones he comprobado que si se ponen demasiado cerca los anuncios no se muestran, así que yo probaría a poner un poco más abajo el widget con publi del sidebar. Si quieres que esté arriba en la versión PC, tendrás que crear una nueva caja, poner un nuevo anuncio, y establecer en el código que sea movil=only, tal y como explico en el artículo (para que no se muestre en la versión PC).
Por cierto, veo que trabajas con una empresa que no conocía, http://www.interneka.com, ¿qué tal con ellos?
-
Muchas gracias por responder y por tomarte la molestia de mirar mi blog. Miraré con calma la solución que propones aunque no sé si será muy lioso para mí que no tengo ni idea de programación, quizá de momento lo deje así.
Respecto a lo que comentas de interneka la empresa está bien, es una empresa seria, el único problema al menos en mi caso es que la uso para promocionar un único producto y al no tener más oferta no me da muchas ganancias.
Un saludo y de nuevo muchas gracias.
-
Saludos
Que le parece si quiero hacer que el anuncio que tengo luego de la etiqueta leer más, ese es el anuncio que aparece en el centro de la publicación, quiero se que vea en la versión móvil, que debo hacer...
Mi blog es rellenadodecartuchos.com
espero respuestas y gracias por su extendida explicación.
-
Hola José, lo primero felicidades por tu blog, es bastante bueno y sin duda te dará buenos resultados económicos. Respecto a tu pregunta, supongo que te refieres al anuncio que aparece dentro del post en la versión PC de tu blog, que en efecto no sale después en la versión móvil.
Dicho anuncio no se encuentra dentro de un widget, puesto que está dentro de "Blog1" o similar, es decir, el cuerpo principal del blog, que en sí mismo funciona como otro widget. No se pueden poner widgets dentro de widgets, con lo cual supongo que habrás colocado ese anuncio directamente en el código de tu plantilla.
Siendo así, para habilitarlo en la versión móvil es bastante complicado, pues son distintas localizacines dentro de la plantilla. Es decir, para colocar anuncios directamente en el código se han de poner en un sitio para la versión PC y en otro lugar para la versión móvil. Al menos eso me ocurre a mí en mis plantillas.
Podrías comprobar si tu plantilla móvil es "personalizada", pues sino nunca te aparecerá. Si ya es la "personalizada" o custom, entonces tendrás que meterte en el código y hacer muchas pruebas.
También deberás comprobar si dicho anuncio está dentro de un condicional que le diga que no lo muestre en la versión móvil, pues esto también podría estar ocurriendo.
Yo sin duda podrían habilitártelo, pero tendría que cobrar por ello amigo, pues es un trabajo duro de revisión de código, algunas horas dejándote las pestañas. Un saludo!!
-
Hola Santi! Tengo el problema que describes (no aparece la publicidad adsense en la versión móvil), pero no puedo solucionarlo. yo el scrip de la publicidad no lo tengo adentro de ningún widget, debo crear uno? (como se hace) La primer publicidad la tengo justo abajo de body y la otra la tengo abajo de esto: Publicidad
Mi blog es monkeymotor.net
Agradecería mucho tu ayuda. Suerte! -
Hola amigo de Monkey Motor, he mirado tu blog (bastante interesante por cierto, enhorabuena), y en efecto no carga ningún cuadro de AdSense en la versión móvil.
De igual forma no parece que tengas activada la plantilla para móviles, tu web se ve igual que en la versión PC al acceder a la versión móvil. ¿Seguro que tienes activada la plantilla para móviles?
Para que te cargue los anuncios en dicha versión has de usar la plantilla personalizada, y en cada widget (los anuncios de arriba y del lateral sí los tienes en widgets) establecer mobile="yes" de la forma que se explica en este artículo.
Recomiendo que lo leas con paciencia amigo!! O si quieres puedes contratarme para que te lo active yo todo 😉
-
Muchas gracias por tu ayuda santi, ya pude solucionarlo. Pero tengo algunas dudas sobre otras cosas, te mando un mail a santi.folch@impresoydigital.es así hablamos mejor y veo cuanto me cuesta. Muchas gracias!
-
Ok, te pido un poco de paciencia pues estoy cambiando de empresa de hosting para mi web. En breve te respondo, un saludo!!
-
Hola amigo que tal, te felicito por tu pagina esta muy completa, Solo una cosita nos quedamos cortos en la explicación de como poner la publicad en las plantillas predeterminadas. Solo dijiste que se hace por el portal de ingresos y en diseño entradas. Me gustaría que me ayudaras debido a que ya le puse el mobile='yes' a todos los gadgets y no aparece nada. Tengo la plantilla sencilla de blogger. Pero fíjate que lo raro es que en la plantilla personalizada si aparecen los anuncios pero esa no me interesa debido a que mi plantilla personalizada el sidebar del lado izquierdo donde van las entradas aparece tan pegado a la pantalla que solo se ve la mitad de las publicaciones. Tampoco se como modificar el ancho del sidebar izquierdo para que aparescan las entradas mas en el centro. Espero tus repuestas
-
Hola Ing.Roberto, te respondo compañero: tú mismo te estás dando la respuesta. En el artículo lo puse claramente: es necesario activar la plantilla personalizada o custom para que funcione el mobile='yes'. Si no activas eso, desgraciadamente no podrás hacer mucho.
Se me ocurre una posibilidad, que es la de colocar anuncios entre entradas, que no hace mucho implementó Blogger de forma nativa. Dicha opción la tienes directamente en el panel de diseño, aunque no he probado si aparecen los anuncios en las plantillas predeterminadas para móviles también (creo que sí pero no estoy seguro). Se agradecerán informes por tu parte sobre esto.
Lo malo es que si haces eso será para las dos versiones de tu blog, tanto la móvil como la normal, de forma que tendrías que quitar los anuncios que tuvieras antes, para que aparezcan sólo los de los sitios predeterminados.
Otro consejo que te puedo dar es que mires otras plantillas, pues no es normal que te aparezca el sidebar en la versión móvil, aunque sea personalizada. En mi caso por ejemplo el sidebar va debajo, justo tras el contenido principal, y no tuve que hacer nada, la plantilla móvil venía así. Así que podrías hacerte un blog de pruebas y probar otras plantillas. Un saludo amigo!! Cualquier cosa me cuentas
-
Una cosa más, en el artículo también está respondida tu duda, mira arriba el Tip 2
-
Buenos días! Gracias por la excelente información, de las más completas sobre este tema en la red.
Mi duda es que yo elegí una plantilla que no está programada para móviles por lo tanto al activar la predeterminada en el desplegable se ve exactamente igual,como si no hubiese activado la opción móvil,por ello elegí una llamada etérea, es decir, tengo dos plantillas diferentes, una para escritorio(no adaptada a movil) y otra para móvil diferente que elegí en el desplegable.
Es imposible incluir anuncios adsense en las plantillas móviles que ofrece blogger como etérea, sencilla etc?
O programar la de escritorio para que se adapte a móviles y que así se visualize bien en la opción predeterminada de móviles?
Gracias de antemano.
Este es el blog:
-
Hola Darrel, gracias por explicar tan bien tu problema, tu pregunta servirá para todos (por ejemplo para la persona que preguntó antes algo parecido).
Bien, en efecto NO se pueden incluir anuncios de adsense en las plantillas móviles (etérea, sencilla, etc...) mediante widgets HTML. Se ha de usar la plantilla personalizada o custom para eso. Una vez activada la plantilla personalizada, puedes activar o desactivar widgets en la versión móvil con el famoso mobile="yes", "only", etc...
Con las plantillas predeterminadas la única forma de poner adsense son las opciones "automáticas" (pestaña Ingresos o editando desde el panel de diseño el cuadro "Entradas del Blog". Hay una opción para habilitar anuncios de AdSense. Lo malo es que los colocará en lugares fijos (en el sidebar y bajo los artículos creo recordar), que no pueden cambiarse, sólo pondrá 2 bloques en la mayoría de plantillas, y además estarán activos también en la versión PC. Es decir, esos serán los únicos anuncios que podrás tener, en ambas versiones del blog. Además de ello, la cuenta de Adsense deberá ser la misma que la de Blogger para poder hacer esto.
No es la opción más "pro", digamos.
En cuanto a programar la de escritorio, en efecto es otra opción, bastante complicada por otra parte. Puedes hacer 2 cosas: crear (o buscar y subir) una plantilla que sea responsive, de forma que se adapte la misma a todas las pantallas, en cuyo caso deberás desactivar la versión móvil del blog, o bien tal como dices programar tu plantilla actual para aportarle una versión para móviles.
Es MUY complicado hacer eso (se han de incluir condicionales en el código para los diferentes estilos CSS... y en realidad para todo), hasta el punto de que si lo logras serás uno de los mayores expertos de desarrollo de blogs de Blogger 🙂
Te recomiendo sin duda que busques una plantilla que ya cuente con versión móvil preparada (todas las modernas). Estas plantillas ya "sólo" hay que editar su CSS, para darles el estilo que quieras. Pero al menos no hay que programar todo, ya cuentan con su apartado en el CSS para editar la versión móvil.
-
Hola, Santi! Quiero darte las gracias de todo corazón. La versión para móvil de mis dos páginas web era un desastre, no me aparecía la publicidad y era una pena, porque muchas de mis visitas son por ese cauce. En el momento en el que seguí todos tus consejos y di los pasos indicados, el resultado fue inmediato, y lo mejor, ¡rentable! A los pocos minutos ya obtuve mis primeros clics en la publicidad. Has hecho un trabajo realmente claro, interesante y práctico. Ojalá toda la información que se encuentra en internet fuese tan práctica para los que, como yo, estamos continuamente aprendiendo. Un sincero abrazo ¡y mucha suerte en el futuro!!!
🙂Xeles Fraga
-
Muchas gracias por tu comentario Xeles!! 🙂 me haces muy feliz
-
Muchas Gracias Santi por este tutorial! La verdad que echaba en falta algo así porque no he visto mucho mas por las redes...
En fin que lo acabo de hacer ( un bloque adaptable y con "only" para móviles ) y no consigo verlo ¿?
y la verdad ya me estoy deseperando de tanto probar, podrías decirme donde fallo ?
Gracias.
-
por cierto que no lo he comentado, el blog es de "PLUGINSXBMC".
Gracias!
-
Gracias!
-
Hola Laser, enhorabuena, buen blog el tuyo sí señor.
Bien, en cuanto a tu pregunta no te aparece el bloque porque no has activado la plantilla personalizada en la versión móvil.
Viene todo en este artículo-tutorial, vuelve a leerlo con calma. Si no activas la versión personalizada o custom no podrás hacer gran cosa. Ahora mismo tienes activada una plantilla de las que vienen por defecto.
Eso sí, cuando actives la plantilla personalizada con toda seguridad tendrás que trabajar en el CSS, pues lo que hace la plantilla personalizada es poner los mismos estilos de la versión PC en la versión móvil (muchas cosas pueden no cuadrar). Así pues tendrás que buscar en tu plantilla la parte correspondiente a la versión móvil o, si es muy antigua y no tiene, introducir estilos sólo para la versión móvil con condicionales.
Un saludo y suerte amigo!!
-
Eso me temía... una pena, si lo había leído pero pensaba que habría alguna otra forma con la plantilla que viene por defecto.
Gracias de todas formas y haber que hago porque no tengo mucha idea de CSS, así que lo mas probable que lo deje tal cual porque como bien dices al activar la plantilla personalizada sale todo muy "arcaico" verdad, como mal estructurado diría yo...
En fin, veremos
Ah y me alegro que te guste , lo mismo te digo compañero buena página!
Un saludote 😉
-
Lo único que se me ocurre es que actives la publicidad a través del panel de Blogger, hay opciones para eso, lo único que los banner aparecen en lugares fijos (en el sidebar y bajo los artículos creo recordar). Entonces después de eso podrías añadir -en teoría- nuevos banners en otros sitios, que ya sólo saldrían en la versión PC.
Como dije antes, ¡viene todo en el artículo! Es una guía completa 🙂
Otro saludo para ti!!
-
Eso también, otra opción a tener en cuenta,
así que apuntada queda 🙂
Gracias!!
-
Excelente post, justo estaba buscando información sobre adsense en móviles.
Tenia un bloque de adsense en la barra lateral derecha arriba de todo, lo cambie por uno dentro del post debajo del titulo, que supuestamente es mejor.
Deje uno en la barra lateral derecha mas abajo y otro que sale automatico en la parte de abajo despues del post.
Habilite el de la barra lateral para el móvil, pero no aparece, me imagino que como sale una sola columna en el móvil, el adsense de la barra lateral no aparece.
Podría colocar uno dentro del post a la mitad mas o menos cuando el articulo sea largo? para que ese me apareciera solo en el móvil
En la versión móvil me sale uno muy pequeño en la parte de arriba, que no se de donde saca ese tamaño tan pequeño, y uno grande en la parte de abajo despues del articulo mas grande, como de 300X250.
Si pudiera colocarle uno en el medio en la versión para móvil seria fantástico.
Si puedes hacerme alguna sugerencia al respecto te lo agradecería.
Gracias y muchísimo éxito.
-
Hola...revise tu blog sobre spa...esta excelente... me gustaria saber como hacer para colocar anuncios en mi blog que aparezcan como en el tuyo... me gustaria saber que plantilla movil estas utilizando (dinamica, sencilla, picture, o cual)... dicen que solo se pueden utilizar en "vista dinamica pero esa no.me gusta porque las entradas aparecen completas y quiero que salgan cortadas asi como aparecen en tu blog... te agradezco cualquier informacion que me pueda ayudar.
Gracias y saludos
-
-
Hola Carlos, gracias a ti por el comentario. A ver, según me cuentas parece que tienes activada la plantilla personalizada para móviles (eso es el primer paso imprescindible, con el resto de plantillas no se puede establecer que los widgets aparezcan o no, incluidos los de código de AdSense).
El bloque que te sale abajo será el que tienes puesto en tu plantilla normal. Te aparece en ambas versiones: PC y móvil, pues es un widget como otro cualquiera que supongo que habrás habilitado para la versión móvil tal y como se explica en este artículo.
Lo que me descoloca es que te aparezca un cuadro pequeño arriba, y parece que te lo ha puesto Blogger automáticamente debido a alguna opción de configuración que habrás establecido (probablemente en el panel de control, en el apartado "Ingresos", o en algún otro lugar).
No te preocupes por el tamaño pequeño, es el tamaño 320x50, estándar para móviles. Queda bien y no molesta al usuario, por lo que no daña nuestra imagen. Eso sí, es mejor el de 320x100, que es igual pero un poquito más grande. No hace mucho leí que AdSense va a implementar bloques pequeños para móviles (320x50) de esos que se desplazan con el scroll, permaneciendo siempre abajo de la pantalla. Tal vez tu banner sea algo de esto. Si quieres cambiarlo por otro más grande, por ejemplo un bloque de 300x250, sencillamente añade un widget HTML arriba del todo, bajo la cabecera, y luego establece que sea movile="only", para que aparezca sólo en la versión móvil. Después de eso copia ahí el código de un anuncio 300x250. Eso sí, es bastante grande, ocupa casi toda la pantalla, de forma que si eso es lo primero que aparece suele funcionar bien pero daña nuestra imagen y la experiencia de usuario, tú eliges.
Por último, sobre el bloque que comentas del lateral, también debería aparecer. La versión móvil es igual que la normal, sólo que todo aparece a continuación verticalmente. Primero aparece el cuerpo principal del blog, luego el sidebar y luego el footer, una cosa después de la otra, pero aparece todo (los bloques no tienen la propiedad "float" de CSS, de forma que sencillamente aparecen uno después del otro de arriba a abajo).
Si no te aparece ahí el cuadro de publicidad, mira a ver si ese widget está habilitado en la versión móvil (movil="yes"). Por lo que cuentas parece un bloque automático, tal vez esté ahí por alguna opción de la pestaña "Ingresos" que antes comenté. En tal caso prueba a ponerlo manualmente con un cuadro de HTML/Javascript, habilitándolo después también para móviles.
Un saludo amigo!!
-
Otra cosa, sobre lo de poner un anuncio dentro del texto tendrás que hacerlo manualmente. No es muy difícil, sencillamente cuando escribas un post, en el lugar que quieras de dicho artículo copia y pega el código HTML del anuncio. No uses para ello el editor normal de textos, usa el modo HTML. Después de copiar ahí el código podrás volver a la escritura normal.
-
Hola,tengo tres preguntas... en "vistas dinamicas" tambien se puede colocar anuncios adsense en la version movil, pero por que aparecen varios anuncios entre las entradas? Otra pregunta, por que en "vistas dinamicas" no aparecen las entradas cortadas? es decir, con "leer más"? sino que aparecen las entradas completas. Tercera pregunta, se puede colocar adsense en la version movil sencilla?
Graciasss
-
Hola... como hacer para que los anuncios se muestren asi como aparecen en este blog http://elescaparatederosa.blogspot.com y no como aparecen aqui http://pathros.blogspot.com ....... hay que modificar la plantilla o algo asi?? Favor ayudadme en esto.
-
Hola, en respuesta a tus preguntas: 1- Ni idea, no he probado nunca la publicidad en vistas dinámicas. En cualquier caso la publicidad aparecerá ahí de forma automática, en lugares predeterminados por Blogger, no podrás personalizarlo. 2-Eso no tiene que ver con este tema, según parece vas a tener que crear el corte tu mismo cuando escribas los post, en cada artículo (supongo que ahora no lo haces así, sino de alguna forma automática). 3-Sí, claro. Pero una vez más: tal y como digo en el artículo y en varias respuestas anteriores, para poder personalizar la ubicación de los anuncios, mostrar diferentes a la versión PC, etc, debes usar la versión personalizada o custom.
-
Hola Alcibiades, supongo que te refieres a la versión móvil de esos blogs que mencionas. El primero está usando la plantilla para móviles predeterminada, la Simple. En el segundo están activas las "vistas dinámicas". En ambos casos la publicidad no se puede personalizar, aparece en esos sitios automáticamente.
De esta forma, para que aparezca de la forma que te gusta solo tienes que elegir la plantilla simple para la versión móvil, y luego activar los anuncios desde el panel de control.
Lo malo es que esos mismos anuncios te aparecerán también en la versión normal, y tal vez no quieras la publicidad en esos sitios. En este artículo se explica la forma de personalizar esto, si lo deseas.
-
Hola de nuevo Alcibiades, respondo a tu segunda pregunta:
En este blog no tengo activados anuncios en la versión móvil (este tipo de temas no se suelen consultar desde un smartphone, de forma que no tendría mucho sentido...). La plantilla que tengo puesta es la simple, la predeterminada. No tengo anuncios activados en ella.
Los que ves en la versión normal del blog los he puesto manualmente, son bloques de HTML/javascript, en los que he colocado el código de AdSense yo manualmente. Si quieres elegir el sitio en el que aparezcan has de hacerlo así, copiando los códigos de AdSense manualmente.
-
Muchisimas gracias por contestar. Tengo otra consulta, ¿colocar anuncios adsense en medio de las entradas es legal y no es penalizado por google? yo lo hice manualmente entrando desde la entrada misma y le di click en html, luego pegué al anuncio, y sale perfectamente. Me pregunto si google penaliza colocar esos anuncios en varias o todas las entradas (utilizando el mismo código de anuncio). Si estoy haciendo algo ilegal favor indicádmelo. Grcias sobremanera.
-
Hola Escapa, aunque no tiene que ver con este artículo te respondo: no te preocupes, no pasa nada por poner manualmente anuncios dentro de las entradas (de hecho yo recomiendo hacerlo, creo que muchas veces es una buena opción).
Eso sí, recuerda que nunca debes superar los 3 bloques por página. Eso sí que será penalizado casi de inmediato (o sencillamente no aparecerá la publicidad, será desactivada en cuanto cargue la página y se intenten cargar más de 3 bloques).
El límite son 3 bloques de anuncios y 3 de enlaces por página.
-
Excelente post! he podido hacer que aparezcan las publicidades de adsense en la versión móvil de mi blog. Gracias por el aporte!
-
Hola Santi:
He leido con atención tu entrada "publicidad en versión movil de blogguer guia completa", pero no he encontrado lo que yo quiero, que es que me salga en movil la barra lateral con publicidad y el indice de entradas que en ella hay. en pocas palabras, me gustaria que en la version movil se viera practicamente igual que en la PC, como sale la tuya. o, al menos que se vean las recetas de la barra lateral. Me puedes echar una mano? Gracias. Ah, el blog es http://ponermeadieta.blogspot.comManuel
-
Hola Manuel, hacer eso es muy sencillo, basta con desactivar la plantilla para móviles. De esa forma se mostrará la misma página en todos los dispositivos, que es la que ves tú en tu PC (con la barra lateral y todas las publicidades).
Para no mostrar la plantilla para móviles, ve a "Plantilla" dentro de Blogger. Una vez allí clica en el botón que hay debajo del apartado "Móvil". Allí podrás desactivarla.
Un saludo!!
-
Ya, pero no es esto lo que quería. Eso ya lo he probado y perdía entradas por no tener activada la versión movil y además mi posición bajo en el indice de google, ahora que lo volví a reactivar se está recuperando poco a poco. No, no es esto lo que quer´ta pero gracias de todas formas.
Manuel -
Vaya, pues lo siento. De todas formas estás en un error cuando dices que "pierdes entradas". No perderás ninguna entrada desactivando la versión móvil, eso no tiene nada que ver. Las entradas son las que son, en ambas versiones.
El posicionamiento sí puede verse afectado, sobre todo en búsquedas hechas desde dispositivos móviles (ahí se premian las páginas que estén adaptadas). Pero no estoy seguro de que afecte a las búsquedas hechas desde un PC convencional (estoy casi seguro de que no afecta para nada).
Por último, creo que no es posible lo que quieres, pues en la versión móvil la barra lateral nunca aparecerá de esa forma (en un lateral). Siempre aparece abajo, a continuación del cuerpo principal. En la versión móvil sólo hay una columna de texto, por así decir.
Si de todas formas quieres poner el sidebar en la versión móvil al lado (como en la versión PC) podrías hacerlo con CSS, asignándole la propiedad float:right. Así es como está por defecto en la versión PC. No obstante el lector tendría que hacer scroll con su dedo para verlo, no tiene mucho sentido. Y los buscadores te penalizarían igual al entender que esa plantilla no está adaptada, seguramente.
En fin, un saludo.
-
Para el/la que me preguntó por qué no tenía puesta publicidad en la versión móvil de este blog, comentarle que era por una prueba. Ya he vuelto a activar mi versión móvil 100% personalizada, como podrá ver todo el que visite esta página desde un smartphone o tablet.
También puede verse usando este enlace.
Como he comentado en el artículo, para ver la versión móvil de cualquier página de un blog de Blogger basta con añadir ?m=1 al final de la URL en el navegador.
Así pues todos pueden comprobar lo que puede hacerse. No sólo he puesto publicidad, sino además en algunos sitios diferente respecto a la versión de escritorio, e incluso distintos anuncios (en la versión móvil son responsive).
Recuerdo que todo el que quiera puede contratar mis servicios para que personalice su plantilla. Puede contactarme y pedirme presupuesto.
-
Muchas gracias por tu artículo, me ha sido de gran utilidad
un aplauso y un abrazo, y ánimo sigue así, estás posicionado el primero en Google en este tema, porque lo mereces
-
Jajjjaja Gracias Jose 🙂 He puesto todos mis conocimientos en este artículo, desde luego está todo lo que hace falta saber.
Luego es cosa de echar horas en el código!! Muchas gracias por tu comentario amigo. Un saludo!!
-
Hola amigo! Excelente tu blog lo acabo de descubrir justamente buscando información para mostrar contenido diferente en versión movil y en versión pc.
He intentado esto de las condicionales en los artículos, pero cuando inserto la publicidad de andesnse (uno responsive -para el movil- y el otro con tamaño especifico -para la pc-) con el código que proporcionas... me salen las dos versiones. No hace una discriminación para la pc y otra para el móvil.
Hay algo que estoy haciendo mal? o hay que insertar algún código también en la plantilla principal? Incluso he intentado cambiando de plantilla... en un blog que tengo de prueba pero sigo teniendo el mismo error.
Espero tu respuesta... Muchísimas gracias de antemano.
Un saludo.
-
Hola Blog de prueba, obviamente estás haciando algo mal. Además me imagino lo que es: seguramente estás introduciendo los condicionales no directamente en la plantilla -que es como se hace-, sino en el contenido del widget.
Tienes que hacerlo en la plantilla, desplegando todo el código. Si es muy complicado para ti mejor no te metas en eso. Sencillamente, prueba con lo de mobile='no' y mobile='yes'. Mírate el artículo de nuevo para ver cómo hacerlo, es fácil, solo tienes que localizar el widget en la plantilla, y añadir mobile='only' al de la publicidad para el móvil, y mobile='no' al de la publicidad para PC.
Un saludo!!
-
hola amigo te felicito por tu blog...tengo una consulta he intentado colocar los anuncios para moviles de google adsense de viñetas o superpuestos, pero no puedo no puedo grabar la plantilla me sale error cuando lo coloco debajo del head o body tal como google lo sugiere...he entrado a tu pagina desde mi celular y si tienes activado este tipo de anuncios...por favor te pido tu apoyo
-
Hola Juan, si no te deja guardar seguramente será por un error en el código. No puedo conocer el posible fallo sin saber qué código estás usando...
¿Estás haciendo vía widget o directamente en el código? Deberías hacerlo creando un nuevo cuadro HTML, y copiando ahí dentro tu código AdSense. Es lo más fácil y menos fallos da.
-
Hola Santi:
He leido con atención las instrucciones que das en este apartado de la guia para poner distinta publicidad en PC y Movil, y despues de multiples combinaciones y pruebas me salen tanto en la version movil como en el PC los 2 anuncios que he puesto (uno de 336 x 280 para ordenador y otro adaptable para movil). Me salen primero el adaptable (alargado) y debajo el otro. Ahora lo he quitado y he dejado solo el grande. El blog por si lo quieres visitar es http://www.cosmeticscien.com .Gracias por todo y felicidades por tu blog.
Manuel
(el apartado que te comentaba)
Aquí código del anuncio adaptable para la versión móvil (recuerdo que hay que poner async='' de esta forma).
Aquí el código del anuncio para la versión PC (recuerdo que hay que poner async='' de esta forma).
-
Hola, gracias por comentar también aquí tu pregunta (así servirá a todos). Como te he comentado por mail, el condicional es para poner publicidad fuera de los widgets, es decir, en cualquier sitio que queramos pero fuera de los widgets, como por ejemplo al terminar el post pero antes de los comentarios.
Dicho caso puedes verlo en este mismo blog, donde he puesto un anuncio en el post-footer (justo bajo el post), y además uno diferente según se esté en la versión PC o la móvil. Esto se hace con los condicionales, tal y como has hecho tu, directamente en la plantilla (si el anuncio está en un widget HTML, cosa que recomiendo pues es más fácil, será mejor utilizar el método de añadir mobile="only", tal y como se explica en este artículo).
Siguiendo con tu problema, me comentas por mail que has puesto el condicional directamente dentro del post, y no te funciona (te carga ambos anuncios). Nunca había probado esa posibilidad (todas las demás sí, y muchas veces, todo lo explicado aquí está más que comprobado). Así pues parece que dentro del post no se admiten condicionales.
No me extraña, pues dichas estructuras de código son para la plantilla, y se envían al servidor para que las traduzca en código HTML convencional (que a su vez se devuelve al navegador para mostrar la página definitiva). Así pues, si miras el código de cualquier página de un blog de Blogger nunca verás un condicional IF, ELSE etc. Verás directamente la aplicación de dicho condicional en caso de que se cumpla la condición.
En definitiva, si es un condicional para que ese contenido aparezca solo en las páginas de artículos, o en las móviles, solo aparecerá ese código en dichas páginas, en el resto no aparecerá nada. ¡Pero tampoco el condicional! Eso no sale nunca, solo en la plantilla. Es un código para el servidor.
Lo que pones en el post es en cambio HTML convencional, no programación por el lado del servidor. Así pues no me extraña que no acepte los condicionales. En definitiva: no se puede hacer así.
Te recomiendo que lo uses justo tras el post (es un buen sitio), como por ejemplo tengo yo aplicado aquí mismo. Si lo haces vía widget el anuncio aparece mucho más abajo, tras los comentarios.
Ha sido una buena pregunta, gracias por comentarla. Nunca lo había probado y ahora ya sabemos que no se puede.
Por último, recordar a todos que por favor hagan las preguntas directamente en el post, no enviándome mails, que son para trabajos y temas profesionales. Para preguntas por favor hagan comentarios, de forma que sirvan a todos. Un saludo amigo.
-
Otra cosa Manuel: para hacer lo que quieres (poner un anuncio AdSense directamente dentro del post) te recomiendo que pongas el de 300px de ancho, que funcionará bien en la versión móvil también. Es un formato adecuado para móviles.
Si tu blog es responsive, también puedes poner directamente un anuncio adaptable. En dicho caso el tamaño será en función del ancho disponible. Pero supongo que tu blog tiene un ancho fijo para los post. Por tanto el recuadro de 300px te irá bien. Ningún problema en ningún dispositivo.
-
Gracias Santi por tus rápidas respuestas. Lo que apuntas en tu segundo comentario es lo que he hecho hasta ahora y, efectivamente, salia bien tanto en pc como en móvil. Pero el problema está en que Asense NO admite anuncios de 300x250 o más en la versión móvil en la parte superior de la entrada, que es donde yo lo tengo. De ahí que intentara poner uno adaptable para movil. De hecho, el aviso lo he recibido únicamente para la versión móvil. Y mi pregunta es la siguiente ¿ No habría alguna forma de traducir la condicionales a HTML?
Gracias por tu interés y felicidades nuevamente por tu blog.
Manuel
-
Hola de nuevo Manuel. Así que tienes el anuncio en la parte superior del post, entiendo. Es un sitio muy habitual. No me extraña que te hayan dicho desde AdSense que lo cambies, pues los recuadros de ese tamaño en efecto llenan la pantalla entera de un dispositivo móvil pequeño, y la normativa obliga -con buen criterio, si pensamos en los usuarios de nuestros sitios- a que esté libre de anuncios al menos la mitad de la pantalla inicial (sin scroll).
Pues nada, tienes varias opciones. La más fácil es crear un widwet HTML y ponerlo justo SOBRE el post. Dentro metes un anuncio adaptable para móviles, y haces lo que se explica aquí (te vas a la plantilla, buscas el widget nuevo y le pones mobile="only").
El anuncio te aparecerá sobre el título del post, ya sabes. No ocupará tanto espacio como el recuadro de 300x250 (seguramente será de 100px de alto o así). Más aceptable para AdSense (menos invasivo para el usuario de tu sitio).
Ahora me dirás que lo quieres bajo el título del post 🙂 Bien, eso no se puede. Es decir, se puede por supuesto, me refiero a que no podrás meter ahí un condicional para mostrar un anuncio u otro según el dispositivo.
Otra cosa que puedes hacer es poner un anuncio adaptable a secas, y nada más. Saldrá bien en la versión móvil, y en los grandes monitores de PC también (será rectangular en lugar de cuadrado, eso sí).
Puedes probar qué tal te va... En cualquier caso la recomendación de AdSense es totalmente pertinente, los sitios en los que nada más llegar todo es publicidad y nada contenido causan una pésima impresión. Mírate sino a ti mismo cuando llegas a un sitio así. Por supuesto no te gusta. Así pues a la hora de diseñar el sitio hemos de pensar también en esto, en lo cómodo que se sentirá el público en él. Lo cierto es que a la larga se consiguen mejores resultados así que llenando todo de publicidad por todas partes, u obsesionándonos con ciertas ubicaciones. Es mejor que el sítio sea cómodo, recibiremos más visitas y por tanto más ingresos (comprobado).
-
Hola Santi:
Estoy planteándome poner el código en plantilla y eliminar los anuncios puestos manualmente. En este caso que yo quiero, que es poner debajo del titulo un banner grande para PC y un adaptable para movil, ¿donde tengo que poner exactamente el código? ¿debajo de donde?Saludos y gracias.
Manuel -
Directamente en plantilla sí que podrías hacerlo, supongo... El lugar no lo sé exactamente (tendría que mirarlo con detenimiento y ya es un trabajo considerable, yo cobro por esas cosas).
Así en plan rápido te recomiendo que pongas un punto o alguna letra, para ir viendo donde aparece, y así localizar el punto exacto. Luego pones ya el condicional con su IF ELSE y los dos anuncios.
Debe encontrarse en algún div tras la fecha. Post-date, post-header o algo así. Será post-body... Lo que no sé si podrás hacer es que aparezca como una foto con texto alrededor como lo tienes ahora. Tendrás que darle estilos CSS, la propiedad float:left y algo de margin, es cosa de probar.
Si no puedes te recomiendo un banner horizontal bajo la cabecera, es un buen sitio. En la versión movil pones en su lugar uno adaptable y listo, todo ok con AdSense.
Suerte!
-
Hola Santi:
Creo que el lugar es post-footer-line-1'. Voy a probar y te comento despues.
Gracias por todo.
Manuel -
No, eso es justo debajo del post (un buen sitio también, por cierto).
Debe estar debajo del título, en post-body.
Lo que no tengo claro es que te funcione ahí un anuncio adaptable. Lo que hará será coger todo el ancho disponible en las entradas.
¿Por qué no pones un adaptable para móviles bajo la cabecera? Saldría arriba del todo. Tendrías los dos: el grande de ahora en la versión PC, y un adaptable arriba bajo la cabecera en la versión móvil.
Piensa que en la versión para móviles no vas a poder poner una anuncio dentro del post con texto alrededor, no hay espacio para eso. La idea no funciona de entrada, mejor como yo digo.
Tú mismo, un saludo!
-
Bueno Santi, todo fue bien. Hubo que hacer algunos retoques con el float y los div, pero todo ha ido perfecto. Está como yo quería, grande en pc pequeño en móvil,(con la paliza de quitar los anuncios que había manualmente).
Te estoy muy agradecido por todo.
Larga vida para la buena gente como tú.Manuel
-
Me alegro mucho amigo 🙂
-
Buenas tardes! tengo una duda y es que nosé si en la versión móvil ocurre lo mismo con la publicidad popunder, que son estas ventanas emergentes que aparecen al darle click en algún sitio del blog, si tengo este tipo de publicidad en mi blog le aparece igualmente si la persona ingresa al blog desde su móvil o hay que programar algo en el blog para que aparezca? agradecería me pudieras ayudar con esta gran duda.. saludos!
-
Hola, pues la verdad no sabría decir, pues las publicidades popunder no son de AdSense. Así pues dependerá de cómo las hayan programado en la plataforma publicitaria en cuestión.
De todas formas es fácil de comprobar, basta con mirar la versión móvil de la página, a ver si carga también el popunder.
Tal y como se dice en este artículo, en los blogs de Blogger no hace falta mirarlos con un smartphone, sencillamente añadiendo ?m=1 a la URL de la página en la que estemos nos mostrará la versión móvil, aunque la miremos desde un equipo de escritorio.
Hazlo, y si no carga el popunder, pues tendrás que preguntar a la compañía que sirva esos anuncios. Lo normal es que no lo hagan, ese formato publicitario es más bien para escritorio (en los móviles se suelen usar otros formatos publicitarios).
-
Justo lo que andaba buscando, y muy bien explicado. ¡Gracias Mil!
-
Muy bueno amigo ,muchas gracias
-
Hola, tocayo.
Muchas gracias por tu artículo. Me ha sido de gran utilidad, pues llevaba una temporada,que veía qume entraban visitas por móvil y no me generaban clicks en adsense.
Un saludo.
-
Me alegro os haya sido útil, un saludo a todos
Te puede interesar...