Responsive AdSense

Responsive AdSense

Overview Updates (8) Reviews (20) Discussion
If Google DFP allows the use of display:none then that's fine.
I'm fairly sure though that AdSense doesn't so I wouldn't advocate using it for that platform.
 
I am very new to running adsense so please forgive the newbie questions.

The is the code I have on my ad_header temp.
Code: 
<xen:hook name="ad_header" />
<style>
.dmax1 { width: 320px; height: 50px; }
@media(min-width: 500px) { .dmax1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .dmax1 { width: 728px; height: 90px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- dmax1 -->
<ins class="adsbygoogle dmax1"
    style="display:inline-block"
    data-ad-client="ca-pub-2682737960191725"
    data-ad-slot="9582185490"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

What is the best way to get this ad to float right on wide screens? Right now it's hard against my logo.

I was also wondering just how far I can go in changing the above code.

Say I want to change some of the widths and heights, can I just make the changes here without screwing something up with adsense? I am not totally sure how this integration with adsense works and would hate to get kicked out of their program by doing stupid things.
 
I was able to move the banner by adding a float to each @media line...

Now I have another problem and a question, Why are these arrows showing up?
arrow.png


This is the code on my ad_header templet.
Code: 
<xen:hook name="ad_header" />
<style>
.dmax1 { width: 320px; height: 50px; }
@media(min-width: 500px) { .dmax1 { float: right; width: 468px; height: 60px; } }
@media(min-width: 1000px) { .dmax1 { float: right; width: 728px; height: 90px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- dmax1 -->
<ins class="adsbygoogle dmax1"
    style="display:inline-block"
    data-ad-client="ca-pub-2682737960191725"
    data-ad-slot="9582185490"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

The arrows only show up on small screens...

Thanks for any help!
 
Those are the breadcrumb arrows.

Your header content is too big with the advertisement and logo stacked.
 
Since setting this up properly to use the different add sizes per layout size, my adsense revenue has gone back up.

It went down when I switched to using 468x60 banners top and bottom, but now I'm using 728x90 again for the desktop size, and shrinking down through the responsive views, it's gone up almost 50% in the last month since making the change back (y)
 
MattW said:
Since setting this up properly to use the different add sizes per layout size, my adsense revenue has gone back up.

It went down when I switched to using 468x60 banners top and bottom, but now I'm using 728x90 again for the desktop size, and shrinking down through the responsive views, it's gone up almost 50% in the last month since making the change back (y)
Click to expand...
Just had this months payment come through

Earnings and change
+£XX.XX (106%)

(y)
 
I don't currently use the sidebar location. As the sidebar is re-located to the bottom of the forum in responsive mode, you could just use a skyscraper add which is 120x600 in dimension.

Then place the code in one of the 3 ad_sidebar locations

ad_sidebar_below_visitor_panel
ad_sidebar_bottom
ad_sidebar_top
 
MattW said:
I don't currently use the sidebar location. As the sidebar is re-located to the bottom of the forum in responsive mode, you could just use a skyscraper add which is 120x600 in dimension.

Then place the code in one of the 3 ad_sidebar locations

ad_sidebar_below_visitor_panel
ad_sidebar_bottom
ad_sidebar_top
Click to expand...

wow, that was easy...:) Thank you..
 
Hi @Brogan

Thanks for the detail of how to implement Adsense for 1.2

I'm having some trouble with I.E users though :(

First off, using the width option, completely breaks the page for I.E 8 (Unless I've sodded it up somewhere?)

Code: 
<xen:if is="!{$visitor.user_id}">
<div style="padding: 0; text-align: center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-XXXXXXXXXXXXX";
width = document.documentElement.clientWidth;
    /* VxON iPhone Header 2 */
    google_ad_slot = "XXXXXXXX";
    google_ad_width = 234;
    google_ad_height = 60;
        if (width > 483) {
        /* VxON Smaller Header */
        google_ad_slot = "XXXXXXXX";
        google_ad_width = 468;
        google_ad_height = 60;
        }
            if (width > 743) {
            /* Forum Header */
            google_ad_slot = "XXXXXXXXX";
            google_ad_width = 728;
            google_ad_height = 90;
            }
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</xen:if>

This results in this for I.E 8 users:

vxerror1_zpsec598042.png


Using the new async model

Code: 
<xen:if is="!{$visitor.user_id}">
<div style="padding: 0; text-align: center">
<style type="text/css">
.responsive-header { width: 234px; height: 60px; }
@media(min-width: 484px) { .responsive-header { width: 468px; height: 60px; } }
@media(min-width: 744px) { .responsive-header { width: 728px; height: 90px; } }
</style>

<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive Header -->
<ins class="adsbygoogle responsive-header"
    style="display:inline-block"
    data-ad-client="ca-pub-XXXXXXXXXXX"
    data-ad-slot="XXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>
</xen:if>

Results in the advert not displaying for I.E 8 users:

vxonfixing1_zps02418209.png


So the advert isn't displayed properly.

Any thoughts on what I can do to work around this? Adsense mention specifying a static advert for older browsers, but I have no idea how to go about doing that.

Dave.
 
I'm using this code on my site:

Code: 
<xen:if is="!{xen:helper ismemberof, $visitor, 6, 4, 3}">
<center>
<script type="text/javascript">
google_ad_client = "ca-pub-AAAAAAAAA";
width = document.documentElement.clientWidth;
google_ad_slot = "XXX";
google_ad_width = 234;
google_ad_height = 60;
    if (width > 500) {
        google_ad_slot = "YYY";
    google_ad_width = 468;
    google_ad_height = 60;
        }
        if (width > 1024) {
        google_ad_slot = "ZZZ";
        google_ad_width = 728;
        google_ad_height = 90;
        }
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></center>
</xen:if>

and it works fine in IE8
ie8.webp
 
Tha
MattW said:
I'm using this code on my site:

Code: 
<xen:if is="!{xen:helper ismemberof, $visitor, 6, 4, 3}">
<center>
<script type="text/javascript">
google_ad_client = "ca-pub-AAAAAAAAA";
width = document.documentElement.clientWidth;
google_ad_slot = "XXX";
google_ad_width = 234;
google_ad_height = 60;
    if (width > 500) {
        google_ad_slot = "YYY";
    google_ad_width = 468;
    google_ad_height = 60;
        }
        if (width > 1024) {
        google_ad_slot = "ZZZ";
        google_ad_width = 728;
        google_ad_height = 90;
        }
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></center>
</xen:if>

and it works fine in IE8
View attachment 55500
Click to expand...

Thanks Matt - the only real difference I can see if the fact I've used a DIV for the Center - I will try it with the simple <center> tags :)

Thanks Brogan, Google says I.E 7 and below, I really hate I.E.
 
@MattW

I've amended to use the <center> tags, the error is now back

The guy I have testing gets this in the yellow warning triangle popup:

Code: 
Error message;

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C; .NET4.0E; .NET CLR 1.1.4322)
Timestamp: Thu, 29 Aug 2013 11:11:00 UTC


Message: Syntax error
Line: 208
Char: 1
Code: 0
URI: http://www.vauxhallownersnetwork.co.uk/index.php

Does my site work for you with I.E 8 as a guest Matt?
 
Fixed...

It was due to this "<script type="text/javascript"><!--" not sure where the extra <!-- came from, but removing it seems to have returned the site to normal.
 
If I'm using more than one (Google AdSense) Responsive Ad Unit, in locations that have differing real estate, can I simply reuse the same unit so long as I just give each one it's own unique CSS (which seems to work btw), or, should I strictly be creating new Ad units for each placement?

For example, I'm placing Ads in templates ad_below_top_breadcrumb, and ad_below_bottom_breadcrumb. The latter has more horizontal space available, which means a different set of trigger points for the CSS rules. As I mentioned, so long as I keep the CSS unique, then I can successfully re-use the same Ad unit.

Ultimately, my question is, is this advised? Or should I strictly create a new Ad unit?
 
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