IF YOU ARE RUNNING AN AD BLOCKER RIGHT NOW YOU WILL HAVE A VERY BAD TIME TRYING TO SET THIS UP! TURN IT OFF BEFORE PROCEEDING DOWN THIS PATH! You’ve been warned.
Google AdSense offers the option to show ads with a size of Google’s choice using the responsive ad size option.
Note that responsive ads are an all-or-nothing option. You can’t limit the height and width of them. They will cause jumpy behaviour when scrolling within a topic.
It is recommended to use fixed size ads instead.
Defining your AdSense ad units
Simply define your ad unit(s) in AdSense using the responsive option:
It can take a few hours before AdSense has any inventory to show in the ad unit, so it’s useful to define some fallback creative in the “If no ads available” field to verify that the ad unit is working and to see which ad sizes AdSense is choosing.
Once you create the ad unit, it will show up in your ad units list with a numbered ID. You’ll need the ID to enter in Discourse.
Discourse Settings
On your Discourse instance, go to Admin > Settings > AdSense. Enter your publisher ID as usual (the number after pub-), enter the ad unit ID in the location(s) where you want it to appear, and choose “responsive” as the size.
A simple like is not enough - this is a massive improvement. Only thing missing is that desktop view ads are not resized if the window is. I have no idea how feasible this is and it is quite an outlier use case. Mobile view scales nicely when the device is rotated 90-degrees.
So great work!
P.S. Server cost whiners - if you have traffic, this can roughly compensate the costs.
Ads that are already rendered won’t be re-sized since we would need to ask the AdSense javascript library to re-fetch the ad (and I don’t remember there being any way to do that). The next time an ad unit is rendered, it should pick up the new view size anyway.
@neil I would need a little hand holding with this.
On mobiles (with full HD screens or better) the responsive setting has started to increasingly show large square banners in the top banner positions. This drops the majority of the content below the fold.
I tried mocking around based on your CSS example but could not nail it. I would like to halve the top banner height, making it a large mobile banner (320x100). How could I achieve that?
Thanks, I’ll give that a try tomorrow or later this week.
Been using the responsive ads for a full year, since my earlier praise in this thread. For some reason the large square ad format has increased popularity as time went by. Originally I got the large mobile banners, but now more squares.
Now I just realized that the code you pasted above was identical to the earlier. The reason I had issues implementing was that for some reason it does not work correctly in the Chrome Inspector / Mobile mode (the ad remains square and topics flood over it), but now when I implemented it again and verified on real devices, the results look as expected.
I’ll ask my community to verify this to get some device diversity.
Update: Well, our community is the best and had already spotted layout breakage. This happens on some Android devices at least.
I can see square ads in Chrome on Android too, and sometimes banner ads. I don’t see it underneath the topic list content though… Which devices are people seeing layout problems?
Also, I don’t see the CSS to control height, which would prevent the square ads.
@neil Una vez más, gracias por este complemento. Este único componente es una característica decisiva para nuestra comunidad, que funciona sin ningún otro tipo de financiación.
He estado ejecutando banners de AdSense con la opción Responsive desde que se introdujo esta función en el complemento. Sin embargo, recientemente los anuncios responsive han comenzado a comportarse de manera errónea: parece que estoy recibiendo unidades publicitarias más grandes que rompen la experiencia de usuario prevista (demasiado contenido publicitario por encima del pliegue). También obtengo anuncios demasiado grandes para mi iPhone SE; generan un gran espacio en blanco en la pantalla a menos que gire el dispositivo a modo horizontal.
Revisé la configuración y noté que el tamaño del anuncio ahora es una opción de selección múltiple. Intenté buscar aquí, pero no pude encontrar información sobre cómo funciona realmente esta función de selección múltiple: ¿qué tamaños de anuncios se muestran y cuándo si elijo más de uno?
Si eliges varios tamaños, las unidades publicitarias se alternarán entre ellos de manera uniforme. Por ejemplo, podrías alternar entre anuncios tipo banner y anuncios cuadrados en el mismo espacio publicitario.
En cuanto a los problemas de altura del anuncio que estás experimentando, puedes intentar agregar reglas de altura a los espacios publicitarios, como se muestra en el primer mensaje de este tema:
Por cierto, nunca logré que funcionara el control del tamaño de los elementos responsivos. Acabo de notar que Google realizó algunas actualizaciones en las unidades responsivas en septiembre.
Incluir un máximo de altura/ancho sería una adición genial para el plugin y haría redundantes las opciones de tamaño fijo. ¿Quizás algo a considerar para la hoja de ruta de desarrollo?
No sé qué estás proponiendo, pero encontré este artículo que parece indicar que los anuncios responsivos ahora pueden ignorar sus contenedores.
…los bloques de anuncios responsivos ahora pueden redimensionar el contenedor padre HTML (por ejemplo, <div>) en el que se encuentran. Esto les permite adaptarse automáticamente a todos los tamaños de anuncio diferentes en las páginas de los editores.
Ten en cuenta que, para que los bloques de anuncios responsivos funcionen correctamente, no deben colocarse dentro de un contenedor con una altura fija o limitada.
Genial.
Si deseas limitar la altura de tus anuncios responsivos, deberás modificar el código de tu anuncio responsivo…
Así que haz lo mismo que antes con los contenedores y el CSS, pero usa estilos en línea en su lugar para permitir que Google “se adapte automáticamente a todos los tamaños de anuncio diferentes”, sea lo que sea que eso signifique.
PERO sus ejemplos muestran que el uso de CSS aún debería funcionar: @ljpp, mira este artículo:
¿Estás seguro de que no has intentado usar CSS para controlar el ancho y la altura máximos de los bloques responsivos? Los dos artículos se contradicen, así que quizás sus ejemplos estén obsoletos.
Hola, publico esto para intentar obtener comentarios sobre un problema recurrente y muy molesto relacionado con los anuncios:
En dispositivos móviles, es frecuente que las publicaciones “salten” hacia arriba o hacia abajo (no encuentro una mejor descripción) incluso después de que todo en la página se ha cargado, lo que hace que sea realmente muy difícil leer ciertas publicaciones debido a este desplazamiento vertical involuntario. La pantalla no se mantiene quieta en la publicación; salta cada vez que uno intenta volver a ponerla en primer plano. Digo que esto se debe a los anuncios, ya que cuando no están presentes, el problema desaparece. Tengo todo configurado como debería estarlo, con anuncios responsivos en Discourse que corresponden a códigos de anuncios responsivos en AdSense.
¿Alguien reconoce este comportamiento?
¿Podría estar relacionado con que AdSense intenta “decidir” la altura de los anuncios todo el tiempo?
IF YOU ARE RUNNING AN AD BLOCKER RIGHT NOW YOU WILL HAVE A VERY BAD TIME TRYING TO SET THIS UP! TURN IT OFF BEFORE PROCEEDING DOWN THIS PATH! You’ve been warned.
