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

XF 1.2 Responsive Ads Javascript

Discussion in 'XenForo Questions and Support' started by akia, Jul 9, 2013.

  1. akia

    akia Well-Known Member

    I think I might have come up with a solution, as to dealing with the problem of having responsive theme.

    I'm just going to remove the DfP blocks which I've given them all classes depending on when they should be called.

    i've come up with this javascript with I've pieced together from lots of different sources.:

    Code:
    <script type="text/javascript">// <![CDATA[
    var width = window.innerWidth || document.documentElement.clientWidth;
    if (width >= 801) {
    $( document ).ready( function() {
        $( ".tnadsmobile" ).remove()
    });
    $( document ).ready( function() {
        $( ".tnadstablet" ).remove()
    });
    }
    else if ((width >= 481) && (width <= 800)) {
    $( document ).ready( function() {
        $( ".tnadsmobile" ).remove();
    });
    $( document ).ready( function() {
        $( ".tnadsdesktop" ).remove();
    });
    }
    else if (width <= 480) {
    $( document ).ready( function() {
        $( ".tnadsdesktop" ).remove();
    });
    $( document ).ready( function() {
        $( ".tnadstablet" ).remove();
    });
    }
    // ]]></script>
    but could someone who knows about these things give it a once over to make sure I'm doing it properly.
     
  2. Jeremy

    Jeremy XenForo Moderator Staff Member

    I would check with your ads Terms of Service. The above code will give false impressions on certain ads.
     
  3. akia

    akia Well-Known Member

    Right I think I've finally got it:

    Code:
    <script type='text/javascript'>
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
    (function() {
    var gads = document.createElement('script');
    gads.async = true;
    gads.type = 'text/javascript';
    var useSSL = 'https:' == document.location.protocol;
    gads.src = (useSSL ? 'https:' : 'http:') +
    '//www.googletagservices.com/tag/js/gpt.js';
    var node = document.getElementsByTagName('script')[0];
    node.parentNode.insertBefore(gads, node);
    })();
    </script>
    <xen:if is="!{$visitor.user_id}">
    <script type="text/javascript">// <![CDATA[
            googletag.cmd.push(function() {
                var width = window.innerWidth || document.documentElement.clientWidth;
                if (width >= 801) {
    googletag.defineSlot('/99999999/Header-TN-U-D', [468, 60], 'div-gpt-ad-1373378072457-3').addService(googletag.pubads());               
    googletag.defineSlot('/99999999/Footer-TN-U-D', [728, 90], 'div-gpt-ad-1373378072457-0').addService(googletag.pubads());
    <xen:if is="{$contentTemplate} == 'member_view'">googletag.defineSlot('/99999999/MemberPage-TN-U-D', [468, 60], 'div-gpt-ad-1373378072457-6').addService(googletag.pubads());</xen:if>
    $(".tnadsM").remove();
    $(".tnadsT").remove();
                }
                else if ((width >= 481) && (width <= 800)) {
    googletag.defineSlot('/99999999/Header-TN-U-T', [468, 60], 'div-gpt-ad-1373378072457-5').addService(googletag.pubads());
    googletag.defineSlot('/99999999/Footer-TN-U-T', [468, 60], 'div-gpt-ad-1373378072457-2').addService(googletag.pubads());
    <xen:if is="{$contentTemplate} == 'member_view'">googletag.defineSlot('/99999999/MemberPage-TN-U-T', [468, 60], 'div-gpt-ad-1373378072457-7').addService(googletag.pubads());</xen:if>
    $(".tnadsM").remove();
    $(".tnadsD").remove();
                }
    else if (width <= 480) {
    googletag.defineSlot('/99999999/Header-TN-U-M', [234, 60], 'div-gpt-ad-1373378072457-4').addService(googletag.pubads());
    googletag.defineSlot('/99999999/Footer-TN-U-M', [234, 60], 'div-gpt-ad-1373378072457-1').addService(googletag.pubads());
    $(".tnadsT").remove();
    $(".tnadsD").remove();
    }
                googletag.pubads().enableSingleRequest();
                googletag.enableServices();
            });
    // ]]></script>
    </xen:if>
    then for the slots themselves:

    Code:
    <xen:if is="{$visitor.user_id}">
    <!-- Footer-TN-U-D -->
    <div class='tnads tnadsD' id='div-gpt-ad-1373378072457-0' style='width:728px; height:90px;'>
    <script type='text/javascript'>
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1373378072457-0'); });
    </script>
    </div>
    <!-- Footer-TN-U-M -->
    <div class='tnads tnadsM' id='div-gpt-ad-1373378072457-1' style='width:234px; height:60px;'>
    <script type='text/javascript'>
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1373378072457-1'); });
    </script>
    </div>
    <!-- Footer-TN-U-T -->
    <div class='tnads tnadsT' id='div-gpt-ad-1373378072457-2' style='width:468px; height:60px;'>
    <script type='text/javascript'>
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1373378072457-2'); });
    </script>
    </div>
    </xen:if>
     
  4. akia

    akia Well-Known Member

    does the above look ok?
     
  5. TeflonDon

    TeflonDon Well-Known Member

  6. Brogan

    Brogan XenForo Moderator Staff Member

Share This Page