Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Feb 2017
    Posts
    2
    Member #
    56117

    Making Ad Responsive in Javascript

    We've just joined an Google Adsense alternative as another advertising site, but they, unlike Google, do not have a responsive ad. They've said we're allowed to change the code to make it so, either through CSS or perhaps in the JAVASCRIPT ad itself.

    Is there an easy way to accomplish this? With Google's penchant for penalizing sites that aren't completely responsive these days, which we did last year, I'd like to keep all ads/photos responsive.

    Below is the ad code they provided that is not responsive.

    <script type="text/javascript"><!--
    document.write('<s'+'cript type="text/javascript" src="//adbuff.com/amp/show.php?z=27&pl=15047&j=1&code='+new Date().getTime()+'"></s'+'cript>');
    // --></script>
    <noscript>
    <iframe src="//adbuff.com/amp/show.php?z=27&pl=15047" width="300" height="250" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>
    </noscript>

    *****

    We were told by the ad company that some people are using the template below as a way to get around the problem, but we don't know how to adjust it to ADBUFF not GOOGLE ADSENSE. Any help would be greatly appreciated.

    <script type="text/javascript">

    var width = window.innerWidth || document.documentElement.clientWidth;
    google_ad_client = "ca-publisher-id";

    if (width >= 800) {
    google_ad_slot = "ad-unit-1";
    google_ad_width = 728;
    google_ad_height = 60;
    } else if ((width < 800) && (width < 400)) {
    google_ad_slot = "ad-unit-2";
    google_ad_width = 300;
    google_ad_height = 250;
    } else {
    google_ad_slot = "ad-unit-3";
    google_ad_width = 468;
    google_ad_height = 60;
    }
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>


    Thanks for all your assistance. Nothing like trying to do something you're not really good at.

    Appreciate it.

    Jeff

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,524
    Member #
    425
    Liked
    2787 times
    You're better at it than you may realize, Jeff. I'll tell you why...this is one of the more intelligent questions I've seen on here.

    Let me give it a shot for you to give you the rough idea. You won't be able to use pure CSS for this, except perhaps for styling the iframe for noscript ads. So I'll give you the rough idea for the Javascript.
    Code:
    <script type="text/javascript">
    
    var width = window.innerWidth || document.documentElement.clientWidth;
    google_ad_client = "ca-publisher-id";
    
    if (width >= 800) { 
    document.write('<s'+'cript type="text/javascript" src="//adbuff.com/amp/show.php?(code for your leaderboard ad here)&code='+newe().getTime()+'"></s'+'cript>'); 
    } else if ((width < 800) && (width > 400)) { 
    document.write('<s'+'cript type="text/javascript" src="//adbuff.com/amp/show.php?(code for your tablet ad here)&code='+newe().getTime()+'"></s'+'cript>'); 
    } else { 
    document.write('<s'+'cript type="text/javascript" src="//adbuff.com/amp/show.php?(code for your cell phone ad here)&code='+newe().getTime()+'"></s'+'cript>'); 
    } 
    </script> 
    I'm interested in what you're doing because I have a potential "need" for an alternate ad network for a site idea that I have in mind. Can you show us what you're doing as you go along and let us know what type of eCPM you end up getting for your ads?
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,017
    Member #
    27197
    Liked
    926 times
    You can even take it a step further and build out a script that will give you the viewport details, like so:

    Code:
    function getViewport(){
      this.w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
      this.h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
      
      this.orientation = w > h ? 'landscape' : 'portrait';
    
      this.output = {
        w: this.w,
        h: this.h,
        orientation: this.orientation
      };
    
      return this.output;
    }
    That way, you can deal with orientation as well

    Code:
    if(getViewport.orientation === 'portrait'){
        // Insert the ad for portrait orientation
    }
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Junior Member
    Join Date
    Feb 2017
    Posts
    2
    Member #
    56117
    Thanks, the Game and Ron. I'll try to wrap my head around the code and figure it out next week. Problem I'm having just on the first glance is knowing just what to put in as

    ... code for your leaderboard ad here

    Not sure what to use. I'll have to play around with it.

    The Game, ... we've just been using the non-response ads at Adbuff for a couple days and the eCPM keeps rising. $0.27 right now, which I realize is not good, but I've just been putting the ads in secondary positions on the page (keeping the adsense ads in the primary). The RPM at adsense right now, per impression, is $0.41.

    Adbuff has some limits per site traffic. The site we're coding for get 5,000 to 14,000 views per day.

    Thanks. I'll keep you posted as I work through this.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:01 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com