CUSTOM JAVASCRIPT:
<script type='text/javascript'>
var gptadslots=[];
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script type='text/javascript'>
googletag.cmd.push(function() {
var mapping1 = googletag.sizeMapping().
addSize([1024,768], [728,90]).
addSize([980,690], [728,90]).
addSize([640,480], [468,60]).
addSize([0,0], [320,50]).
build();
var mapping2 = googletag.sizeMapping().
addSize([1024,768], [300,600]).
addSize([980,690], [300,600]).
addSize([640,480], [200,200]).
addSize([0,0], [300,250]).
build();
//TOP
gptadslots[1]= googletag.defineSlot('/XXXXXXX/XXXXXXX', [[320, 50], [468, 60], [728, 90]], 'div-gpt-ad-XXXXXXXXXXXXX-X').defineSizeMapping(mapping1).addService(googletag.pubads());
//SIDEBAR
gptadslots[2]= googletag.defineSlot('/YYYYYYY/YYYYYYY', [[300,250],[200,200],[300, 600]], 'div-gpt-ad-YYYYYYYYYYYYY-Y').defineSizeMapping(mapping2).addService(googletag.pubads());
googletag.pubads().enableAsyncRendering();
googletag.enableServices();
});
</script>
HEADER AD:
<!-- /XXXXXXX/XXXXXXX -->
<div id='div-gpt-ad-XXXXXXXXXXXXX-X'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-XXXXXXXXXXXXX-X'); });
</script>
</div>
SIDEBAR AD:
<!-- /YYYYYYY/YYYYYYY -->
<div id='div-gpt-ad-YYYYYYYYYYYYY-Y'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-YYYYYYYYYYYYY-Y'); });
</script>
</div>
Do not forget to set the sizes of ad blocks on Google DFP.
Thanks- but could you get background ads to show up? I’m having trouble getting that to work
I have not tested with background ads.
Hi @Pedropapito –
I’ve tried getting this going multiple times and I’m still having issues setting it up… Can you confirm that this still works for you?
Cheers. Dale
I kept trying and did eventually get it going… I’m getting a bit of weirdness in the middle sizes though… I’d like to go with 728×90 >> 320×50 (without the 468×60) — I’ll have to play around with it a bit more I guess.
Right now I’m getting some the odd refresh with no ad served at all.
I wonder if it’s because I’ve added the main javascript into the ANALYTICS section (so it goes into the <head> instead of into the CUSTOM JAVASCRIPT section which puts the code in the footer)… maybe I should just add the script right into header.php
Thanks for this tutorial
On a given page, how would you recommend we serve different ads depending on whether it’s a desktop or mobile device? (i.e. prevent the code from running, and not just hiding / displaying the unit)
@temporary_saint, whats the best way to integrate DFP with newspaper after your trial and error?
Or anyone else thats used DFP with newspaper, there are some threads of issues, just would like to integrate with the best practices?
I ended up going with AdGlare (http://adglare.com) for ad serving which turned out to be much more flexible for my needs.
For one, the ads scale in size, so they look great and proportional on all devices.
Secondly, I was able to show ads in different places, depending on the screen size… meaning I could have a box ad in the sidebar when on desktop or tablet, but then have it jump into the content when on mobile (so that it didn’t end up with the sidebar waaaaaaay down at the bottom).
AdGlare all the way! 🙂
@temporary_saint, were you able to get demand partner SSP/exchanges working within adglare? Took a look at their demo which seems to only show adsense backfill. Do you run DFP in parallel and take DFPs ad tag and put into adglare?
If you are just using adsense as demand, then tagdivs theme out the box does this by using responsive adsense ad tags:
For one, the ads scale in size, so they look great and proportional on all devices.
and this if you customize what size you want by width within the theme panel options
Secondly, I was able to show ads in different places, depending on the screen size… meaning I could have a box ad in the sidebar when on desktop or tablet, but then have it jump into the content when on mobile (so that it didn’t end up with the sidebar waaaaaaay down at the bottom).
No, I only run ads we’ve sold ourselves, so my experience may be very different than yours.
Hello,
I tried the tutorial on this page. It did not work. I put the JS-Part in the “Custom Code” part of the theme settings (without <script>-Tags and with links to my DFP-account) and the custom code for the ad spaces into the “Ads” part of the theme settings. What happened was:
* The ads did not show on the site
Google Console showed “Ad unit did not fetch. Ad unit did not render. Ad fetch count: 0 Iframe type: none”
Google console showed no errors in the page request tab but 2 warnings: “Ad unit failed to fetch” for each ad space
The sidebar ad space at the console seems to overlap the sidebar
I’ve pasted the code (JS header and ad spaces) into an empty document and it worked perfectly
So did anyone have similar experiences or know what to do?
Kind regards from Vienna,
Herwig
An important detail I forgot to change the tutorial. For me, add the code in “custom code” did not work. Instead, I put the code in “Analytics” (yes, the same place where it is placed the google analytics code) and how it works for me.
Hi @pedropapito, the code is the one generated by “generate tags” in DFP?
I have no idea how to set this up? Can anyone help me with a more basic and easygoing step-by-step guide?
I eventually gave up on DFP and started using AdGlare for serving ads, which allows the ads to scale naturally on mobile devices. Works perfectly for us.
Today I realize that there have been no explanations for this method. I apologize. This code will not resize the banner, making it responsive, but will identify the screen size, and will return the appropriate banner for the screen size. For this you will need to create different banner size. For example: Header Ad, you need to send a 320×50 mobile banner, a 468×60 tablet and 728×90 desktop. Remembering that DFP is a pretty complex system, and you need to master it to know how to do this.
Here’s how to work on my website: http://www.clickcamboriu.com.br/
Try opening it in different screen sizes and see how it works perfectly.
Review the source code.
Cant really get mine to work.. Inline and Top also bellow
For example: https://villalivet.se/villaplaytv/kokstrender-var-fargerna-ar-tillbaka/
It works in the header but not on the other places.
Can I use the same script for all places?
<!– /97XXXXX7/XXXXXX –>
<div id=’div-gpt-ad-1XXXXX-XX’ style=’height:90px; width:728px;’>
<script>
googletag.cmd.push(function() { googletag.display(‘div-gpt-ad-XXXX-XX’); });
</script>
</div>
Hello
i have some question about dfp, but i would like to send it to you by email.
Can you provide me one?
thank you
Hello valkiradoo,
DFP ads have not been tested with our theme and based on our user experience, they require an extra implementation to work properly.
Please follow this topic: https://forum.tagdiv.com/topic/tutorial-responsive-ads-with-google-dfp/
This represents customization though and is not covered by the theme support.
Thank you!
Actualy that was question for @pedropapito
Fact that you have no experience and support about dfp in your theme sounds for me like you never used mobile phone in 2017….
It’s not so big deal and you should have solution for it ASAP, now, for us users some things with code must be done manually, and when you update theme all goes to hell…
is the tutorial still current and work it? If yes where do I implmanate the code? Also in the header.php?
I’ve install DFP on my website but I have the problem that the ads are not responsive…
How can I fix it?
Thank you!
Hi,
Your website is so perfect for DFP. I have tried everything but my ad slot goes empty.
Thanks
