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

How to make ads responsive

Discussion in 'HTML & JavaScript' started by corneliusw, May 17, 2016.

  1. corneliusw

    corneliusw Newbie

    Joined:
    Jan 29, 2011
    Messages:
    36
    Likes Received:
    2
    I am a publisher of ad networks, and I wanted to make the 728x90 and 468x60 banner ads responsive since they're cut off on mobile due to width. My first thought was to show a 300x250 in placement of the 728 and 468 banners on mobile devices only. So I created the following code:

    Code:
      <div class="container">
    <script>
    window.onresize = function(){
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    if ( $(window).width() <= 767) {
    e9 = new Object();
    e9.size = "320x50";
    script.src = "http://tags.expo9.exponential.com/tags/comMobile/320x50/tags.js";
    head.appendChild(script);
    }else {
    e9 = new Object();
    e9.size = "728x90";
    script.src = "http://tags.expo9.exponential.com/tags/com/ROS/tags.js";
    head.appendChild(script);
    }
    }
    </script>
    </div>
    But that didn't display any banner ad, it left the header blank. So that code does not work, not sure what I wrote wrong as I can't detect an issue. Now I'm thinking perhaps there is a way to make the 728x90 and 468x60 responsive, as they pay out more than the 300x250, so why lose out on those sizes?

    Is it possible to make it responsive? If so what do I have to do? If it's not possible, then can someone take a look at my javascript above and potentially fix it?

    Here are the original ad codes:

    728x90

    Code:
    <div class="container">
      
    <!-- Ezoic - Under Page Title - under_page_title -->
    <div id="ezoic-pub-ad-placeholder-101">
    <script type="text/javascript"><!--
                   e9 = new Object();
        e9.size = "728x90,970x250";
    //--></script>
    <script type="text/javascript" src="http://tags.expo9.exponential.com/tags/com/ROS/tags.js"></script>
    </div>
    <!-- End Ezoic - Under Page Title - under_page_title -->
             
    </div>
    
    300x250
    Code:
    <script type="text/javascript"><!--
    
    
                   e9 = new Object();
    
    
        e9.size = "320x50";
    
    
    //--></script>
    
    
    <script type="text/javascript" src="http://tags.expo9.exponential.com/tags/comMobile/320x50/tags.js"></script>