1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Adsense conditionals based on Browser Size

Discussion in 'Styling and Customization Questions' started by tajhay, Jan 13, 2014.

  1. tajhay

    tajhay Well-Known Member

    Just wondering if anyone is able to assist me on this query.

    I have the following code, which by large works.

    <xen:if is="{$visitor.user_id}">
    <div style="text-align: center; padding: 8px 0 4px 0; border-bottom: 1px solid @primaryLighterStill">
                <script type="text/javascript">
                google_ad_client = "ca-pub-1111111111111111111";
                width = document.documentElement.clientWidth;
                    if ((width < 800) && (width > 550)) {
                    google_ad_slot = "9999999999";
                    google_ad_width = 468;
                    google_ad_height = 60;
                       if (width < 549) {
                        google_ad_slot = "9999999999";
                        google_ad_width = 320;
                        google_ad_height = 50;
                <script type="text/javascript"
    So basically what this code does is :
    - Check if the person viewing the content is a logged in user. If the viewer is the logged in user, then show them the google ad.
    - The google ad displayed to them is based on their browser width. So if they are using a tablet, i am displaying them a google ad that is 468*60. If the user is using a mobile phone, a google ad that is displayed to them is 230*50.

    The problem is that for widths over 800, a google ad is still being shown, a very small one at that. Example of what is being shown on desktop view is as follows:

    Anyone got any ideas on how i can modify my code so that no google ad gets displayed for users who are logged in, and are using desktops with a width over 800?
  2. JulianD

    JulianD Well-Known Member

    Use the new responsive ad. That's all you need.
  3. tajhay

    tajhay Well-Known Member

    If you read my thread, you will notice that is not what i need. I do not want to display ads if the browser width is higher than 800.
  4. Da Bookie Mon

    Da Bookie Mon Well-Known Member

    if (width >! 801) {
  5. tajhay

    tajhay Well-Known Member

    That conditional will simply result in not passing any values to the parameters :

    The javascript will still be called, so not really a solution as it goes against adsense TOS.
  6. JulianD

    JulianD Well-Known Member

    This works but I think you would be breaking the AdSense TOS. I didn't implement your own dimensions, I just used one of my own ads and added the conditional to hide the ad when the browser width is greater than 800px.

    .myad { width: 320px; height: 50px; }
    @media(min-width: 500px) { .myad { width: 468px; height: 60px; } }
    @media(min-width: 800px) { .myad { width: 728px; height: 90px; } }
    @media(min-width: 801px) { .myad { display: none !important; } }
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- myad -->
    <ins class="adsbygoogle ldcads-responsive-below"
    (adsbygoogle = window.adsbygoogle || []).push({});
    You have to come up with a solution (mostly using Javascript) to not run the adsense code when your width is > 800px.
  7. Brogan

    Brogan XenForo Moderator Staff Member

    Using display:none is indeed against the AdSense ToS.

Share This Page