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 Once again thank you for this plugin - this single component is a make-it-or-break-it feature for our community that runs without any other funding.
I have been running AdSense banners with the Responsive setting ever since this feature was introduced to the plugin. Recently however the Responsive ads have started misbehaving – I seem to be getting larger ad units that break the intended UX (too much ad content above the fold). I also get ads that are too big for my iPhone SE – they produce a large white space on the screen unless I turn the device landscape.
I had a look at the settings and noticed that ad size is now a multi-select option. I tried searching here but I failed to find information how does this multi-select feature actually work – what ad sizes are shown and when if I choose more than one?
If you choose multiple sizes, the ad units will alternate between them evenly. So you could alternate between banner ads and square ads in the same ad slot, for example.
As for the ad height problems you’re seeing, you can try to add height rules to the ad slots like the first post in this topic shows:
안녕하세요, 반복적으로 발생하며 정말 짜증나는 광고 관련 문제에 대해 피드백을 얻기 위해 이 글을 올립니다.
모바일에서 모든 페이지 로딩이 완료된 후에도 게시물이 위로 또는 아래로 “뛴다”(더 좋은 표현을 찾지 못하겠습니다). 이로 인해 특정 게시물을 읽기가 정말로 어렵습니다. 의도하지 않은 세로 스크롤이 발생하기 때문입니다. 화면이 해당 게시물에 고정되지 않고, 다시 화면 중앙으로 옮기려 할 때마다 계속 뛰어다니는 현상이 반복됩니다. 광고가 없을 때 이 문제가 사라지기 때문에 광고 때문이라고 생각합니다. 저는 Discourse의 반응형 광고 설정과 AdSense의 반응형 광고 코드를 올바르게 구성해 두었습니다.
이 현상을 경험하신 분이 계신가요?
AdSense가 광고 높이를 계속 “결정”하려고 하기 때문일 수 있을까요?
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.
