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>
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.
In this post What is the best way to detect a mobile device in jQuery? I found this code:
function detectmob() {
if(window.innerWidth <= 800 && window.innerHeight <= 600) {
return true;
} else {
return false;
}
}
I have a web site that passes Googles test for "mobile friendly" with out any pop ups for my newsletter / e-courses.
I tried the above script and it will run the scitps, however do to the size of the pop up blocks the form is too large.
I would like to block the script to keep the pop up from displaying, I tried to resize the block but when I do that it become unreadable for a device with a screen size smaller than 400 pixels.
Any help would be greatly appreciated.
CSS:
#mobile-only{
display:none;
}
HTML:
<div id="mobile-only">
<script async type="text/javascript" src="http://forms.aweber.com/form/19/37402019.js"></script>
</div>
The java script is a form that will display after 10 second delay, the form is 800x800 pixels, this is very large for most mobile devices, the reader can not scroll the form to the right to touch the 'x' to close the form.
After testing the CSS and the HTML the script still runs.
Please see the below code and attempt it.
$(document).ready(function(){
var x = $(window).width();
if(x >= 400)
{
$('#mobile-only').append('<script async type="text/javascript" src="http://forms.aweber.com/form/19/37402019.js"></script>');
};
});
Things To Consider
Now if you want to worry about what to do if the user resizes the window on his desktop, you can either handle these events using the following items for help:
onresize
.resize()
Media Queries
I hope this helps!
Using the above code by A.Sharma I modified it like this:
<script>
$(document).ready(function(){
var x = $(window).width();
if(x >= 400)
{
$('#desktop-only').append('async type="text/javascript" src="http://forms.aweber.com/form/19/37402019.js"');
}
)};
</script>
Where '#desktop-only' is the CSS container for any desktop content that either will not fit on a mobile device (tables, large hi res images, etc.) or will fill the screen past the accepable limitations of the device.
This code does not run, however it looks like the best way to block javascript from running.
Any suggesitons for modification to make it run?
Thanks!
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 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
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>