Responsive AdSense

Responsive AdSense

Dnyan Deshmukh

Well-known member
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.
 

Tom McIntyre

Active member
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>
 

djbaxter

Well-known member
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.
 

Tom McIntyre

Active member
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.
 

dutchbb

Well-known member
Any thoughts on how to implement adsense native in-article ads?
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.
 

upnet

Active member
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.
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.
 

dutchbb

Well-known member
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.
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.
 

upnet

Active member
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.
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.png
 

dutchbb

Well-known member
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:

upnet

Active member
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>
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.
 

dutchbb

Well-known member
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.
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>
 

upnet

Active member
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.png
 

dutchbb

Well-known member
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;
 

upnet

Active member
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>
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.
 
Top