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)]

@ljpp

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 Ещё раз спасибо за этот плагин — этот единственный компонент является критически важным для нашего сообщества, которое существует без какого-либо другого финансирования.

Я использую баннеры AdSense с настройкой Адаптивный с момента её появления в плагине. Однако в последнее время адаптивные объявления начали вести себя некорректно: мне показываются более крупные рекламные блоки, которые нарушают задуманный пользовательский опыт (слишком много рекламного контента выше сгиба). Кроме того, объявления оказываются слишком большими для моего iPhone SE — на экране появляется большое белое пространство, если только я не переведу устройство в горизонтальный режим.

Я посмотрел настройки и заметил, что теперь размер объявления — это опция множественного выбора. Я попытался поискать здесь информацию, но не смог найти, как именно работает эта функция множественного выбора — какие размеры объявлений отображаются и когда, если выбрать более одного?

[neil (Neil Lalonde)]

@ljpp

Я посмотрел настройки и заметил, что размер рекламы теперь является опцией множественного выбора. Я попытался поискать здесь, но не смог найти информацию о том, как на самом деле работает эта функция множественного выбора — какие размеры рекламы показываются и когда, если я выбираю более одного?

Если вы выберете несколько размеров, рекламные блоки будут равномерно чередоваться между ними. Например, вы можете чередовать баннерную рекламу и квадратную рекламу в одном и том же рекламном блоке.

Что касается проблем с высотой рекламы, которые вы наблюдаете, вы можете попробовать добавить правила высоты для рекламных блоков, как показано в первом посте этой темы:

Это больше не работает!

@neil

(Опционально) Управление размерами рекламы

Вы можете полностью контролировать размеры адаптивных рекламных блоков, так как AdSense учитывает размер контейнера при выборе размера отображаемой рекламы.

Используя пользовательскую тему, вы можете использовать CSS для установки размера каждого рекламного блока. Например, чтобы ограничить высоту рекламы, которая показывается над списками тем:

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

[ljpp]

Кстати, мне так и не удалось настроить управление размером адаптивного элемента. Только заметил, что Google в сентябре обновил адаптивные единицы измерения.

Parannuksia responsiivisiin mainosyksiköihin - Google AdSense Ohjeet

Добавление максимальной высоты и ширины стало бы отличным дополнением к плагину и сделало бы опции фиксированного размера избыточными. Возможно, стоит рассмотреть это в плане разработки?

[neil (Neil Lalonde)]

@ljpp

Максимальная высота/ширина стала бы отличным дополнением к плагину и сделала бы избыточными варианты с фиксированным размером. Возможно, стоит рассмотреть это в плане разработки?

Вы уже можете это сделать: см. раздел (Необязательно) Управление размерами объявлений в первом сообщении этой темы.

[ljpp]

К слову, мне так и не удалось заставить работать управление размером адаптивного элемента

Но дело было не в этом. Я пробовал несколько раз, но по какой-то причине это не работает «из коробки» (в нашем сценарии).

Преимущество заключалось бы в упрощении вида настроек плагина, который сейчас довольно загромождён.

[neil (Neil Lalonde)]

Я не знаю, что вы предлагаете, но я нашел эту статью, которая, кажется, говорит, что адаптивные объявления теперь могут игнорировать свои контейнеры.

…адаптивные рекламные блоки теперь могут изменять размер родительского HTML-контейнера (например, <div>), в котором они находятся. Это позволяет им автоматически адаптироваться ко всем различным размерам рекламы на страницах издателей.

Обратите внимание, что для корректной работы адаптивных рекламных блоков их нельзя размещать внутри контейнера с фиксированной или ограниченной высотой.

Круто.

Если вы хотите ограничить высоту ваших адаптивных объявлений, вам нужно изменить код адаптивного объявления…

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

То есть сделать то же самое, что и раньше с контейнерами и CSS, но использовать встроенные стили, чтобы Google мог «автоматически адаптироваться ко всем различным размерам рекламы», что бы это ни значило.

НО в их примерах показано, что использование CSS всё ещё должно работать: @ljpp, посмотрите эту статью:

How to modify your responsive ad code - Google AdSense Help

Вы уверены, что не пробовали использовать CSS для управления максимальной шириной/высотой адаптивных блоков? Эти две статьи противоречат друг другу, поэтому, возможно, их примеры устарели.

[Callum_OKane]

Получено уведомление о рекламе, но самой рекламы нет.

[Callum_OKane]

Почему я вижу только слово «advertisement» вместо самого объявления? Вот моя конфигурация! Screenshot_20191209-180110|281x500, 50%

[Paracelsus]

Привет! Я публикую это сообщение, чтобы получить обратную связь по повторяющейся и крайне раздражающей проблеме с рекламой:

На мобильных устройствах посты часто «подпрыгивают» вверх или вниз (не могу найти лучшего описания), даже после полной загрузки страницы. Из-за этого involuntary вертикального скроллинга читать некоторые посты становится действительно очень сложно. Экран не остается на месте у поста — он «прыгает» каждый раз, когда вы пытаетесь снова сфокусироваться на нем. Я считаю, что причина в рекламе, поскольку при её отсутствии проблема исчезает. У меня всё настроено правильно: на Discourse используются адаптивные рекламные блоки, а в Google AdSense — соответствующие адаптивные коды.

Заметил ли кто-нибудь подобное поведение?
Может ли это быть связано с тем, что Google AdSense постоянно пытается «определить» высоту рекламных блоков?