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 Noch einmal vielen Dank für dieses Plugin – diese einzelne Komponente ist ein entscheidendes Feature für unsere Community, die ohne weitere Finanzierung läuft.
Ich setze seit der Einführung dieser Funktion AdSense-Banner mit der Einstellung Responsive ein. In letzter Zeit verhalten sich die Responsive-Anzeigen jedoch nicht mehr korrekt – es erscheinen größere Anzeigeneinheiten, die das beabsichtigte Benutzererlebnis stören (zu viel Anzeigeninhalt oberhalb des sichtbaren Bereichs). Außerdem bekomme ich Anzeigen, die für mein iPhone SE zu groß sind; sie erzeugen einen großen weißen Bereich auf dem Bildschirm, es sei denn, ich drehe das Gerät ins Querformat.
Ich habe mir die Einstellungen angesehen und festgestellt, dass die Anzeigengröße jetzt eine Mehrfachauswahl-Option ist. Ich habe hier gesucht, konnte aber keine Informationen darüber finden, wie diese Mehrfachauswahl-Funktion tatsächlich funktioniert – welche Anzeigengrößen werden angezeigt und wann, wenn ich mehrere auswähle?
Wenn Sie mehrere Größen auswählen, wechseln die Anzeigeneinheiten gleichmäßig zwischen ihnen ab. Sie könnten also beispielsweise Banneranzeigen und Quadratanzeigen im selben Anzeigenplatz abwechseln.
Was die von Ihnen beobachteten Probleme mit der Anzeigehöhe betrifft, können Sie versuchen, Höhenregeln für die Anzeigenplätze hinzuzufügen, wie im ersten Beitrag dieses Themas gezeigt:
Übrigens habe ich die Steuerung der Größe des responsiven Elements nie zum Laufen gebracht. Mir ist gerade aufgefallen, dass Google im September einige Updates zu responsiven Einheiten veröffentlicht hat.
Eine maximale Höhe/Breite wäre eine großartige Ergänzung für das Plugin und würde die Optionen für feste Größen überflüssig machen. Vielleicht etwas, das für die Entwicklungs-Roadmap in Betracht gezogen werden sollte?
Ich weiß nicht, was du vorschlägst, aber ich habe diesen Artikel gefunden, der anscheinend besagt, dass responsive Anzeigen ihre Container-Elemente nun ignorieren können.
…responsive Anzeigeneinheiten können nun den übergeordneten HTML-Container (z. B. <div>), in dem sie sich befinden, in der Größe anpassen. Dadurch können sie sich automatisch an alle verschiedenen Anzeigengrößen auf den Seiten der Publisher anpassen.
Beachte, dass responsive Anzeigeneinheiten nicht in einem Container mit fester oder begrenzter Höhe platziert werden dürfen, damit sie ordnungsgemäß funktionieren.
Cool.
Wenn du die Höhe deiner responsiven Anzeigen begrenzen möchtest, musst du deinen Code für responsive Anzeigen anpassen…
Also im Grunde das Gleiche wie früher mit Containern und CSS, aber diesmal mit Inline-Styles, damit Google sich „automatisch an alle verschiedenen Anzeigengrößen“ anpassen kann – was auch immer das genau bedeutet.
ABER ihre Beispiele zeigen, dass CSS weiterhin funktionieren sollte: @ljpp, siehe diesen Artikel:
Bist du sicher, dass du nicht versucht hast, mit CSS die maximale Breite oder Höhe der responsiven Einheiten zu steuern? Die beiden Artikel widersprechen sich gegenseitig, also sind ihre Beispiele vielleicht veraltet.
Hallo, ich poste dies, um Feedback zu einem wiederkehrenden und sehr lästigen Problem mit Werbung zu erhalten:
Auf Mobilgeräten springen Beiträge häufig nach oben oder unten (eine bessere Beschreibung fällt mir nicht ein), selbst nachdem alle Elemente der Seite vollständig geladen sind. Dadurch ist es wirklich sehr schwer, bestimmte Beiträge zu lesen, da es zu diesem unwillkürlichen vertikalen Scrollen kommt. Der Bildschirm bleibt nicht ruhig auf dem Beitrag stehen, sondern springt immer wieder, sobald man versucht, ihn wieder in den Fokus zu bringen. Ich vermute, dass dies an der Werbung liegt, denn wenn diese nicht vorhanden ist, tritt das Problem nicht auf. Ich habe alles so konfiguriert, wie es sein sollte, mit responsiver Werbung in Discourse, die den responsiven Ad-Code von AdSense entspricht.
Erkennt jemand dieses Verhalten?
Könnte es damit zusammenhängen, dass AdSense ständig versucht, die Höhe der Anzeigen zu „bestimmen“?
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.
