Jump to content
bryanwoj

How To Serve Responsive Ads?

Recommended Posts

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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/

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

 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 by bocadave

Share this post


Link to post
Share on other sites
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?

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.




×
×
  • Create New...