AdSense Responsive Ads

[neil (Neil Lalonde)]

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.

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

@pmusaraj

If your site uses an advertising service (like Google Ad Manager, Adsense, etc.) you probably will have to use a very permissive policy:

In the screenshot above, the policy allows any script from a https: source and any inline script. (In the future, this might be replaced by the strict-dynamic keyword, but as of this writing, strict-dynamic isn’t supported by Safari or Edge.)

Controlling Ad Sizes

There is no way to control responsive ad sizes anymore due to changes made by Google. See discussion later in this topic.

[ked (Kenny DuBose)]

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

[ljpp]

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.

[neil (Neil Lalonde)]

Only thing missing is that desktop view ads are not resized if the window is.

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!

[ljpp]

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

[neil (Neil Lalonde)]

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:

This doesn’t work anymore

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

[ljpp]

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.

[ljpp]

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

[neil (Neil Lalonde)]

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.

[rizka]

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

[neil (Neil Lalonde)]

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

[ljpp]

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

[neil (Neil Lalonde)]

@ljpp

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:

This doesn’t work anymore!

@neil

(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 {
  height: 200px;
}

[ljpp]

BTW, I never got the responsive element size control working. Just noticed that Google has made some updates to responsive units in September.

https://support.google.com/adsense/answer/9467650?hl=fi

Max heigh/width would be an awesome addition to the plugin and make the fixed size options redundant. Perhaps something to consider for the development roadmap?

[neil (Neil Lalonde)]

Max heigh/width would be an awesome addition to the plugin and make the fixed size options redundant. Perhaps something to consider for the development roadmap?

You can already do this see the (Optional) Controlling Ad Sizes section in the first post of this topic.

[ljpp]

BTW, I never got the responsive element size control working

But that was not the point. I’ve tried it a number of times, but for some reason it does not work as-is (in our scenario).

The benefit would have been simplifying the Plugin settings view, which is currently quite cluttered.

[neil (Neil Lalonde)]

I don’t know what you’re proposing, but I found this article that seems to say that responsive ads can ignore their containers now.

…responsive ad units can now resize the HTML parent container (e.g. <div> ) that they’re within. This allows them to automatically adapt to all the different ad sizes on publishers’ pages.

Note that for responsive ad units to work properly, they must not be placed inside a container with a fixed or limited height.

Cool.

If you want to limit the height of your responsive ads, you’ll need to modify your responsive ad code…

<ins class="adsbygoogle" style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"

So do the same thing as the way it worked before with containers and css, but do it with inline styles instead to let Google “automatically adapt to all the different ad sizes” whatever that means.

BUT their examples show that using CSS should still work: @ljpp see this article:

https://support.google.com/adsense/answer/9183363

Are you sure you haven’t tried using CSS to control the max width/height of the responsive units? The two articles contradict each other, so maybe their examples are obsolete.

[Callum_OKane]

Getting the word advertisement, but there is no ad.

[Callum_OKane]

Why do I only get the word advertisement where an ad should be? This is my config

[Paracelsus]

Hi, I’m posting this to try to get some feedback on a recurrent and most annoying issue with ads:

When in mobile, it is frequent that the posts “jump” up or down (lacking a better description) even after everything in the page is loaded, being really really hard to read certain posts due to this involuntary vertical scrolling. The screen doesn’t stay still at the post, it jumps whenever one tries to put it in front again. I say this is because of ads since when they’re not there then the issue goes away. I have everything configured as it should, with responsive ads on discourse corresponding to responsive ad-codes on Adsense.

Does anyone recognize this behavior?
Could it be related to Adsense trying to “decide” the height of the ads the whole time?