Responsive AdSense

Responsive AdSense

Overview Updates (8) Reviews (20) Discussion
Either the Google code is bugged in beta or I am not understanding it. On my desktop browser i am seeing a 300x250 where I have defined a 728x90 leaderboard :)

Can somebody confirm this error?

Code: 
<xen:if is="!{$visitor.user_id} AND !in_array({$contentTemplate}, array('forum_view', 'thread_view', 'register_form', 'login', 'error_with_login', 'account_upgrades'))">
        <div style="text-align: center;">
<style>
.responsive-forum-bottom { width: 300px; height: 250px; }
@media(min-width: 500px) { .responsive-forum-bottom { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive-forum-bottom { width: 728px; height: 90px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive Forum Bottom -->
<ins class="adsbygoogle responsive-forum-bottom"
    style="display:inline-block"
    data-ad-client="ca-pub-123456789"
    data-ad-slot="123456789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
        </div>
</xen:if>

Like this it should display 728x90 to all device with a larger screen than 800 right?
 
I'm serving a leaderboard banner inside my ad_header template. Using Brogan example, I'm trying to show it only when the window width is >743px, yet when I resize the windows, it does not disappear. I need a refresh for it to disappear.

Also, when I refresh it, the space where the banner occupied does not minimize. Is this normal?

This is the ad_header template
Code: 
<xen:hook name="ad_header" />
<div id='div-gpt-ad-1360261845044-1' style='width:728px; height:90px; float: right; padding-top: 20px;'>
<script type='text/javascript'>
width = document.documentElement.clientWidth;
if (width > 743) {
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1360261845044-1'); });
}
</script>
</div>
 
Andy.N said:
yet when I resize the windows, it does not disappear. I need a refresh for it to disappear.
Click to expand...
That is correct.
The Google code does not yet support dynamic browser width detection.

Andy.N said:
Also, when I refresh it, the space where the banner occupied does not minimize. Is this normal?
Click to expand...
You have the div set outside the if (width > 743) check so the div will always be present.
 
Before upgrading to the responsive design Ive sold a leaderboard banner via BSA which I am not able to properly show at the moment.

Is there a way to make a code that does the following;
- when on desktop show BSA leaderboard OR adsense
- when on mobile show adsense only and discard BSA inventory.
 
Brogan said:
That is correct.
The Google code does not yet support dynamic browser width detection.


You have the div set outside the if (width > 743) check so the div will always be present.
Click to expand...
What would be your solution?
If I add the if check outside the div, it won't get the "width" variable to check with. I tried to move the js outside but it does not show the ads at all
Code: 
<xen:hook name="ad_header" />
<script type='text/javascript'>
width = document.documentElement.clientWidth;
if (width > 743) {
<div id='div-gpt-ad-1360261845044-1' style='width:728px; height:90px; float: right; padding-top: 20px;'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1360261845044-1'); });
</div>
}
</script>
 
Brogan said:
That is correct.
The Google code does not yet support dynamic browser width detection.


You have the div set outside the if (width > 743) check so the div will always be present.
Click to expand...
Can I just use the condition to wrap around the div?
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
<div> here</div>
}
</xen:if>
 
Bram said:
Is there a way to make a code that does the following;
- when on desktop show BSA leaderboard OR adsense
- when on mobile show adsense only and discard BSA inventory.
Click to expand...
The only way to do that via CSS is using display:none, which is against the AdSense ToS.
It will require a custom solution using JavaScript.
 
Andy.N said:
Can I just use the condition to wrap around the div?
<xen:if is="@enableResponsive">
@media (max-width:mad:maxResponsiveNarrowWidth)
{
<div> here</div>
}
</xen:if>
Click to expand...
Doing that means it will always be shown if the style is responsive.
The condition relates to a flag set per style, and is not related to browser width.
Using the media query with it however means it will only show up to the width specified for the narrow width in SPs.

Where did you get the code from anyway?
It doesn't look like the standard AdSense code.
 
So this means that with a responsive design we can wave bye bye to 3rd party advertisers?
 
Its not possible to use an if statement with responsive design?

When browser is larger than 7xxx show X ad, when smaller show adsense without the largest dimension?

Going to forward this to Google and BSA and see what they say :)
 
Totally missed that. Thanks @Clickfinity Ill post in that thread instead as I am taking the helpful resource of the BroganBot way offtopic (sorry for that)
 
Brogan said:
Doing that means it will always be shown if the style is responsive.
The condition relates to a flag set per style, and is not related to browser width.
Using the media query with it however means it will only show up to the width specified for the narrow width in SPs.

Where did you get the code from anyway?
It doesn't look like the standard AdSense code.
Click to expand...
For the time being, I solved this issue by adding this line to my extra.css
Code: 
/* For mobiles */
@media only screen and (min-width:320px) and (max-width:480px) {
    #div-gpt-ad-id-1 {display:none}
}
Then on mobile and when you resize the window, the whole div is gone.
Google DFP will update later this year for responsive so this will have to do till then.
Can you confirm that it works on your mobile?
 
My understanding is that using {display:none} is not suitable as it will still make the ad request - creating a false impression - which is against Adsense terms (and robs the advertiser of an impression).
 
Also, when resizing your page - the ad disappears when I narrow the width, but if I keep going and make it even more narrow, it reappears!! - presumably because the current CSS only applies for widths between 320 - 480 ... ergo, less width makes the large ad show again. ;)
 
Clickfinity said:
Also, when resizing your page - the ad disappears when I narrow the width, but if I keep going and make it even more narrow, it reappears!! - presumably because the current CSS only applies for widths between 320 - 480 ... ergo, less width makes the large ad show again. ;)
Click to expand...
I remove the mid-width 320 so problem solved ;)
Yes, it's not a perfect solution but the ads are not going to be shown to mobile members anyway.
There are different opinions and solutions online but I do not have time to tweak around with it
http://previousnext.com.au/blog/mobile-advertising-using-responsive-ads
 
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