How to make ads responsive
I am a publisher of ad networks, and I wanted to make the 728x90 and 468x60 banner ads responsive since they're cut off on mobile due to width. My first thought was to show a 300x250 in placement of the 728 and 468 banners on mobile devices only. So I created the following code:
window.onresize = function(){
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
if ( $(window).width() <= 767) {
e9 = new Object();
e9.size = "320x50";
script.src = "tags.expo9.exponential.com/tags/comMobile/320x50/tags.js";
head.appendChild(script);
}else {
e9 = new Object();
e9.size = "728x90";
script.src = "tags.expo9.exponential.com/tags/com/ROS/tags.js";
head.appendChild(script);
}
}
But that didn't display any banner ad, it left the header blank. So that code does not work, not sure what I wrote wrong as I can't detect an issue. Now I'm thinking perhaps there is a way to make the 728x90 and 468x60 responsive, as they pay out more than the 300x250, so why lose out on those sizes?
Is it possible to make it responsive? If so what do I have to do? If it's not possible, then can someone take a look at my javascript above and potentially fix it?
Here are the original ad codes:
728x90
<div class="container">
<!-- Ezoic - Under Page Title - under_page_title -->
<div id="ezoic-pub-ad-placeholder-101">
<script type="text/javascript"><!--
e9 = new Object();
e9.size = "728x90,970x250";
//--></script>
<script type="text/javascript" src="tags.expo9.exponential.com/tags/com/ROS/tags.js"></script>
</div>
<!-- End Ezoic - Under Page Title - under_page_title -->
</div>300x250
<script type="text/javascript"><!--
e9 = new Object();
e9.size = "320x50";
//--></script>
<script type="text/javascript" src="tags.expo9.exponential.com/tags/comMobile/320x50/tags.js"></script>Visit Daily Entertainment Online
http://www.d-eo.com
Megan posted this at 21:05 — 17th May 2016.
She has: 11,421 posts
Joined: Jun 1999
You could use CSS transforms to scale down the ads to fit the screen. This isn't an exact science, and can be tricky to get right. I have done this a little bit to get ads to fit on the screen better. However, when advertisers pay for a certain size ad, they usually expect it to appear at that size and not shrunken down. Resizing them might be against the TOS of your ad networks.
So, I think if you want to offer responsive ads, getting that script to work would be the best bet (sorry I can't help there).
On the other hand, I usually find that publishers want to run different ad sizes in different positions on mobile. The classic example is the sidebar rectangle: That's a strong position on a typical site on desktop, but on mobile it's going to bump way down below the content. I also usually find that advertisers want to buy separately for mobile too.
The networks my clients work with always provide different tags for desktop/mobile, and we use our ad server to target them separately. I have a little bit of responsive CSS just to make sure things don't get messed up if anyone is resizing their browser.
If I understand how this is working, I don't think your code is going to work. I think those scripts need to fire on page load, right? Then load the iframe with the ad in it. When you swap out the script tags in your script, does the new tags.js script actually load and do anything?
An alternate approach could be to use device detection to serve the 728x90 tags.js script to desktop/tablet and serve the mobile script to mobile. You'd need to get a library for device detection which could be a pain to keep updated (that's why we let DFP do that!). Then put in some media queries just to make sure the desktop ads don't show on small screens and vice versa.
There are some networks that do offere Responsive ads, and it is possible to do it in DFP, but I don't have experience with that.
Megan
Connect with us on Facebook!
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.