Responsive AdSense

Responsive AdSense

Overview Updates (8) Reviews (20) Discussion
can anyone tell me how i can add max width to responsive adsense, in xF2 advertisements are given option to directly paste code in advertise section under option menu.
 
I thought I understood this tutorial, but I suspect I am missing something obvious.

Newcomers to our site are getting trapped by software ads that look a lot like what a naive user might think was part of our site. I really do not want them to see ads during the login and/or registration process. I modified the ads as shown in the code segment below.

Is there something obvious I am missing. The edits appear to have no effect at all.

Code: 
<xen:if is="!in_array({$contentTemplate}, array('', 'message_page', 'error', 'search_form', 'search_form_post', 'search_form_profile_post', 'search_results', 'register_form', 'login', 'error_with_login', 'contact'))">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Xenforo MB Ad - Below NavBar -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9999999999999"
     data-ad-slot="7777777777"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</xen:if>
 
I suspect you may be using the new Google Auto Ads. You should disable those and go back to the older Google AdSense Responsive ads code.

I don't know what kinds of sites those new Auto Ads would work for but they sure do NOT work well for forums. They try to cram in ads wherever they can find a space, including so-called "native" ads. They look like crap on a forum and in all likelihood will slow down your page loads.
 
Our marketing manager installed them. I will try to find out what is going on from him.

According to our Ad Manager tool in AdminCP they are 5 ads top, bottom, above posts, below posts and sidebar. I do not see them showing up anywhere else, but they seem to me to be violating the ToS and the certainly confuse new users who think the ad buttons are part of the registration and log in system.
 
upnet said:
Any thoughts on how to implement adsense native in-article ads?
Click to expand...

Those are already responsive, just add the code in the template where you want it. I have one under every first post in a thread and also a native relevant content block at the bottom.
 
dutchbb said:
Those are already responsive, just add the code in the template where you want it. I have one under every first post in a thread and also a native relevant content block at the bottom.
Click to expand...
If I just add the in-article code to ad_message_below, sometimes it will cover text of thread, or date and time. Same with responsive ad unit, which works fine in header template without any javascript window size detection.
 
upnet said:
If I just add the in-article code to ad_message_below, sometimes it will cover text of thread, or date and time. Same with responsive ad unit, which works fine in header template without any javascript window size detection.
Click to expand...

Give it some margin at top, i use 30px. But normally it shouldn't cover text, are you using a specific style? Try on the default style to test it.
 
dutchbb said:
Give it some margin at top, i use 30px. But normally it shouldn't cover text, are you using a specific style? Try on the default style to test it.
Click to expand...
Default style yes. We had to turn it off because we couldn't figure it out. Here is what it looks like in one instance where it is covering the post. This is after the 1st post in ad_message_below. Sometimes it is fine. Sometimes it covers the post above, sometimes the post below.

covering.webp
 
I checked and also get this with some posts/pages depending the ad.. Maybe some bottom margin will work?

But i think this is the same problem as with the adsense auto ads and probably better to set the responsive styling yourself like with normal responsive ads. On most pages it is working correct but not great for visitors viewing a page where it is not.

For normal responsive ads i am doing it like this as google suggests recent, should be the same for native ones:
Code: 
<style>
.ad_above_content_1 { width: 320px; height: 100px; text-align:center; margin:5px auto 15px auto; }
@media(min-width: 500px) { .ad_above_content_1 { width: 468px; height: 60px; text-align:center; margin:5px auto 15px auto; } }
@media(min-width: 800px) { .ad_above_content_1 { width: 728px; height: 90px; text-align:center; margin:5px auto 15px auto; } }
</style>

<!-- ad_above_content (responsive) - threads -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle ad_above_content_1"
     style="display:block"
     data-ad-client="ca-pub-999999999999"
     data-ad-slot="857485084"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
 
Last edited:
dutchbb said:
I checked and also get this with some posts/pages depending the ad.. Maybe some bottom margin will work?

But i think this is the same problem as with the adsense auto ads and probably better to set the responsive styling yourself like with normal responsive ads. On most pages it is working correct but not great for visitors viewing a page where it is not.

