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, ancora una volta grazie per questo plugin: questo singolo componente è una funzionalità determinante per la nostra comunità, che opera senza alcun altro finanziamento.
Da quando questa funzionalità è stata introdotta nel plugin, ho sempre utilizzato i banner AdSense con l’impostazione Responsive. Tuttavia, di recente gli annunci Responsive hanno iniziato a comportarsi in modo errato: sembra che vengano visualizzate unità pubblicitarie più grandi che compromettono l’UX prevista (troppo contenuto pubblicitario sopra la piega della pagina). Ricevo inoltre annunci troppo grandi per il mio iPhone SE, che generano un’ampia area bianca sullo schermo a meno che non ruoti il dispositivo in orizzontale.
Ho esaminato le impostazioni e ho notato che la dimensione dell’annuncio è ora un’opzione multi-selezione. Ho cercato qui, ma non sono riuscito a trovare informazioni su come funziona effettivamente questa funzione di multi-selezione: quali dimensioni di annuncio vengono visualizzate e quando, se ne scelgo più di una?
Se scegli più dimensioni, le unità pubblicitarie si alterneranno tra di esse in modo uniforme. Quindi, ad esempio, potresti alternare annunci banner e annunci quadrati nello stesso spazio pubblicitario.
Per quanto riguarda i problemi di altezza degli annunci che stai riscontrando, puoi provare ad aggiungere regole di altezza agli spazi pubblicitari come mostrato nel primo post di questo argomento:
A proposito, non sono mai riuscito a far funzionare il controllo delle dimensioni degli elementi responsivi. Ho appena notato che Google ha apportato alcune modifiche alle unità responsive a settembre.
Un limite massimo per altezza/larghezza sarebbe un’ottima aggiunta al plugin e renderebbe superflue le opzioni di dimensioni fisse. Forse qualcosa da prendere in considerazione per la roadmap di sviluppo?
Non so cosa tu stia proponendo, ma ho trovato questo articolo che sembra dire che gli annunci responsive possono ora ignorare i loro contenitori.
…gli unità pubblicitarie responsive possono ora ridimensionare il contenitore genitore HTML (ad esempio <div>) in cui si trovano. Questo permette loro di adattarsi automaticamente a tutte le diverse dimensioni degli annunci presenti sulle pagine degli editori.
Tieni presente che, affinché le unità pubblicitarie responsive funzionino correttamente, non devono essere inserite all’interno di un contenitore con un’altezza fissa o limitata.
Figurati.
Se vuoi limitare l’altezza dei tuoi annunci responsive, dovrai modificare il codice dell’annuncio responsive…
Quindi fai la stessa cosa che si faceva prima con i contenitori e il CSS, ma utilizza gli stili inline invece, per permettere a Google di “adattarsi automaticamente a tutte le diverse dimensioni degli annunci”, whatever that means.
MA i loro esempi mostrano che l’uso del CSS dovrebbe funzionare comunque: @ljpp guarda questo articolo:
Sei sicuro di non aver provato a usare il CSS per controllare la larghezza/altezza massima delle unità responsive? I due articoli si contraddicono, quindi forse i loro esempi sono obsoleti.
Ciao, pubblico questo messaggio per cercare di ottenere un feedback su un problema ricorrente e molto fastidioso legato agli annunci:
Quando si utilizza il dispositivo mobile, è frequente che i post “saltino” su o giù (mancando una descrizione migliore) anche dopo che tutto nella pagina è stato caricato, rendendo davvero molto difficile leggere certi post a causa di questo scorrimento verticale involontario. Lo schermo non rimane fermo sul post, ma salta ogni volta che si cerca di riportarlo in primo piano. Dico che ciò è dovuto agli annunci, poiché quando non sono presenti il problema scompare. Ho tutto configurato correttamente, con annunci responsivi su Discourse corrispondenti a codici pubblicitari responsivi su AdSense.
Qualcuno riconosce questo comportamento?
Potrebbe essere legato al fatto che AdSense cerca di “decidere” l’altezza degli annunci continuamente?
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.
