| <!-- |
| 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"> |
| <div style="border: 2px solid blue;"> |
| <script> |
| google_ad_client = "ca-google"; |
| google_ad_width = 728; |
| google_ad_height = 90; |
| google_ad_format = "728x90"; |
| google_adtest = "on"; |
| google_ad_type = "text"; |
| </script> |
| <script type="text/javascript" |
| src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> |
| </script> |
| </div> |
| <div style="border: 2px solid blue;"> |
| <script> |
| google_ad_client = "ca-google"; |
| google_ad_width = 728; |
| google_ad_height = 90; |
| google_ad_format = "728x90"; |
| google_adtest = "on"; |
| google_ad_type = "text"; |
| </script> |
| <script type="text/javascript" |
| src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> |
| </script> |
| </div> |
| </pre> |
| <p> |
| and rewrites such snippets in-place to: |
| </p> |
| <pre class="prettyprint"> |
| <div style="border: 2px solid blue;"> |
| <script async |
| src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> |
| </script> |
| <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"> |
| </ins> |
| <script>(adsbygoogle = window.adsbygoogle || []).push({}) |
| </script> |
| </div> |
| <div style="border: 2px solid blue;"> |
| <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"> |
| </ins> |
| <script>(adsbygoogle = window.adsbygoogle || []).push({}) |
| </script> |
| </div> |
| </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&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> |
