How To Serve Responsive Ads?

[bryanwoj]

Hello,

We are building a new, responsive version of our site, and we are a bit puzzled with how to convert our ad units to responsive ads. We want our 728x90 ad to be replaced with a 300x50 ad on mobile phone browsers, but cannot figure out the best way to implement this in the site. Any support you can provide would be greatly appreciated.

[Ilya Ber]

Determine the current browser resolution and load an appropriate zone based on that using JS. 

 

Even easier, if you are using single call invocation, you can just pre-populate the Zone ID list  - here is a good example. 

[Guest]

If you want to display 728x90 for web site user and 300x50 for mobile browser,You can create two zones one for web and another one for mobile.

 

Detect the browser & OS while web page request,then Dynamically choose any one invocation code

if (Webbrowser)
{

728x90 Invocation code

}

if(Mobile Browser)
{

300x50 Invocation code

}

Standard Mobile  Banner Size 

 

Android - 300 x 50 , 300 x 480

 

iOS - 320 x 50 , 320 x 480

[bryanwoj]

Instead of detecting the browser/OS, I am going to look into using Response.JS so that it selects based on width instead.

[Guest]

Hi bryanwoj

 

Yes , you can use response js to detect width.

 

But ,

 

Ads should be displayed as per zone size & zones should be placed as per page width .

 

May be this plug-in use full to you

http://code.google.com/p/handset-detection-openx-plugin/

[bryanwoj]

I'm not entirely clear on what you mean with this part of your statement:

 

But ,

 

Ads should be displayed as per zone size & zones should be placed as per page width .

 

[Guest]

I'm not entirely clear on what you mean with this part of your statement

 

 

Please  understand, how  web pages are  rendered/optimized in  mobile browser.

 

Browser will optimize the page as per mobile screen.

[bryanwoj]

Right, but browser user agent can be spoofed, and there are weird browsers that may not be detected properly, causing them to display incorrectly.

 

However, a 500 pixel wide screen is always a 500 pixel wide screen, no matter what browser you are using.

[Guest]

For Example :

 

A web page contains 300 x 50 static image & 300 x 50 dynamic  image( banner ad ).

 

while page optimization , both images also optimized as per page rendering

[bmanke]

Thanks everyone for this info, we're working through a similar responsive site design now.

 

@bryanwoj was your experience with respond.js successful? Any advice on how to implement that?

[bryanwoj]

@bryanwoj was your experience with respond.js successful? Any advice on how to implement that?

 

We're using a single page call and a simple piece of javascript to determine page size on load. Our site's tech is developed by a third party, so I was rather hamstrung in what I could do without breaking the site. The problem we ran into is that we couldn't get it to dynamically pop back and forth between multiple sizes, so it just determines the resolution on page load and serves an appropriately sized ad (as was suggested above). Pretty simple:

<script type="text/javascript">

    var width = window.innerWidth 
        || document.documentElement.clientWidth 
        || document.body.clientWidth;

    if (width > 960) {
        <!--// <![CDATA[
    OA_show('leaderboard'); 
	// ]]> -->
    } else { 
        <!--// <![CDATA[
    OA_show('miniboard'); 
	// ]]> -->
    }

</script>

At the larger size it shows the 728x90 ad, in the smaller size it shows a 300x50. We realized that very few people in the real world are jumping back and forth between breakpoints, so being able to do it on the fly is not a pressing issue. Worst case scenario is that a mobile-sized ad is served on a weird resolution tablet or something like that.

 

The worst part is that our developer has fully responsive ad implementations available, but you have to pay to use their hosted Open X Server in order to do it. They don't open that up to self hosted ad servers.

[goldsky]

Maybe it's not too late, I just want to share my trick.

Just put the invocation code in an element, and modify the width/height on parsing.

<div id="some-id">
    <script type='text/javascript'>
        // invocation code here
    </script><noscript><!-- bla bla --></noscript>
</div>
<script>
    $(document).ready(function () {
        var img = $('#some-id').find('img');
        if (typeof (img) !== 'undefined' && img.length > 0) {
            $(img)
                    .removeAttr('width')
                    .removeAttr('height')
                    .addClass('img-responsive'); // eg: twitter bootstrap
        }
    });
</script>

On this case, I didn't care about the downloading size, but only how it's being presented.

Still, the original width + height should exactly match with the zone's size.

[bryanwoj]

Yeah but then you're just using one zone and scaling it as necessary. If that works for you, cool. We wanted to present separate zones based on screen width, which was why it was an issue. 

[gabrielt]

Wondering on how to work that out with the new async invocation code...

 

I played with height: 0px and display: hidden. These tricks work but I am afraid of using them as I am using banners from networks such as Google AdSense, and they might complain that we are rendering banners in a hidden <div>.

 

I saw somewhere that we might add a data-field that would "activate" the correct code depending on the resolution, so the banner that won't be displayed won't be rendered/loaded. Still researching:

 

http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/

 

