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

DaveL

DaveL

Well-known member
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
Screenshot_2015-01-06-13-04-19.webp

Looks fine elsewhere
Screenshot_2015-01-06-13-04-36.webp

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;
}
Click to expand...

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?
 
Sort by date Sort by votes
You need to use <xen:if is="{$sidebar}"> in your ad template code, serving different (sized) ads for pages with and without a sidebar.
 
Upvote 0 Downvote
Brogan said:
You need to use <xen:if is="{$sidebar}"> in your ad template code, serving different (sized) ads for pages with and without a sidebar.
Click to expand...
Thanks Brogan.

Sorry to be a pain, but where would I insert that in this code?
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.
 
Upvote 0 Downvote
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:
Code: 
<xen:if is="{$sidebar}">
    Ad 1
</xen else />
    Ad 2
</xen:if>

You will need to build that in to your existing template code.
 
Upvote 0 Downvote
Brogan said:
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:
Code: 
<xen:if is="{$sidebar}">
    Ad 1
</xen else />
    Ad 2
</xen:if>

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

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?
 
Upvote 0 Downvote
This is my ad_below_top_breadcrumb template.

Code: 
<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.
 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
You must log in or register to reply here.
Back
Top Bottom