Backup ad for responsive ad unit?

Forum Moderators: martinibuster

Message Too Old, No Replies

Backup ad for responsive ad unit?

ChanandlerBong

6:51 pm on Jan 11, 2017 (gmt 0)

What options exist for the backup ad field when dealing with responsive ads?
If I want to have my own backup html page, would I add embedded CSS media queries for each ad size?

what have other people done?

NickMNS

9:35 pm on Jan 11, 2017 (gmt 0)

I can share what hasn't worked
I just created a backup ad-unit yesterday using svg to create the image. I thought that maybe the ad would simply be rescaled to fit into its container. Since svg scales without loses it seem like a good idea. But Adsense doesn't scale the ad-unit to fit, so that does not work.

So I used some css on the page to resize the ad-unit by setting the height = 100% and max-height = 250px.
That doesn't work either.

I am now going to try setting the width/height using media queries.

NickMNS

9:48 pm on Jan 11, 2017 (gmt 0)

Using media queries in the style tag of the html page's head works:


<html>
<head>
<style>
@media(XXXpx){#id{style}}
</style>
</head>...

For the time being I simply scaled my svg image but it looks really wonky (too small). I think I might make two versions and set the display to hidden with the media query.

NickMNS

2:03 am on Jan 12, 2017 (gmt 0)

My final solution.
I used a media query to display one of two versions of the image, but you must use @media(min-device-width) otherwise the size is based on iframe size instead of the device.

Here is the code where img1 is the image for mobile and img2 is for desktop.


<html>
<head>
<style>
 #img1{display:block}
 #img2{display:none}
 @media(min-device-width:XXXpx){
 #img1{display:none}
 #img2{display:block}
 }
</style>
</head>
<body>
 <a href=http://example.com target="_top">
 <svg id="img1"></svg>
 <svg id="img2"></svg>
 </a>
</body>
</html>

ChanandlerBong

9:33 am on Jan 12, 2017 (gmt 0)

I might try something like that, but with 3-4 versions. G should really make this stuff much simpler. How am I going to test it? F5!

NickMNS

4:24 pm on Jan 12, 2017 (gmt 0)

How am I going to test it?

I tested the html page as I normally test any page using dev-tools in firefox and/or opera switching between screen sizes with the mobile emulator. Once I was reasonably confident that it was working I went live and then checked it on the live site by clicking on a bunch of pages until the backup ad finally showed up.

Note, I hosted the backup ad html page on another domain so that I would not have to restart-server on the site where the ads appear every time I made a change.

Also if you really need to be sure before going live you can create another page with a bunch of iframes in the sizes you expect from Adsense and then test with that.

anefarious1

5:48 am on Jan 14, 2017 (gmt 0)

Could be a good reason not to use responsive ad units?