<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Make Show Ads Asynchronous</title>
    <link rel="stylesheet" href="doc.css">
  </head>
  <body>
<!--#include virtual="_header.html" -->


  <div id=content>
<h1>Make Show Ads Asynchronous</h1>

<p class="note"><strong>Note: New feature as of 1.10.33.0.</strong></p>
<h2>Configuration</h2>
<p>
  The 'Make Show Ads Asynchronous' filter is enabled by specifying:
</p>
<dl>
  <dt>Apache:<dd><pre class="prettyprint"
     >ModPagespeedEnableFilters make_show_ads_async</pre>
  <dt>Nginx:<dd><pre class="prettyprint"
     >pagespeed EnableFilters make_show_ads_async;</pre>
</dl>
  in the configuration file.
</p>


<h2>Description</h2>
<p>
  The filter rewrites pages that load
  <a href="https://www.google.com/adsense">Google AdSense</a> ads with the
  synchronous <code>show_ads.js</code> snippet to load them with the
  asynchronous <code>adsbygoogle.js</code> instead.
  Loading AdSense asynchronously
  helps keep ads
  from <a href="http://googledevelopers.blogspot.com/2013/07/an-async-script-for-adsense-tagging.html">delaying
  the rest of the page content</a>.
</p>

<h2>Operation</h2>
<p>
  The filter looks for a Google AdSense snippet such as the following:
</p>
<pre class="prettyprint">
&lt;div style="border: 2px solid blue;"&gt;
  &lt;script&gt;
    google_ad_client = "ca-google";
    google_ad_width = 728;
    google_ad_height = 90;
    google_ad_format = "728x90";
    google_adtest = "on";
    google_ad_type = "text";
  &lt;/script&gt;
  &lt;script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js"&gt;
  &lt;/script&gt;
&lt;/div&gt;
&lt;div style="border: 2px solid blue;"&gt;
  &lt;script&gt;
    google_ad_client = "ca-google";
    google_ad_width = 728;
    google_ad_height = 90;
    google_ad_format = "728x90";
    google_adtest = "on";
    google_ad_type = "text";
  &lt;/script&gt;
  &lt;script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js"&gt;
  &lt;/script&gt;
&lt;/div&gt;
</pre>
<p>
  and rewrites such snippets in-place to:
</p>
<pre class="prettyprint">
&lt;div style="border: 2px solid blue;"&gt;
  &lt;script async
    src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"&gt;
  &lt;/script&gt;
  &lt;ins
    class="adsbygoogle"
    style="display:inline-block;width:728px;height:90px"
    data-ad-client="ca-google"
    data-ad-format="728x90"
    data-ad-type="text"
    data-adtest="on"&gt;
  &lt;/ins&gt;
  &lt;script&gt;(adsbygoogle = window.adsbygoogle ||  []).push({})
  &lt;/script&gt;
&lt;/div&gt;
&lt;div style="border: 2px solid blue;"&gt;
  &lt;ins
    class="adsbygoogle"
    style="display:inline-block;width:728px;height:90px"
    data-ad-client="ca-google"
    data-ad-format="728x90"
    data-ad-type="text"
    data-adtest="on"&gt;
  &lt;/ins&gt;
  &lt;script&gt;(adsbygoogle = window.adsbygoogle || []).push({})
  &lt;/script&gt;
&lt;/div&gt;
</pre>

<h3>Example</h3>
<p>
  You can see the filter in action at <code>www.modpagespeed.com</code> on this
  <a href="https://www.modpagespeed.com/examples/make_show_ads_async.html?ModPagespeed=on&amp;ModPagespeedFilters=make_show_ads_async">example</a>.
</p>


<h2>Requirements</h2>
<p>
  This filter requires that ads specify a specific width and height
  with <code>google_ad_width</code> and <code>google_ad_height</code>.
</p>
<p>
  If <code>google_ad_output</code> is specified it must be set
  to <code>html</code>.  Alternate outputs like <code>js</code>
  or <code>json_html</code> are not supported by <code>adsbygoogle.js</code>.
</p>
<p>
  Ad snippets that don't meet these requirements won't be rewritten.  Other ad
  blocks on the same page will still be rewritten, loading
  both <code>show_ads.js</code> and <code>adsbygoogle.js</code>.  To avoid this,
  we recommend not enabling this filter for pages that have a mixture of
  eligible and ineligible ad blocks.
</p>

<h2>Risks</h2>
<p>
  This filter is considered high risk.
</p>
<p>
  The <code>make_show_ads_async</code> filter is experimental and has not had
  extensive real-world testing.  It manipulates JavaScript, which is always
  risky, and if errors keep ads from displaying that could mean lost revenue for
  your site.
</p>

  </div>
  <!--#include virtual="_footer.html" -->
  </body>
</html>