An async script for AdSense tagging

JUL 02, 2013
Author Photo
By Michael Kleber, Ads Latency Team

As part of our ongoing quest to make the Web faster, we're happy to share a new tag that publishers can use to request AdSense ads. This new tag is built around the modern <script async> mechanism, ensuring that even if a slow network connection makes our script slow to load, the surrounding web page can fully render. A few other benefits come along for the ride, like the ability for ad slot configuration and placement to live entirely in the DOM.

A decade ago, when AdSense was born, asking publishers to copy-and-paste a bit of HTML including <script src=".../show_ads.js"> was the natural way to get our ads to appear in that spot on a web page. But as web speed evangelist Steve Souders has explained, that kind of blocking script tag is a "Frontend Single Point of Failure": if a server or network problem makes that script unavailable, it could prevent the whole rest of the page from appearing. That's why modern best practices emphasize loading most resources asynchronously. These guidelines are even more important for sites loaded on mobile devices, where dropped HTTP connections are far too common.

Anatomy of the new tag:
  1. A script, which only needs to appear once on your page, even if you have multiple ads. It is loaded asynchronously, so it is safe and most efficient to put it near the top.

    <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  2. A particular DOM element, inside of which the ad will appear. We use attributes of this element to configure the properties of the ad slot.
  3. A call to adsbygoogle.push(), which instructs us to fill in the first unfilled slot.
    <ins class="adsbygoogle"
      style="display:inline-block;width:300px;height:250px"
      data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
      data-ad-slot="yyyyyyyyyy"></ins>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
The ad block size is based on the width and height of the <ins>, which can be set inline, as shown here, or via CSS. Other configuration happens through its data-* properties, which take the place of the old (and manifestly not async-friendly!) google_* window-level variables. If your Google Analytics integration required setting google_analytics_uacct="UA-zzzzzz-zz" before, then you should now add the property data-analytics-uacct="UA-zzzzzz-zz" to the <ins> instead, for example.

The classic show_ads.js tag is a battle-tested warrior with years of experience, running on millions of sites around the web. The upstart adsbygoogle.js is in beta and may not be as robust yet. Give it a try and please let us know if you run into any problems. But if you were jumping through hoops before to keep ads from blocking your content, try this out straight away. We think you'll approve.


Michael Kleber is the Tech Lead of the Ads Latency Team at the Google office in Cambridge, MA. Before coming to Google to make the Internet faster, he spent time as a math professor working on representation theory and combinatorics, as a computational biologist working on genome assembly, and on machine learning for speech recognition.

Posted by Scott Knaster, Editor
posted in:
Previous
Next