XF 1.2 Responsive Ads Javascript

[akia]

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.:

<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.

 

[Jeremy]

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

 

[akia]

Right I think I've finally got it:

<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:

<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>

 

[akia]

does the above look ok?

 

[TeflonDon]

Bump

 

[Paul B]

Bump what?

It is up to individual advertisers to make their service compatible with responsive behaviour.

I posted a tutorial for AdSense here: http://xenforo.com/community/resources/responsive-adsense.2084/