Responsive AdSense

[dvsDave]

Google has been working on a solution: http://techcrunch.com/2013/07/31/google-launches-new-ad-unit-for-responsive-sites/

 

[Paul B]

Yes, the ad slot IDs are just examples.

You will need a different ad for each ID as the sizes are different.

You can re-use any ad slot in other templates if you wish, assuming the size is correct.

 

[Paul B]

Good to know @dvsDave.

I'll give that a try later - it looks to be somewhat simpler than this implementation, although as it's Beta it's still lacking some features.

 

[rdn]

Has anyone already tried this?
http://adsense.blogspot.com/2013/07/the-responsive-web-adsense.html

 

[Paul B]

I'll be doing that later.

 

[rdn]

I haven't tried it yet as @CyberAP still on progress with the Charm style in responsive aspects.

 

[Paul B]

Google has been working on a solution: http://techcrunch.com/2013/07/31/google-launches-new-ad-unit-for-responsive-sites/

Just wanted to say thanks again for the heads up on this.

I have now converted all of my ad templates to use the new beta code.

I should however that resizing the browser does not result in new ads being served, that still requires a refresh.
The only benefit so far is you don't need to create three or four different ad slots to cater for different widths, you just create a single ad slot and then add CSS like so:

<style type="text/css">
.overtaking-middle-dynamic { width: 320px; height: 50px; }
@media(min-width: 484px) { .overtaking-middle-dynamic { width: 468px; height: 60px; } }
@media(min-width: 744px) { .overtaking-middle-dynamic { width: 728px; height: 90px; } }
</style>

 

[Paul B]

Brogan updated Responsive AdSense with a new update entry:

Utilising the new asynchronous ad code

Google has created new asynchronous ad code.
This update will explain how to implement it.

See here for more details: https://support.google.com/adsense/answer/3213689

The main difference between the new asynchronous code and the existing code is you only need to create one ad unit.
To use the new code, you must create new ad units and for the ad size select Other Responsive - Responsive ad unit (BETA).

View attachment 53166

So how does the new code work?
Well, it...

Read the rest of this update entry...

 

[MattW]

The only benefit so far is you don't need to create three or four different ad slots to cater for different widths, you just create a single ad slot and then add CSS like so:

I still like to have 3 different adds to I can see which adds and how they are doing in each aspect of the responsive template.

 

[Paul B]

Yes, that's the drawback with the new beta code - it doesn't allow tracking.

It's also not dynamic in the sense that changing the browser width doesn't result in new ads being served - it still requires a page refresh.
I suspect Google will address that in the future.

I'm actually using the new beta code for responsive and traditional code for fixed width style - I'll post an example of that soon.

 

[Bram]

On top of that Google is now trying to push you to use the ****ty 320x50 leaderboard which requires a double click to visit the advertiser.

Not sure how responsive is working for you guys but besides the fact that it looks great the ad revenue had dropped with 50% or more in the last couple of days.

 

[Paul B]

Brogan updated Responsive AdSense with a new update entry:

Mix and match

If, like me, you have two styles - one fixed width and one responsive, you may want to use the standard code in the fixed width style and the new asynchronous code in the responsive style.

The benefit of using different code for the fixed and fluid styles is you can specify the ad unit exactly for the fixed width and also benefit from tracking, which the asynchronous code doesn't currently support.

You could of course just enter the different code in the ad templates for each style, but if...

Read the rest of this update entry...

 

[Jaxel]

I am using the new Google Adsense supplied Responsive BETA... works great.

 

[Paul B]

I would prefer it if it dynamically served ads as the browser width changed but hopefully that will come soon.

 

[Parminder Singh Chahal]

I used this on a forum and it works well except for one problem :

For example open a site on a samsung note while holding it side ways and a banner loads according to the width of the browser but if you then hold the phone upright the forum (if it has a responsive theme) will shrink according to the new width but the banner would stay the same.

 

[Paul B]

That's because the Google script doesn't dynamically update as the browser width changes.

It is mentioned in the resource:

This is based on Google's own recommendation (https://support.google.com/adsense/answer/1354736) and as it is JavaScript based, the advertisements will not change on the fly as the browser window is resized.
Instead, a page refresh is required.

That may change in the future with the new asynchronous code.

 

[CTXMedia]

Just wanted to give you a thumbs-up for this Paul - an excellent resource for those of us wishing to use responsive with Adsense.

Google's responsive ad-code beta couldn't have been timed any better either ...

Thanks,
Shaun

 

[Paul B]

Wish it had been about three weeks earlier - would have saved me doing the templates over again

 

[craigiri]

This is great info!

Now, what happens with the regular full size graphic banners I serve from my own site? Do they just get messed up when the screen width is lowered?

 

[Paul B]

You will need to come up with a custom solution.
You could use media queries and change the background image, for example:

.MyAd {
background-image: banner1;
}

    @media (max-width:800px) {
    .MyAd {
    background-image: banner2;
    }
}