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 Mais uma vez, obrigado por este plugin. Este único componente é uma característica decisiva para nossa comunidade, que funciona sem qualquer outra fonte de financiamento.
Tenho executado banners do AdSense com a configuração Responsivo desde que essa funcionalidade foi introduzida no plugin. Recentemente, porém, os anúncios responsivos começaram a apresentar problemas: estou recebendo unidades de anúncio maiores que prejudicam a experiência de usuário pretendida (muito conteúdo publicitário acima da dobra). Também recebo anúncios que são grandes demais para o meu iPhone SE, gerando um grande espaço em branco na tela, a menos que eu gire o dispositivo para a orientação paisagem.
Verifiquei as configurações e notei que o tamanho do anúncio agora é uma opção de seleção múltipla. Tentei pesquisar aqui, mas não consegui encontrar informações sobre como essa funcionalidade de seleção múltipla realmente funciona — quais tamanhos de anúncio são exibidos e quando, se eu escolher mais de um?
Se você escolher vários tamanhos, as unidades de anúncio alternarão entre eles de forma equilibrada. Por exemplo, você pode alternar entre anúncios em formato banner e anúncios quadrados no mesmo espaço publicitário.
Quanto aos problemas de altura do anúncio que você está enfrentando, você pode tentar adicionar regras de altura aos espaços publicitários, como mostrado no primeiro post deste tópico:
A propósito, nunca consegui fazer o controle de tamanho do elemento responsivo funcionar. Acabei de perceber que o Google fez algumas atualizações nas unidades responsivas em setembro.
Definir altura/largura máximas seria um acréscimo incrível ao plugin e tornaria as opções de tamanho fixo desnecessárias. Talvez seja algo a considerar no roteiro de desenvolvimento?
Não sei o que você está propondo, mas encontrei este artigo que parece dizer que os anúncios responsivos agora podem ignorar seus contêineres.
…unidades de anúncio responsivas agora podem redimensionar o contêiner pai HTML (por exemplo, <div>) em que estão inseridas. Isso permite que se adaptem automaticamente a todos os diferentes tamanhos de anúncio nas páginas dos editores.
Observe que, para que as unidades de anúncio responsivas funcionem corretamente, elas não devem ser colocadas dentro de um contêiner com altura fixa ou limitada.
Legal.
Se quiser limitar a altura dos seus anúncios responsivos, precisará modificar o código do anúncio responsivo…
Então, faça o mesmo que antes funcionava com contêineres e CSS, mas use estilos em linha para permitir que o Google “se adapte automaticamente a todos os diferentes tamanhos de anúncio” — seja lá o que isso signifique.
MAS os exemplos deles mostram que usar CSS ainda deve funcionar: @ljpp veja este artigo:
Tem certeza de que não tentou usar CSS para controlar a largura/altura máxima das unidades responsivas? Os dois artigos se contradizem, então talvez os exemplos deles estejam desatualizados.
Oi, estou postando isso para tentar obter algum feedback sobre um problema recorrente e muito irritante com anúncios:
No celular, é frequente que os posts “saltem” para cima ou para baixo (não tenho uma descrição melhor) mesmo depois que tudo na página foi carregado, tornando realmente muito difícil ler certos posts devido a essa rolagem vertical involuntária. A tela não fica parada no post; ela salta sempre que alguém tenta trazê-lo de volta ao foco. Digo que isso é causado pelos anúncios, pois quando eles não estão presentes, o problema desaparece. Tenho tudo configurado como deveria, com anúncios responsivos no Discourse correspondendo a códigos de anúncio responsivos no AdSense.
Alguém reconhece esse comportamento?
Será que pode estar relacionado ao AdSense tentando “decidir” a altura dos anúncios o tempo todo?
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.
