Serving responsive Adsense ad units

Monday August 05, 2013 ()

Responsive adsense ad units are helpful for websites targeting various screen sizes where ad units adapting to screen resolutions are desired. This is the case for mobile websites. This blog is based on a blog from "inside adsense blogs". Please note that link units are not yet supported as of blog time.

To create responsive ads, generate the ad unit code as you usually would from your adsense account. When creating a new unit, a code generaor window is presented and from this window choose to generate the new Asynchronous (BETA) JavaScript code from a dropdown.

Responsive adsense ad units

As an added bonus, with the new asynchronous Javascript code, ads blocking page load are eliminated, making your page load even faster.

Below is the code similar to what is generated from the window above. This code is to be inserted where you want the ad to appear.

<script async 
src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
<!-- unit-name_1 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="8641943843"></ins>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>

For existing ad unit, generate the asynchronous code by getting into the same window as above from the ad unit's "Get code" selection.

Responsive adsense ad units figure 2

Insert into the ad code generated a CSS style class to query the screen size and the corresponding height and width of the ad unit of each target screen resolution. The snippet below will dynamically serve the ad corresponding to the screen resolutions. See highlighted area.

<div>
    <style>
        .responsive-mobile-1 {width:320px; height: 50px;}
        @media (min-width:500px) { .responsive-mobile-1 {width:468px;height: 60px;}}
        @media (min-width:800px) { .responsive-mobile-1 {width:728px;height: 90px;}}
    </style>
    <script async="true" 
          src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
    </script>
    <!-- unit-name_1 -->
    <ins class="adsbygoogle responsive-mobile-1"
         style="display: inline-block;"
         data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
         data-ad-slot="4819157688"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>

In creating your style, make sure that the specified width and height match one of the supported adsense ad unit sizes. In our example here, we used the different size variants of the leaderboard at different screen resolutions.

If you have multiple ad units in a page you may want to load the script in line 8 above only once. Here is a sample page layout.


<html>
<head>
    <style>
        .responsive-mobile-1 {width:320px; height: 50px;}
        @media (min-width:800px) { .responsive-mobile-1 {width:728px;height: 90px;}}
        @media (min-width:500px) { .responsive-mobile-1 {width:468px;height: 60px;}}
    </style>
</head>


<body>

<!-- you page content -->

<div>
    <!-- unit-name_1 -->
    <ins class="adsbygoogle responsive-mobile-1"
         style="display: inline-block;"
         data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
         data-ad-slot="4819157688"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>


<!-- Other page content and other ad units -->


<script async="async" 
    src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
</body>
</html>

The following is a note taken directly from Google. As this feature is still in beta, here are a few pointers to keep in mind when setting your size:

  • Be sure to specify fixed pixel values when setting the width and height of the ad to be served. Make sure that the specified width and height match one of our supported ad sizes.
  • The asynchronous ad code is responsive on initial page load only, subsequent changes to the ad size (e.g., after a screen orientation change) will not cause a new ad to be displayed. This is something that we’ll look to address in the future.
  • Always set a default ad size in case media queries aren’t supported. We currently don’t provide a breakdown by size for all of the ads served by a responsive ad unit. This is also something that we’ll look to address in the future.

That's it. Good luck.


2,170

Comments (Serving responsive Adsense ad units)