CODEWITHSUNDEEP
javascriptresponsive-designadsgoogle-dfp
rbenhase
rbenhase

Reputation: 1

Google DFP Responsive Ads Not Showing Up Using GPT

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>

Upvotes: 0

Views: 4523

Answers (2)

Said Erraoudy
Said Erraoudy

Reputation: 1559

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>

Upvotes: 0

toby1kenobi
toby1kenobi

Reputation: 1691

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.

Upvotes: 1

Related Questions