AdSense Responsive Ads

:warning: 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. :dragon:

Google AdSense offers the option to show ads that fit within the dimensions of their container at the time they will be rendered using the responsive ad size option. The official Discourse Ad Plugin supports AdSense responsive ad sizes.

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.

Current limitations require you to set a very permissive policy using the content_security_policy_script_src site setting. See below:

That’s it!

(Optional) Controlling Ad Sizes

You can have full control over the dimensions of the responsive ad units because AdSense looks at the size of the container when choosing the size of ads to show.

Using a custom theme, you can use CSS to set the size of each ad slot. For example, to limit the height of the ads that show above topic lists:

.adsense-topic-list-top.adsense-responsive {
  max-height: 200px;
}
20 Likes

@neil thanks a million. This simplifies things wonderfully for using Adsense in a multi-device world. Great work.

4 Likes

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.

7 Likes

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.

Glad it’s working out well for you!

6 Likes

@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?

1 Like

What CSS did you use, and how did you add/enable it? Which ad units are you trying to limit the height?

It should be this if you want it to be 100px height of the ad unit above the topic lists:

.adsense-topic-list-top.adsense-responsive {
  height: 100px;
}
3 Likes

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.

Thanks, I’ll report back later.

3 Likes

@neil

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.

1 Like

Sony XZ, Honor 7 and OnePlus 5T were used by those who reported. The screen capture was taken with the Sony phone.

And you want to allow square ads, which is why you didn’t add the custom css with height?

2 Likes

I’ve got this code in Google AdSense.

But I couldn’t understand in which field in the ‘Admin Settings> Settings> AdSense’ do I fill this code. And do I fill this entire code snippet (as google has asked) or only the 16 digit code?

And since there are several empty fields in my AdSense settings, do I leave them blank?

You don’t add the javascript code. Enter your ID as described.

4 Likes

Add the publisher ID and ad unit ID, but got the issue below :

I was having similar issues, and upon viewing the source of the page served, found that Discourse was stripping out the inline Javascript entirely.

This post mentions it:

but I don’t see a solution there.

Fair to note we should mention the specific CSP policy changes needed in the first post, can you take that @tshenry

5 Likes

I am guessing this is why I cannot get my Adsense to work at all. I am getting errors that it is blocking inline Javascript, even when CSP is disabled. Does Adsense work for anyone else, and if so, how are you getting around this issue?

Recently, AdSense did not show ads? Could you advice to fix it?

@bck055 Can you please provide more information.

1 Like

Hello @neil, here is our URL.
Could you advise issue?