I'm working on my responsive design but having trouble with adsense.
I have an ad which should show up on the desktop design, but not on the mobile design.
So the code of the ad should be placed in the html only if the website is viewed on a desktop.
It's possible with css using display: none, but this is against adsense TOS, so not a solution.
I think it's possible with a PHP class like http://mobiledetect.net but I prefer to check the browser width and then decide what to do.
Adsense has an approved example as below, but can I use it for my goal?
<script type="text/javascript">
google_ad_client = "ca-publisher-id";
width = document.documentElement.clientWidth;
google_ad_slot = "1234567890";
google_ad_width = 320;
google_ad_height = 50;
if (width > 500) {
google_ad_slot = "3456789012";
google_ad_width = 468;
google_ad_height = 60;
}
if (width > 800) {
google_ad_slot = "2345678901";
google_ad_width = 728;
google_ad_height = 90;
}
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
I hope someone can point me in the right direction.
I've contacted the Dutch AdSense support team and got a surprising answer, which I haven't found on the internet yet.
Apparently it is allowed to use display:none when using responsive adsense code.
Here is the code that someone from the support team sent to me:
<style>
.responsive-test { display: block;}
#media(max-width: 480px) { .responsive-test { display: none; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Resposive_TEST -->
<ins class="adsbygoogle responsive-test"
data-ad-client="ca-pub-3086914080036003"
data-ad-slot="1408862175"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Note that it's only allowed when using the responsive adsense code!
I expressed my concerns about the method he sent me, because of the ad implementation policies, which clearly state that display:none has to be avoided. He thinks this article is outdated for the new responsive ads.
He asked one of his colleagues, and also confirmed that the above code is allowed. Although, I still want someone from the community or other AdSense support team to confirm, just to make sure! :D
You can try something like this to avoid loading the JS on mobile but you should confirm with your AdSense manager if this change is allowed or now.
if (width >= 480) {
document.write('<script src="show_ads.js"><\/script>');
}
You could try the approach by Labnol Google adsense responsive design , Google Approved
Related
I want to disable popups for mobile visitors, how can i do that?
Is it possible to change the popads.net adcode in order to not show popups in mobile visitors?
<!-- PopAds - Home Popunder Code for Official lap times from Auto Magazines & Manufacturers | 2016-12-13,1627132,0,0 -->
<script type="text/javascript" data-cfasync="false">
//<![CDATA[
(function(){ var f=window;f["\x5f\x70o\x70"]=[["\x73iteI\u0064",1627132],["\x6di\u006eBi\u0064",0],["\x70\x6fp\u0075nd\x65r\x73\x50\x65\u0072\u0049\x50",0],["\u0064el\u0061y\u0042\u0065\x74w\u0065\u0065n",0],["de\u0066au\x6ct",false],["de\u0066\u0061\u0075\u006c\x74\x50\u0065\u0072\u0044\x61\u0079",0],["t\x6f\x70m\u006fstLaye\u0072",!0]];var m=["\u002f/c1.\x70o\x70\u0061\u0064\x73\x2e\u006e\x65\u0074/\u0070\u006fp\x2e\x6as","\x2f\u002fc\u0032.p\u006f\u0070\x61\x64\u0073\u002en\x65\x74\u002f\x70\u006f\u0070\x2e\x6a\u0073","/\x2f\x77w\x77.\x69n\u0073b\x72\x76w\u0066r\x63\u0067b\u002e\x63\x6f\x6d\x2f\u0076\x75\u0074k.js","\x2f/\u0077\u0077\x77.\u006etn\x6c\x61w\x67c\u0068\x67ds\x2e\u0063\x6f\x6d/d\x2e\x6a\x73",""],t=0,j,g=function(){if(""==m[t])return;j=f["\u0064ocu\x6d\u0065nt"]["\x63\x72\u0065\x61\x74\u0065E\x6c\u0065\x6de\u006et"]("\u0073\x63r\x69\x70\x74");j["\x74\x79pe"]="\x74\u0065\u0078t/\x6a\u0061\x76\x61sc\x72\u0069p\u0074";j["\u0061\x73yn\x63"]=!0;var s=f["\x64\x6fc\x75me\x6e\x74"]["\x67\x65\u0074\u0045l\u0065\u006den\x74\u0073\u0042y\x54\x61\u0067\u004e\u0061\x6d\x65"]("s\u0063\x72\u0069\u0070\x74")[0];j["s\u0072\x63"]=m[t];if(t<2){j["c\u0072o\x73\x73\u004f\u0072\u0069\u0067\u0069\x6e"]="\x61n\u006fn\x79\x6do\x75\x73";};j["\u006fne\u0072ro\x72"]=function(){t++;g()};s["\u0070\u0061\u0072\x65\x6e\x74Nod\u0065"]["\u0069n\u0073\x65\u0072\u0074\u0042\x65f\x6fre"](j,s)};g()})();
//]]>
</script>
You could avoid browser checking by only running the ads when the screen exceeds a certain size:
if (screen.width > 800 || screen.height > 800) {
// load some ads
(function () {
// paste your ad code here
})()
} else {
// do other stuff instead
}
If you want to check only the size of the available space on the screen, you can use the availHeight and availWidth properties instead.
I have a javascript ad code that I only want to show on lets say devices 600px and smaller. For bigger screens I have an iframe ad. I've read so much and can't find a similar example.
Here's the javascript I need for smaller screens
<script type="text/javascript">
ad_idzone = "39483984";
ad_width = "300";
ad_height = "100";
</script>
<script type="text/javascript" src="https://ads.exoclick.com/ads.js"></script>
<noscript><img src="https://syndication.exoclick.com/ads-iframe-display.php?idzone=39483984&output=img&type=300x100" width="300" height="100"></noscript>
I've read about all types of ways like this but it's not going to work obviously and I'm not very experienced. Any suggestions?
<script type="text/javascript">
if (screen.width<500){
//if screen width less than 500px it's probably a mobile device
// so do this code...
}
else{
// screen wider than 500 pixels
// then do this code
}
</script>
You can try to append the javascript file for your ad on smaller screens using javascript.
<script>
if (screen.width < 500) {
var myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');
myScript.setAttribute('src', 'https://ads.exoclick.com/ads.js');
document.getElementsByTagName('head').item(0).appendChild(myScript);
} else {
showMyIframeAd();
}
</script>
Complete beginner (hobbyist) here so this is probably a total noob question.
I have two javascripts. One is for mobile users, other is for desktop users.
Right now I have in my html:
<script type="text/javascript"
src="../java_file.js">
</script>
It works wonderfully but I want to have a different js file run when screen width is less than 480.
I want to do something along these lines:
<script type="text/javascript"
if (screen.width < 480) {
src=".../java_file_mobile.js">
}
else {
src=".../java_file.js">
}
</script>
This is my first time building a site and I'm learning the code as I go. Any assistance would be great. Thanks!
If you only care about the screen width the simplest approach is to use JavaScript offsetWidth.
var w = document.body.offsetWidth;
if ( 480 > w ) {
//append mobile script
} else {
//append desktop script
}
Beaver though, a small offsetWidth could also just mean a narrow browser window on a desktop screen. Or a watch. Or a fridge. You get the idea...
I'm trying to use Google Publisher Tags (GPT) to display responsive ads, following Google's guide. I tried to copy their example as closely as possible, but my ads are not showing up on my page at any viewport size. I stripped everything down to the simplest example possible (one ad size for desktops), but even that ad won't show up.
Everything is fine if I get rid of the extra size mapping code (I've replaced my DFP ad slot info in the code example below, but I can assure you that I have that much right).
Does anyone have any idea what I might be doing wrong? Thanks!
<script src="http://www.googletagservices.com/tag/js/gpt.js"></script>
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
googletag.cmd.push(function() {
var mapping = googletag.sizeMapping().
addSize([1024, 768 ], [728, 90]). // Should work for desktops
build();
googletag.defineSlot('/######/ad-slot-name', [728, 90], "acm-ad-tag-728x90_top").
defineSizeMapping(mapping).
addService(googletag.pubads());
googletag.enableServices();
});
</script>
Your code looks ok - one thing, is that the only ad tag you have on the page? If you have more than one ad tag it seems that you have to add mappings for every single one, even if not all of the ad units need to be responsive. I couldn't get this technique to work consistently until defining size mappings for all ad slots on the page.
Beyond that, presumably you're sure the browser width and height criteria are being met? You can check this if you use Firefox's 'Responsive Design View' (ctrl-shift-m on Windows or 'Web Developer' > 'Responsive Design View' on the main Firefox menu). Do you see anything in the DFP console (warnings, errors)?
I have this working consistently, displaying a range of ad sizes and switching ad units on and off in certain circumstances - I put a short description online, although I don't think there's anything there that you're missing.
this is my solution how i make my dfp tags responsive
var width = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
if (width >= 768) {
document.write("<!-- SPM_728x90_HEAD_PT -->");
document.write("<div id='div-gpt-ad-1425863369744-6'> ");
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1425863369744-6'); });
document.write("</div>");
}
else if ((width >= 480) && (width < 768)) {
document.write("<!-- /11111111/SPM_468x60_HEAD_T -->");
document.write("<div id='div-gpt-ad-1450193161892-0'> ");
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1450193161892-0'); });
document.write("</div>");
}
else if(width<=479){
document.write("<!-- /11111111/SPM_320x50_HEAD_M -->");
document.write("<div id='div-gpt-ad-1450193161892-1'> ");
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1450193161892-1'); });
document.write("</div>");
}
</script>
It seems ads somehow conflict which each other. Normally I have 2 ads displaying at the same time with no issues, but on search pages I have 3 ads and most of the time only the first works.
http://chusmix.com/?s=Buenos+Aires
I simply copy pasted the code in the three places:
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7097762525948790";
/* Chusmix 728x90 Grafico */
google_ad_slot = "9872841053";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
The other ads code is basically the same save with different width, height and name. Did I do something wrong? Any idea how to fix it?
Thanks
On one of those ads you're inserting some HTML in between the JavaScript, don't do that. Always wrap HTML around the complete ad code.
Also, realize that not all ad units may be filled if there aren't enough ads. That's why you need to use the alternate ad URL feature of AdSense to display something else in its place in those cases.