XF 2.0 Strange adsense problem

[brattanek]

I'm just after upgrade to XF 2. After implementing adsense codes ads I perform tests and:
- mobile ads work in all pages
- desktop ads don't work only in home page (works in other sites)

Code was pasted in Container breadcrumb (top): Above

<div align="center">


<div id="google-ads-1"></div>


<script type="text/javascript">


    /* Calculate the width of available ad space */
    ad = document.getElementById('google-ads-1');


    if (ad.getBoundingClientRect().width) {
        adWidth = ad.getBoundingClientRect().width; // for modern browsers
    } else {
        adWidth = ad.offsetWidth; // for old IE
    }


    /* Replace ca-pub-XXX with your AdSense Publisher ID */
    google_ad_client = "ca-pub-xxxx";


    /* Replace 1234567890 with the AdSense Ad Slot ID */
    google_ad_slot = "xxxxx";
 
    /* Do not change anything after this line */
    if ( adWidth >= 728 )
      google_ad_size = ["750", "200"];  /* Leaderboard 728x90 */
    else if ( adWidth >= 468 )
      google_ad_size = ["468", "60"];  /* Banner (468 x 60) */
    else if ( adWidth >= 336 )
      google_ad_size = ["336", "280"]; /* Large Rectangle (336 x 280) */
    else if ( adWidth >= 300 )
      google_ad_size = ["300", "250"]; /* Medium Rectangle (300 x 250) */
    else if ( adWidth >= 250 )
      google_ad_size = ["250", "250"]; /* Square (250 x 250) */
    else if ( adWidth >= 200 )
      google_ad_size = ["200", "200"]; /* Small Square (200 x 200) */
    else if ( adWidth >= 180 )
      google_ad_size = ["180", "150"]; /* Small Rectangle (180 x 150) */
    else
      google_ad_size = ["125", "125"]; /* Button (125 x 125) */


    document.write (
     '<ins class="adsbygoogle" style="display:inline-block;width:'
      + google_ad_size[0] + 'px;height:'
      + google_ad_size[1] + 'px" data-ad-client="'
      + google_ad_client + '" data-ad-slot="'
      + google_ad_slot + '"></ins>'
    );
 
    (adsbygoogle = window.adsbygoogle || []).push({});


</script>


</div>

i change code for standard one and is the same. The same situation is with ad in sidebar widget.

Any idea why ads not shown in desktop home page? Google block?

 

[MySiteGuy]

Instead of using javascript in the adsense code, why not use css media queries to resize the DIV and use regular responsive adsense code?

 

[brattanek]

Instead of using javascript in the adsense code, why not use css media queries to resize the DIV and use regular responsive adsense code?

can you give me example?

 

[AndyB]

After implementing adsense codes ads I perform tests and:
- mobile ads work in all pages
- desktop ads don't work only in home page (works in other sites)

I also had the same problem. My solution was to use two different ad units, a leader board and Large Mobile Banner. Then switch them using responsive code.

You might like this add-on:

https://xenforo.com/community/resources/ad-manager.6347/

 

[dutchbb]

can you give me example?

You can even use inline css as suggested by adsense.
https://support.google.com/adsense/answer/6307124?hl=en&ref_topic=3641113

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

[MySiteGuy]

This is what Adsense gives you in their control panel for responsive ad units:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

What I do is create css media rules in the extra template (this example has three sizes):

.top_ad
{
	background-color: rgb(245, 245, 255); max-width: 320px; min-width: 320px; width: 320px; max-height: 100px; min-height: 50px; display: block; margin: auto; text-align: center;
}

.top_ad_container
{
	background-color: rgb(245, 245, 255); max-width: 100%; min-width: 320px; width: 100%; max-height: 100px; min-height: 50px; display: inline-block;  margin: auto; text-align: center;
}

@media(min-width: 600px)
{
	.top_ad
	{
		max-width: 468px; min-width: 468xpx; width: 468px; max-height: 60px; min-height: 60px; height: 60px;
	}
	.top_ad_container
	{
		min-width: 468px; max-height: 60px; min-height: 60px; height: 60px;
	}
}

@media(min-width: 1100px)
{
	.top_ad
	{
		max-width: 100%; min-width: 728px; max-height: 90px; min-height: 90px; height: 90px;
	}
	.top_ad_container
	{
		max-width: 100%; min-width: 728px; max-height: 90px; min-height: 90px; height: 90px;
	}
}

Then in the template where the ad should go:

<div class="top_ad_container">
	<div class="top_ad">
Adsense code goes here
	</div>
</div>

The reason I use two DIV's is I've found if done with only one, some browsers no matter what I put in the CSS rules Adsense will left align the ad. Auto-margins, text-align: center, etc. have no effect. Not all the ads, but occasionally. The outer DIV I use is defined as an inline block, the inner as a block.