Custom code for ads in header emplate

Hello,

I’m using the header coming with the default layout of Newspaper. To place the ads in the header I’m using Revive adserver. I have written a script, that checks the size of the ad-area and inserts the necessary Revive banner-code for desktop/tablet/mobile.

Here is the code:

<div id="revive-ad-header" style="display: block; text-align: center;">
<script type="text/javascript">
adUnit = document.getElementById("revive-ad-header");
adWidth = adUnit.offsetWidth;
if ( adWidth >= 728 ) {
/* Leaderboard 728x90 */
adUnit.innerHTML = '<ins data-revive-zoneid="1" data-revive-id="a7d099fe9a8c6365a11a9e0b369"></ins>';
} else if (adWidth <= 720 && adWidth >= 468) {
/* Banner 468x60 */
adUnit.innerHTML = '<ins data-revive-zoneid="2" data-revive-id="a7d099fe9a8c6a11a9e0b369"></ins>';
} else {
/* Mobile Banner 320x50 */
adUnit.innerHTML = '<ins data-revive-zoneid="3" data-revive-id="a7d099fe9a8c365a11a9e0b369"></ins>';
}
</script>
<script async src="//www.webserverdomain.de/www/delivery/asyncjs.php"></script>
</div>


This works perfectly.

I now wanted to switch to a header template. The ad-setting for the ad-area is “Use adspot from: header” so I thought this would be it.

But no ads are shown in my header. The variable adWidth always returns 0 and adUnit.innerHTML has no effect.

So I switched to the “Custom ad” and entered the code in the box there. But this doesn’t work either.

What might be the problem, that the code works perfectly with the default header but not within a header-template?

Hello,
or asked as a simpler question: How can I add different banner sizes for desktop/tablet/mobile in a header-template ad-area if I don’t use Goggle Adsense nor just graphical banners?

Hello Calin,
method 1 with the ad box does not work, that’s what I already tried.

For the second method: Does Newspaper only deliver the appropriate code for the device or does it just hide (via CSS) the non appropriate code? I’m asking to make sure that only one ad is delivered. Otherwise it would call also the hidden banners, which would not be optimal.

Hello Calin,
I found out myself, that method 2 works visually, but it just sets the non appropriate div-Elements as hidden, which is a bad solution. So in the background the adserver still serves 4 ads but displays only one. I need a solution where only one appropriate ad is served. All other solution destroy the click-statistic of my ads. And it makes the html-code unnecessarily big.

Hello Calin,
it’s not about Revive. It’s just about a JavaScript. I need a working JavaScript do set different code for different devices. Like:

<div id="ad_area" style="display: block; text-align: center;">
<script type="text/javascript">
adUnit = document.getElementById("ad_area");
adWidth = adUnit.offsetWidth;
if ( adWidth >= 728 ) {
/* Leaderboard 728x90 */
adUnit.innerHTML = '<b>Banner1</b>';
} else if (adWidth <= 720 && adWidth >= 468) {
/* Banner 468x60 */
adUnit.innerHTML = '<b>Banner2</b>';
} else {
/* Mobile Banner 320x50 */
adUnit.innerHTML = '<b>Banner3</b>';
}
</script>
</div>

This code works with the default header but not with a custom header.

• This reply was modified 6 years by be2name.
• This reply was modified 6 years by be2name.

Hello Calin,
thank you for pointing me to the Google-documentation. I was now able to generate an appropriate Google-code and deliver it with Revive. This works. For those who are interested, this is the Google-code (replace ad-client and ad-slot):

<style type="text/css">
.header_ad1 { width:320px; max-height:50px; }
@media(min-width:768px) { .header_ad1 { width:468px; height:60px; } }
@media(min-width:1141px) { .header_ad1 { width:728px; height:90px; } }
</style>
<ins class="adsbygoogle header_ad1"
style="display:inline-block;"
data-ad-client="ca-pub-xxxxx"
data-ad-slot="xxxxxx"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Important: Although the mobile banner size is defined, there is a setting in Google adsense, that Google will still alter mobile ads. You have to disable this option.