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 Encore une fois, merci pour ce plugin – ce seul composant est une fonctionnalité déterminante pour notre communauté qui fonctionne sans aucun autre financement.
Je fais fonctionner des bannières AdSense avec le paramètre Responsive depuis l’introduction de cette fonctionnalité dans le plugin. Récemment, cependant, les annonces réactives ont commencé à se comporter de manière erratique – il semble que j’obtienne des unités publicitaires plus grandes qui perturbent l’UX prévue (trop de contenu publicitaire au-dessus de la ligne de flottaison). Je reçois également des annonces trop grandes pour mon iPhone SE – elles génèrent un grand espace blanc sur l’écran, sauf si je mets l’appareil en mode paysage.
J’ai examiné les paramètres et remarqué que la taille de l’annonce est désormais une option à sélection multiple. J’ai essayé de chercher ici, mais je n’ai pas trouvé d’informations sur le fonctionnement réel de cette fonctionnalité à sélection multiple – quelles tailles d’annonces sont affichées et quand si je choisis plusieurs options ?
Si vous choisissez plusieurs tailles, les unités publicitaires alterneront entre elles de manière égale. Vous pourriez ainsi alterner entre des bannières publicitaires et des publicités carrées dans le même emplacement publicitaire, par exemple.
En ce qui concerne les problèmes de hauteur des publicités que vous rencontrez, vous pouvez essayer d’ajouter des règles de hauteur aux emplacements publicitaires, comme le montre le premier message de ce sujet :
Au fait, je n’ai jamais réussi à faire fonctionner le contrôle de la taille des éléments réactifs. Je viens de remarquer que Google a apporté des mises à jour aux unités réactives en septembre.
Ajouter des hauteurs/largeurs maximales serait un excellent ajout pour le plugin et rendrait les options de taille fixe redondantes. Peut-être quelque chose à envisager pour la feuille de route de développement ?
Je ne sais pas ce que vous proposez, mais j’ai trouvé cet article qui semble indiquer que les annonces responsives peuvent désormais ignorer leurs conteneurs.
…les unités d’annonces responsives peuvent désormais redimensionner le conteneur HTML parent (par exemple, <div>) dans lequel elles se trouvent. Cela leur permet de s’adapter automatiquement à toutes les différentes tailles d’annonces sur les pages des éditeurs.
Notez que pour que les unités d’annonces responsives fonctionnent correctement, elles ne doivent pas être placées dans un conteneur ayant une hauteur fixe ou limitée.
Cool.
Si vous souhaitez limiter la hauteur de vos annonces responsives, vous devrez modifier votre code d’annonce responsive…
Donc, faire la même chose que la méthode précédente avec des conteneurs et du CSS, mais utiliser des styles en ligne à la place pour permettre à Google de “s’adapter automatiquement à toutes les différentes tailles d’annonces”, peu importe ce que cela signifie.
Mais leurs exemples montrent que l’utilisation du CSS devrait toujours fonctionner : @ljpp consultez cet article :
Êtes-vous certain de ne pas avoir essayé d’utiliser le CSS pour contrôler la largeur/hauteur maximale des unités responsives ? Les deux articles se contredisent, il est donc possible que leurs exemples soient obsolètes.
Bonjour, je publie ceci pour obtenir des retours sur un problème récurrent et très agaçant lié aux publicités :
Sur mobile, il est fréquent que les messages « sautent » vers le haut ou le bas (je ne trouve pas de meilleure description), même après le chargement complet de la page, ce qui rend la lecture de certains messages extrêmement difficile en raison de ce défilement vertical involontaire. L’écran ne reste pas stable sur le message ; il saute dès qu’on essaie de le remettre en vue. Je pense que cela est dû aux publicités, car le problème disparaît lorsqu’elles ne sont pas présentes. J’ai tout configuré comme il se doit, avec des publicités adaptatives sur Discourse correspondant à des codes publicitaires adaptatifs sur Adsense.
Est-ce que quelqu’un reconnaît ce comportement ?
Pourrait-il être lié au fait qu’Adsense essaie constamment de « décider » de la hauteur des publicités ?
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.
