I’m trying to optimize ad placements on mobile devices so that for example: a 300×250 would show in the sidebar on desktop but would display within the content on mobile. To do so, the ad code would be in both places but only visible in one spot at a time (depending on the device).
I will be using DFP for Small Business to deliver the ads. I’d like to use the many Ad Zones already defined in the theme to keep things simple as possible.
My first thought is to use the <div class=”td-visible-desktop”> with the code to show the ad in the Sidebar but leave the <div class=”td-visible-phone”> blank. Then I would do the opposite in the Inline Article Ad Zone, leaving td-visible-desktop blank and adding the code to be visible on mobile.
If I do this, does both ads still fire (and result in an impression) – even when one of them is hidden?
The other option I can think of is to see if I can set the device in DFP so that a particular ad unit only displays on mobile or only on desktop etc. I’m not sure I can even do this but will have to look into it further.
Ultimately it looks like those Desktop / tablet / mobile toggle buttons in the Ad Settings would be perfect but I’m told those only work for managing the visibility of AdSense ads – not Google DFP ads.
Has anyone else faced this challenge and, if so, how did you deal with it?
Thx!
Hi,
Yes, theme’s ads system doesn’t handle dfp ads so using on/off settings will not work however you could try to use your dfp ad codes using a plugin and place them to theme’s spots using shortcodes or try to add them directly into theme’s spots in panel and use the below css in theme panel > custom css section and theme’s ad settings: http://screencast.com/t/PLzq945giwr then check again.
@media (max-width: 1018px) and (min-width: 768px) {
.td-rec-hide-on-tp {
display: none;
}
}
@media (max-width: 767px){
.td-rec-hide-on-p {
display: none;
}
}
@media (max-width: 1140px) and (min-width: 1019px) {
.td-rec-hide-on-tl {
display: none;
}
}
@media (min-width: 1140px) {
.td-rec-hide-on-m {
display: none;
}
}Hope this helps!
Thanks
Thanks Lucian.
I will give this a try – looks like this will be effective in hiding the ad but will using display: none; still allow the dfp ad to count an impression?
ie. does this trick effectively stop DFP from firing an impression OR does it simply hide the ad?
Thanks for your help!
Tutorial is here: https://forum.tagdiv.com/topic/tutorial-responsive-ads-with-google-dfp/
Thank you for sharing @Pedropapito!
This allows for different ad sizes on different devices – which may be what I’m looking for if I think it through.
Ultimately I’m looking to display an ad in 2 different places – depending on device – so that a 300×250 on the sidebar has better visibility when reformatted for a mobile phone. Here is what I’m thinking (but there may be an easier way than this).
Two ad units, lets call them 300x250_desktop and 300x25_mobile.
300x250_desktop gets placed in the sidebar – it is visible when viewed on tablet / desktop but NOT on mobile.
300x250_mobile is placed Article Inline – it is NOT visible on tablet / desktop but it is visible on mobile.
So effectively only one 300×250 ad unit displays at a time depending on whether it is viewed on desktop or mobile phone.
Can your code example handle this scenario with 2 versions of the same ad size (once again, they can be set up as different ad units)?
Ultimately I’m looking for something like:
If display is mobile, show here (article_inline) else show here (sidebar) … this would be super-simple cause I wouldn’t have to have two ad units – just one that gets executed in different spots depending on the device.
Apologies – I’m probably confusing this too much.
I just wish the theme ad toggle buttons worked for DFP as they do for AdSense because I know exactly how to achieve what I’m going for đ
