Hi there,
I have a problem with Google DFP responsive banners integration in the Newsmag theme.
Here there is a test page where my responsive banners work fine (please see http://wp-dev-ntr24-31ba64cdf656650e14f1f97f34ac243d.ntr24.tv/responsive-ntr24-2.html). On this page, if you try to reduce the browser width and also refresh the page, you will see a smaller banner depending on the browser available width. Three banner dimensions are available: 728×90 for PC screen, 468×60 for tablet and 320×50 for smartphone viewport width.
Therefore, I’m trying to implement this behaviour on the theme header leaderboard banner (please see the header ad banner on wp-dev-ntr24-31ba64cdf656650e14f1f97f34ac243d.ntr24.tv).
I’ve added to the Newsmag header.php with the header part of the Google DFP tag:
<script type='text/javascript'>
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() {
// Define a size mapping object. The first parameter to addSize is
// a viewport size, while the second is a list of allowed ad sizes.
var mappingLeaderboard = googletag.sizeMapping().
addSize([1024, 600 ], [728, 90]).
addSize([500, 500 ], [468, 60]).
addSize([1, 1 ], [320, 50]).
build();
// Define the GPT slot
googletag.defineSlot('/6815270/WP_responsive_ads', [[320, 50], [468, 60], [728, 90]], 'div-gpt-ad-1458658040243-0').defineSizeMapping(mappingLeaderboard)
.addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
and I’ve also set-up the body part of Google DFP tag in Theme panel->ADS->Header ad (please see http://screencast.com/t/oxiFsOa6D).
Hereafter the code I’ve added:
<!-- /6815270/WP_responsive_ads -->
<div id='div-gpt-ad-1458658040243-0'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1458658040243-0'); });
</script>
</div>
But when I reduce the browser width I do view this http://screencast.com/t/S0pOFSUPN, and if I reduce more I do wiew this http://screencast.com/t/pczqJeij i.e. the banners aren’t correctly rendered.
How can I obtain the right banner visualization in Newsmag theme? What could be wrong in my settings?
Thanks in advance for any appreciated help.
Giuseppe
Hi
]
Theme’s ad system was intended to work with ad-sense code or banner ads, you can read more about this here: https://forum.tagdiv.com/newsmag-header-ads/ We didn’t tested DFP ads with the theme and I can’t grantee that these ads will work fine on different devices.
Also note that google won’t consider the fact that you’re re-sizing the browser, google deliver ads demanding by the actual devices used, not the browser’s width.
Thanks!
Hi Andrei,
now google DFP “responsive” banner works as you can see here http://wp-dev-ntr24-31ba64cdf656650e14f1f97f34ac243d.ntr24.tv/. Actually, is not a really “responsive” behaviour because it doesn’t adapt the banner size as soon as the browser width changes but, it fetches the right banner size on the page load on the base of the detected browser viewport width. So that, on an Iphone 6 for instance, it loads correctly the 320×50 rather than the 728×90 as would load on a PC screen. The problem of banner sqeeze was your custom CSS code
.td-header-container{ top: 95px; margin-top: 0; }
used to make cliccable the upper part of the skin.
So what could be a the trade-off solution that both make cliccable upper part of the skin and doesn’t cause the banner squeeze problem?
Thanks a lot for your kindness and support on this unexplorated field 🙂
Giuseppe
Hi
Theme’s css works fine on your site even if is re-size the browser window, you just need to refresh the page: http://screencast.com/t/tHj9TtUCe – http://screencast.com/t/BYvfe2wsdFm4 – http://screencast.com/t/5jLNuazkcjYy
I gave you that css to change the header container display in order to have the top part clickable. The css works fine and does not affect the ad’s display.
Keep in mind that all this customizations require lots of tests in order to work fine in all situations. We can’t offer custom work at the moment so if you need custom services and you’rte not aware of the steps you need to take in this regard my advice is a developer or a freelancer to do customize your site for you.
We can offer support for anything related with theme’s functionality, how its features works and if is necessary also we offer fixes for any bug related with the theme. Any other customizations fall beyond the support can offer you.
Thanks for your message and for your understanding!
Hi Andrei,
thank you very much anyway for your availability and kindness.
Now you can see that the CSS works fine because I’ve fixed the top margin in the CSS in a different way. 🙂
Hereafter the code I’ve placed in my style.css (see the lines labelled with /*fix*/ string) and I’ve also removed the suggested custom CSS from theme panel:
/* ----------------------------------------------------------------------------
container
*/
.td-container {
width: 1021px;
margin-right: auto;
margin-left: auto;
margin-top:95px;/*fix*/
border-bottom: 1px solid #e6e6e6;
background-color: white;
position: relative;
clear: both;
z-index: 1;
}
/*
and also here
/* responsive portrait phone */
@media (max-width: 767px) {
/* container */
.td-container {
width: 100%;
margin-top:0px;/*fix*/
}
.td-pb-row {
width: 100% !important;
}
Thank you very much again and hope this can help also someone else.
Giuseppe
Hi there,
I’m trying to place a Google AdSense responsive banner on the top of articles. The Newsmag documentation says only that “the Adsense code should be pasted in the required area”. So I’ve placed the js code generated by Google Adsense responsive ad unit (please see http://screencast.com/t/waoeNd70NW), but the Adsense banner is not shown even if the banner code seems to be generated by the theme and correctly included in the page (please view the source code of the page http://wp-dev-ntr24-31ba64cdf656650e14f1f97f34ac243d.ntr24.tv/2016/03/11/pietrelcina-scoperte-una-carrozzeria-e-unofficina-avviate-senza-la-dovuta-documentazione-denunciati-i-due-titolari/).
Moreover the AdSense code works perfectly as you can see from this test page (please see http://wp-dev-ntr24-31ba64cdf656650e14f1f97f34ac243d.ntr24.tv/test-adsense-banner.html) and/or http://screencast.com/t/VtO3DmHGWSYu
What could be the error?
Thanks in advance for any appreciated help.
Giuseppe
Hi,
I correct myself because now the banner is correctly rendered.
Thanks anyway.
