1.67 K Views | Rishi Kashyap | 1 FOLLOW



    Both Responsive Ads & Asynchronous Ads by Google were started on July 2013 and are still in BETA Stage. So before I switched to Responsive Google Ads I decided to check few related details.

    • Asynchronous Ads
    • Your old Adsense Code were synchronous which now can be switched to asynchronous Ads. So what's this asynchronous thing ! In simple terms, your previous code will slow down the content loading where ever they are placed on webpage. With asynchronous code this is removed and there in minimum latency, e.g. faster page load.

    • Responsive Ads
    • Responsive Adsense codes are asynchronous by default, rather it is better than simple asynchronous ads. By using Responsive ads you are now free to show different sized ads depending upon the different screen/window size of the user. While Adsense recommends it for Responsive websites, using Responsive ads on any website will be beneficial to all. The benefits of using Responsive ads is that old hacks of altering Adsense codes to show variable size are not needed anymore.
    Lets get deeper into Responsive ads.RESPONSIVE ADS GOOGLE

    Rishi Kashyap | | EDIT | REPLY


      Lets talk about Responsive Adsense Code now. Google allows you to modify Responsive Adsense code with certain restrictions. Responsive Code can be split into 4 parts as shown in below image.

      • A - CSS declaration for your Responsive Ads
      • CSS Styles are specified here. "@media(min-width" is where all magic is happening. Amazingly CSS media query is supported by major browsers.
        This applies to all screen types and checks the min-width of the display (browser/screen).

        1. Google does not allow use of external Stylesheet
        2. Specify fixed pixel values of width and height (e.g. 728px) and not relative (e.g. 90%)
        3. Size should be one of supported Adsense size
        4. Specify default size in your CSS for old browser (details later)
        5. Specify from smaller screen size to larger screen.
        Try Responsive Adsense Example for better understanding.

      • B - Responsive Adsense Code Javascript file
      • This Javascript file is required only once and no need to repeat (as in synchronous Ad Code), so you can shift it in 'head' tag or before end of 'body' tag. I am declaring it only once in the head section for all Asynchronous ads on this page.

      • C - Responsive Ad/Channel name
      • This comment specifies your code/Channel name and used for reference or can be removed for minification of Adsense Code.

      • D - Javascript of Responsive Adsense Code
      • This asynchronous code does not need <script> tags now. Don't change anything here. This defines all your Responsive adsense data.
        While I think there is lot to know here but I left it for later experiment !

      Rishi Kashyap | | EDIT | REPLY

        The Responsive Google Ads have its own set of limitations too. Few worth mentioning

        1. Screen orientations will not change the Responsive Ad
        2. In mobiles change of screen orientation leads to different width but Google ads will not change. Responsive Google ads is responsive on first page load only. If window size changes later, ads will not change. Try this at Responsive Adsense Example

        3. Responsive Ads report
        4. Responsive ads made me remove geeky javascript hacks for displaying/detecting various Ad sizes, however the performance report still do not show breakdown in Ad Size for Responsive ads. While this may be worse limitation but chances are Google guys are already on it !
          Please do not twist those javascript hacks to work with Responsive Google Ads for time being. Synchronous Ads code had its own limitation and hence hacks were needed, but responsive ads already have what was missing. Just be patient and explore your Adsense reports better to get max data.

        5. Unsupported on IE 8 and below version
        6. I wasted full day for this to work using javascript alternatives like
          Respond.js (Does not support "@media CSS style")
          Modernizer (Beyond my technical capability)
          css3-mediaqueries.js (Does not support "@media CSS style")

          The only way to get it working is specifying default size in CSS.responsive-ads { width: 468px; height: 60px; }So for IE 8 and below they will see constant banner ads.

          Should you worry about it ? Actually NO ! Reason is simple. Firstly only 3% of my traffic use them that includes me for browser testing. Secondly if it was about layout of my website, I would not sleep nights till I get it working (Ya call me perfectionist ;-)) but we are talking about AD SPACE.
          Think about it ....its Google Adsense headache not yours. If they are happy with banner ads (less revenue) then that's how it is !

        Rishi Kashyap | | EDIT | REPLY

          What does switching to responsive ads mean to a publisher. It means faster page load = better user experience = happy reader. Responsive ads have no connection to your Revenue !

          Sure for me I was neglecting Adsense recommendation of switching to better performing ads, so now I have defined only those size in my Responsive Ads e.g.
          336 X 280 Large Rectangle
          728 X 90 Leaderboard
          468 X 60 default (for IE)
          320 X 50 Mobile Banner

          Responsive Ads also helped me in reducing my Adsense Channels. Its my personal belief that less Adsense Channel are better. With less channels I can focus better on performance. With less channels I get more ad impression per channel so better for attracting advertisers and in turn affecting my Adsense revenue !

          I think Responsive ads are great, both for publishers and readers. So while Adsense guys work to get ad size breakdown in performance report for Responsive Ads, let me try some A/B Testing and other stuffs..
          Wish you safe switching to Responsive ads and more Adsense revenue.

          Rishi Kashyap | | EDIT | REPLY