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>
Related
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>
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 wondering how one would go about creating different ad / creative sizes for different browser widths / screen resolutions in DFP. I found this DFP article regarding this issue, but it was specifically for mobile users, and they do not give any code, rather just a method. Here is the article:
http://support.google.com/dfp_premium/bin/answer.py?hl=en&answer=2615435
In it they give a code method that looks like this:
if screen size < 300px
ad tag size = 216
else if screen size < 600px
ad tag size = 300
else
ad tag size = 600
But this article was for mobile ads only. :( Here is a jsfiddle of my ad image: http://jsfiddle.net/EptwH/3/
If anyone could inform me on whether or not there is a method to have multiple creative/ad sizes for different browser widths, that would be amazing. And one more thing to add, I do not COMPLETELY want to change the ad dimensions, the ratio will stay the same... so for example, I'd like a 100x50 ad, then a 200x100, then a 300x150, then a 400x200 etc. If anyone could help me out, or let me know if this is even possible....that would be amazing!
If you see the JS code that DFP asks you to embed into your page, they are split into three "phases" :
first you define the available slots on the page
second you enable the service
third you ask the slots to be filled.
In the very first step, you can have some conditional code. So you could replace this statement :
googletag.defineSlot('/1234567/my_slot', [728, 90], 'gpt-apps-large').addService(googletag.pubads());
with a conditional :
if(window.width>728) {
googletag.defineSlot('/1234567/my_slot', [728, 90], 'gpt-apps-large').addService(googletag.pubads());
} else {
googletag.defineSlot('/1234567/my_slot', [468, 60], 'gpt-apps-large').addService(googletag.pubads());
}
Edit: Bonus tip -- use the information here https://support.google.com/dfp_sb/bin/answer.py?hl=en&answer=181070 to debug your ad delivery.
For me simple window.width no working, but this good:
if(window.innerWidth>728) {
googletag.defineSlot('/1234567/my_slot', [728, 90], 'gpt-apps-large').addService(googletag.pubads());
} else {
googletag.defineSlot('/1234567/my_slot', [468, 60], 'gpt-apps-large').addService(googletag.pubads());
}
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.