Please take a look under "Matchmedia to the rescue". I played with it but couldn't get it to work. I don't know where and how to "trigger" the JavaScript code. I'd appreciate any help.

[sanre]

Maybe it's not too late, I just want to share my trick.

Just put the invocation code in an element, and modify the width/height on parsing.

<div id="some-id">
    <script type='text/javascript'>
        // invocation code here
    </script><noscript><!-- bla bla --></noscript>
</div>
<script>
    $(document).ready(function () {
        var img = $('#some-id').find('img');
        if (typeof (img) !== 'undefined' && img.length > 0) {
            $(img)
                    .removeAttr('width')
                    .removeAttr('height')
                    .addClass('img-responsive'); // eg: twitter bootstrap
        }
    });
</script>

On this case, I didn't care about the downloading size, but only how it's being presented.

Still, the original width + height should exactly match with the zone's size.

Hello @goldsky,

 

I just want to let you know that this Javascript snippet worked for my websites just fine.

 

Thank you!

[iamkingsleyf]

Hello @goldsky,

 

I just want to let you know that this Javascript snippet worked for my websites just fine.

 

Thank you!

 

Hello;

 

how did you do it?

[clove]

Maybe it's not too late, I just want to share my trick.

Just put the invocation code in an element, and modify the width/height on parsing.

<div id="some-id">
    <script type='text/javascript'>
        // invocation code here
    </script><noscript><!-- bla bla --></noscript>
</div>
<script>
    $(document).ready(function () {
        var img = $('#some-id').find('img');
        if (typeof (img) !== 'undefined' && img.length > 0) {
            $(img)
                    .removeAttr('width')
                    .removeAttr('height')
                    .addClass('img-responsive'); // eg: twitter bootstrap
        }
    });
</script>

On this case, I didn't care about the downloading size, but only how it's being presented.

Still, the original width + height should exactly match with the zone's size.

Hi, could you explain it more so I will be able to implement this in my own site? What should I put in the  "bla--blaa" part? Can I just leave it blank?

[manchine]

Wouldn't it be whole lot simpler if Revive did not specify width and height at all?
An inline css rule like width:100% would do a much better job at ensuring optimal enduring in whatever resolution.
It's a bit of mystery to me why zones are associated with fixed values to begin with.

[gabrielt]

Fixed sizes have to do the way the web traditionally works. You have to keep in mind that "responsive" is a somewhat new concept. The web is about 20 years old and we've only seen responsive layouts in the past 2-3 years.

That said, it would be great to have a built-in mechanism to detect the maximum width supported and display a banner that fits that space.

For example, today we can setup a campaign with, say, two banner sizes, 728x90 and 300x250, at the same time. Revive will display the 728x90 banner when this campaign is assigned to a 728x90 zone, and will display the 300x250 banner when this campaign is assigned to a 300x250 zone.

One step further would be the Revive tag to detect the width, and this particular zone would display (for example) the 728x90 banner when the resolution is high enough and the 300x250 banner at lower resolutions.

Currently, there are a few known workarounds to that. You can define zones without a width and height (it is possible, just enter * x *), in this case, both banners (728x90 and 300x250) will be displayed at the zone. Then you can set up banner limitation to display the 300x250 for mobile browsers and the 728x90 banner for non-mobile browsers.

I hope I have helped.

[Michael Benoit]

Currently, there are a few known workarounds to that. You can define zones without a width and height (it is possible, just enter * x *), in this case, both banners (728x90 and 300x250) will be displayed at the zone. Then you can set up banner limitation to display the 300x250 for mobile browsers and the 728x90 banner for non-mobile browsers.

Gabrielt, could you explain this a bit more and/or point me to any documentation? How would you get both banners to display at the zone? I've been thinking through a bunch of different solutions, but I'm curious about what has worked for you.

[bocadave]

 Currently, there are a few known workarounds to that. You can define zones without a width and height (it is possible, just enter * x *), in this case, both banners (728x90 and 300x250) will be displayed at the zone. Then you can set up banner limitation to display the 300x250 for mobile browsers and the 728x90 banner for non-mobile browsers.

Has  anyone  come  up with  any new  advice for responsive ?

Edited December 22, 2015 by bocadave

[xtech]

Responsive ads would be the real deal. I hope they implement it :)

Edited January 7, 2016 by xtech

[malmazan]

We did a CSS-only version of Clove's approach.

Say, for 728px-wide banners:

	.some-id img {width: 100%; max-width: 728px; height: auto; max-height: 728px;}
	

[meetbushe]

none of this solutions seem to work in 2018. 

[garfieldmypet]

On 9/4/2015 at 10:45 AM, gabrielt said:

Currently, there are a few known workarounds to that. You can define zones without a width and height (it is possible, just enter * x *), in this case, both banners (728x90 and 300x250) will be displayed at the zone. Then you can set up banner limitation to display the 300x250 for mobile browsers and the 728x90 banner for non-mobile browsers.

I hope I have helped.

For the solution of setting the width and height of the zone to *x* so that it can accept banner of different sizes, does the solution still work in 2018?