For normal responsive ads i am doing it like this as google suggests recent, should be the same for native ones:
Code: 
<style>
.ad_above_content_1 { width: 320px; height: 100px; text-align:center; margin:5px auto 15px auto; }
@media(min-width: 500px) { .ad_above_content_1 { width: 468px; height: 60px; text-align:center; margin:5px auto 15px auto; } }
@media(min-width: 800px) { .ad_above_content_1 { width: 728px; height: 90px; text-align:center; margin:5px auto 15px auto; } }
</style>

<!-- ad_above_content (responsive) - threads -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle ad_above_content_1"
     style="display:block"
     data-ad-client="ca-pub-999999999999"
     data-ad-slot="857485084"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Click to expand...
I haven't seen an auto ad cover anything. I will try adding that style to the in-article ads. I feel like I've been trough this 3 times and always revert back to javascript checking the browser size and displaying either the mobile ad (320x100) or desktop (728x90). But I feel like using responsive and native units will perform better. I think the ads covering the text might be more detrimental than you think. I see the error in search console as well.
 
upnet said:
I haven't seen an auto ad cover anything. I will try adding that style to the in-article ads. I feel like I've been trough this 3 times and always revert back to javascript checking the browser size and displaying either the mobile ad (320x100) or desktop (728x90). But I feel like using responsive and native units will perform better. I think the ads covering the text might be more detrimental than you think. I see the error in search console as well.
Click to expand...

For after first post i would use something like this:
Code: 
<style>
.ad_above_content_1 { width: 300px; height: 250px; text-align:center; margin:30px 0 5px 0; }
@media(min-width: 500px) { .ad_above_content_1 { width: 728px; height: 90px; text-align:center; margin:30px 0 5px 0; } }
@media(min-width: 800px) { .ad_above_content_1 { width: 970px; height: 250px; text-align:center; margin:30px 0 5px 0; } }
</style>
 
Thanks for your responses. It still breaks it though :( Here is the code from the source and the screenshot.

Code: 
<style>
.ad_above_content_1 { width: 300px; height: 250px; text-align:center; margin:30px 0 5px 0; }
@media(min-width: 500px) { .ad_above_content_1 { width: 728px; height: 90px; text-align:center; margin:30px 0 5px 0; } }
@media(min-width: 800px) { .ad_above_content_1 { width: 970px; height: 250px; text-align:center; margin:30px 0 5px 0; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-8123423461"
     data-ad-slot="9234223434"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

stillbreaking.webp
 
The code is not correct. You have to ad the style 'ad_above_content_1' (class) to the adsense class. In this case i would use 'ad_below_first_post'

Code: 
<style>
.ad_below_first_post { width: 300px; height: 250px; text-align:center; margin:30px 0 5px 0; }
@media(min-width: 500px) { .ad_below_first_post { width: 728px; height: 90px; text-align:center; margin:30px 0 5px 0; } }
@media(min-width: 800px) { .ad_below_first_post { width: 970px; height: 250px; text-align:center; margin:30px 0 5px 0; } }
</style>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle ad_below_first_post"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-8123423461"
     data-ad-slot="9234223434"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

If that doesn't work change the margin sides to auto-> margin: 30px auto 5px auto;
 
dutchbb said:
The code is not correct. You have to ad the style 'ad_above_content_1' (class) to the adsense class. In this case i would use 'ad_below_first_post'

Code: 
<style>
.ad_below_first_post { width: 300px; height: 250px; text-align:center; margin:30px 0 5px 0; }
@media(min-width: 500px) { .ad_below_first_post { width: 728px; height: 90px; text-align:center; margin:30px 0 5px 0; } }
@media(min-width: 800px) { .ad_below_first_post { width: 970px; height: 250px; text-align:center; margin:30px 0 5px 0; } }
</style>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle ad_below_first_post"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-8123423461"
     data-ad-slot="9234223434"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
Click to expand...
Gotcha. CSS Amateur hour. It looks like it's working, however I'd say it's not working the way that native in-article ads are supposed to work. When they work as intended they stretch across end to end, especially on mobile. By defining the size it looks like it's basically loading 3 different ad units dependent on window size. Which probably is the same as doing the javascript to determine window size and then loading either the 320x100 or 728x90.
 
You must log in or register to reply here.

Similar threads

djbaxter
How to collapse empty blank spaces when no AdSense ad is available
2
Replies
33
Views
4K
djbaxter
djbaxter
Paul B
Responsive Design
2 3 4
Replies
71
Views
35K
zoldos
zoldos
Top Bottom