An async script for AdSense tagging
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:
- 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>
- 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.
- 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
