XF 1.4 Adsense - Different size in "Above Content" on forum_index

[DaveL]

Just working my way through @Brogan great adsense for responsive design tutorial.

One problem I do have is that when im in landscape mode on my tablet viewing a thread or something similar, the 728x90 banner looks fine. The only issue is in the forum list where the 728x90 dosent work properly because of the sidebar.

Forum Index


Looks fine elsewhere


The only way of partially solving this is if I up the minimum to 1000

if (width > 1000) {
google_ad_slot = "12345689";
google_ad_width = 728;
google_ad_height = 90;
}

Which makes it look fine on the forum index, but the downside being is that only 468x60 banners are shown elsewhere and they look too small.

Anyone else had this issue, if so, how did you overcome it?

 

[Paul B]

You need to use <xen:if is="{$sidebar}"> in your ad template code, serving different (sized) ads for pages with and without a sidebar.

 

[DaveL]

You need to use <xen:if is="{$sidebar}"> in your ad template code, serving different (sized) ads for pages with and without a sidebar.

Thanks Brogan.

Sorry to be a pain, but where would I insert that in this code?

<xen:if is="!{xen:helper ismemberof, $visitor, 7,4,6}">
<div style="text-align: center; padding: 4px 0 2px 0; border: 1px solid @primaryLighterStill">


<xen:if is="!{xen:helper ismemberof, $visitor, 7,4,6}">
<div style="text-align: center; padding: 4px 0 2px 0; border: 1px solid @primaryLighterStill">


<center><script type="text/javascript">
    google_ad_client = "ca-pub-xxxxxxxxxxx";
    width = document.documentElement.clientWidth;
    google_ad_slot = "123456789";
    google_ad_width = 320;
    google_ad_height = 100;
  
    if (width > 483) {
    google_ad_slot = "123456789";
    google_ad_width = 468;
    google_ad_height = 60;
    }
  
    if (width > 1000) {
     google_ad_slot = "123456789";
     google_ad_width = 728;
     google_ad_height = 90;
    }
  
</script>
<!-- AC2015 - Above Content - 320x100 -->
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script></center>


</div>
</xen:if>

Also, by making the ad smaller if a sidebar is detected, would that have implications for people using desktops? 728x90 obviously works fine on a desktop with a sidebar - wouldnt want it making the ad smaller in that situation because it has detected the sidebar.

 

[Paul B]

If you use that conditional statement and there is a sidebar on the page, it will process the code inside the statement, regardless of whether it is a desktop or mobile.

XenForo does not detect devices, it uses browser width to determine how content is laid out.
That applies equally to all devices.

In its simplest form:

<xen:if is="{$sidebar}">
    Ad 1
</xen else />
    Ad 2
</xen:if>

You will need to build that in to your existing template code.

 

[DaveL]

If you use that conditional statement and there is a sidebar on the page, it will process the code inside the statement, regardless of whether it is a desktop or mobile.

XenForo does not detect devices, it uses browser width to determine how content is laid out.
That applies equally to all devices.

In its simplest form:

<xen:if is="{$sidebar}">
    Ad 1
</xen else />
    Ad 2
</xen:if>

You will need to build that in to your existing template code.

Sorry Brogan, I can see the logic in your conditional, but its totally thrown me. How would I combine that with your responsive adsense code so it defines the widths?

 

[DaveL]

@Brogan Is there any chance you could give a very brief example of how you would use the conditional along with your responsive code please.

 

[Paul B]

This is my ad_below_top_breadcrumb template.

<xen:hook name="ad_below_top_breadcrumb" />

<style type="text/css">
.below-top-breadcrumb-with-sidebar-dynamic {
width: 234px;
height: 60px;
}

@media(min-width: 346px) {
    .below-top-breadcrumb-with-sidebar-dynamic {
    width: 320px;
    height: 50px;
    }
}

@media(min-width: 494px) {
    .below-top-breadcrumb-with-sidebar-dynamic {
    width: 468px;
    height: 60px;
    }
}

.below-top-breadcrumb-no-sidebar-dynamic {
width: 234px;
height: 60px;
}

@media(min-width: 346px) {
    .below-top-breadcrumb-no-sidebar-dynamic {
    width: 320px;
    height: 50px;
    }
}

@media(min-width: 494px) {
    .below-top-breadcrumb-no-sidebar-dynamic {
    width: 468px;
    height: 60px;
    }
}

@media(min-width: 754px) {
    .below-top-breadcrumb-no-sidebar-dynamic {
    width: 728px;
    height: 90px;
    }
}
</style>

<xen:if is="!{$visitor.user_id}">
    <xen:if is="!in_array({$contentTemplate}, array('', 'cta_featuredthreads_featured', 'message_page', 'error', 'search_form', 'search_form_post', 'search_form_profile_post', 'search_results', 'register_form', 'register_facebook', 'register_twitter', 'register_google', 'login', 'error_with_login', 'contact', 'thread_view', 'cta_overtaking_index'))">
        <xen:if is="@enableResponsive">
            <xen:if is="{$sidebar}">
                <div style="text-align: center; padding: 8px 0">
                    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                    <!-- Below Top Breadcrumb (With Sidebar) - Dynamic -->
                    <ins class="adsbygoogle below-top-breadcrumb-with-sidebar-dynamic"
                         style="display:inline-block"
                         data-ad-client="ca-pub-***"
                         data-ad-slot="***"></ins>
                    <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
            <xen:else />
                <div style="text-align: center; padding: 8px 0">
                    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                    <!-- Below Top Breadcrumb (No Sidebar) - Dynamic -->
                    <ins class="adsbygoogle below-top-breadcrumb-no-sidebar-dynamic"
                         style="display:inline-block"
                         data-ad-client="ca-pub-***"
                         data-ad-slot="***"></ins>
                    <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
            </xen:if>
        <xen:else />
            <xen:if is="{$sidebar}">
                <div style="text-align: center; padding: 8px 0">
                    <script type="text/javascript">
                    google_ad_client = "ca-pub-***";
                        /* Below Top Breadcrumb Narrow */
                        google_ad_slot = "***";
                        google_ad_width = 468;
                        google_ad_height = 60;
                    </script>
                    <script type="text/javascript"
                    src="//pagead2.googlesyndication.com/pagead/show_ads.js">
                    </script>
                </div>
            <xen:else />
                <div style="text-align: center; padding: 8px 0">
                    <script type="text/javascript">
                    google_ad_client = "ca-pub-***";           
                            /* Below Top Breadcrumb Wide */
                            google_ad_slot = "***";
                            google_ad_width = 728;
                            google_ad_height = 90;
                    </script>
                    <script type="text/javascript"
                    src="//pagead2.googlesyndication.com/pagead/show_ads.js">
                    </script>
                </div>
            </xen:if>           
        </xen:if>
    </xen:if>
</xen:if>

You can use that as a guide and adapt it to suit your site/needs.

 

[DaveL]

Thanks. I had already seen that when I was searching, but that's for dynamic adsense.

@Brogan Will I need to alter all my current code, or just the code which relates to the 728x90 banner? As that's the only part causing the issue. Would I put the conditional statement within the current code or have to have it separate?

 

[Paul B]

but that's for dynamic adsense.

It's for both.

There is a section for responsive and one for non responsive.

 

[DaveL]

Ah brilliant, just saw that at the bottom of the code. Will have a play when I get in from work.

It's for both.

There is a section for responsive and one for non responsive.