• 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

akia

Well-known member
#1
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.
 

akia

Well-known member
#3
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>