Add new pages on ads and tips for improving engagement under Guides.

content/docs/guides/ads_on_amp.md

@@ -0,0 +1,17 @@
+---
+$title: Ads on AMP
+$order: 8
+---
+<div class="toc">
+{% include "/views/partials/sub_nav.html" %}
+  <ul>
+    <li><a href="/learn/who/#ads">Supported Platforms</a></li>
+    <li><a href="/roadmap">Roadmap</a></li>
+  </ul>
+</div>
+
+AMP pages are just web pages, except consistently faster. Many of the best practices in this guide are consistent across non-AMP pages.
+
+For optimal results, approach ads on AMP pages in the same manner as ads on non-AMP pages.
+
+<a class="button go-button" href="/docs/guides/ads/ads_getting_started.html">Let's get started!</a>

content/docs/guides/ads_on_amp/_blueprint.yaml

@@ -0,0 +1,5 @@
+$path: /docs/guides/ads/{base}.html
+$view: /views/doc.html
+$localization:
+  path: /{locale}/docs/guides/ads/{base}.html
+

content/docs/guides/ads_on_amp/ads_getting_started.md

@@ -0,0 +1,63 @@
+---
+$title : "Getting Started"
+$order : 0
+$parent: /content/docs/guides/ads_on_amp
+---
+
+## Three Easy Steps to Serving Ads on Your AMP Page
+
+Not sure how to get started? In this tutorial, you’ll learn how to quickly and easily serve ads on your AMP page.
+
+### 1. Add the `<amp-ads>` component to your AMP page:
+
+[sourcecode:html]
+<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
+[/sourcecode]
+
+### 2. You added the ads framework, now specify the ad server or ad network in the `type` attribute:
+
+[sourcecode:html]
+<amp-ad
+      type="a9">
+  </amp-ad>
+[/sourcecode]
+
+[Here](https://github.com/ampproject/amphtml/tree/master/ads) is a list of supported ad networks.
+
+### 3. You just defined the ad server type, but you also need to define the ad size. Specify your ad unit’s height and width:
+
+[sourcecode:html]
+<amp-ad width="300"
+      height="250"
+      type="a9"
+      data-aax_size="300x250"
+      data-aax_pubname="test123"
+      data-aax_src="302">
+  </amp-ad>
+[/sourcecode]
+
+Note: The additional data attributes are telling the ad network to pull the right size and pub from their servers. Each ad network has different attributes to send. [Learn more](https://www.ampproject.org/docs/reference/components/amp-ad#supported-ad-networks).
+
+### 4. [OPTIONAL] AMP supports an optional placeholder attribute. Depending on the ad network, you can choose to show a placeholder until the ad is available for viewing. This provides a better user experience by preventing a blank space from showing:
+
+[sourcecode:html]
+ <amp-ad width="300"
+      height="200"
+      type="doubleclick"
+      data-slot="/4119129/doesnt-exist">
+    <amp-img placeholder src="placeholder-image.jpg"></amp-img>
+  </amp-ad>
+[/sourcecode]
+
+### 5. [OPTIONAL] AMP supports an optional fallback attribute. Depending on the ad network, you can choose to show this fallback element if no ad is available to serve:
+
+[sourcecode:html]
+<amp-ad width="300"
+      height="200"
+      type="doubleclick"
+      data-slot="/4119129/doesnt-exist">
+    <amp-img fallback src="fallback-image.jpg"></amp-img>
+  </amp-ad>
+[/sourcecode]
+
+### 6. Congratulations! You are now serving ads on your AMP page!

content/docs/guides/ads_on_amp/ads_tips.md

@@ -0,0 +1,38 @@
+---
+$title : Tips for Ads on AMP Pages
+$order : 1
+$parent: /content/docs/guides/ads_on_amp
+---
+[TOC]
+
+### Placement & Controls: <br /> Optimize your ad placements
+
+- **Create separate ad units** on AMP pages for targeting, reporting, and control purposes.
+- **Place the same number of ads** on AMP Pages as your non-AMP pages to generate maximum revenue per page.
+- **Place the first ad immediately below the first viewport** ("below the fold") to provide an optimal user experience.
+- Unless you’re using advanced CSS or media queries, **ensure your ad units are centered on the page** to provide your users with an optimal mobile web experience.
+- **Enable <a href="https://github.com/ampproject/amphtml/tree/master/ads#support-for-multi-size-ad-requests">multi-size ad requests</a>** on your AMP inventory to increase ad auction pressure and drive revenue.
+
+### Demand & Pricing: <br /> Get the right price for your ads
+
+- **Sell ad units on your AMP pages across all sales channels**, including direct and indirect to maximize competition for your inventory on AMP pages.
+- **Price your ad inventory on AMP pages** similar to your inventory on non-AMP pages. Monitor performance and adjust pricing accordingly.
+- **Ensure all ad demand channels are competing** for ad inventory on your AMP pages to drive up competition.
+
+### Ad Types: <br /> Serve the best types of ads
+
+- **Avoid heavy creatives** per <a href="http://www.iab.com/wp-content/uploads/2015/11/IAB_Display_Mobile_Creative_Guidelines_HTML5_2015.pdf">IAB guidelines</a>.
+- **Avoid interstitials** or other ad formats that cause the content to reflow on ad load.
+- **Optimize for viewability** by setting the parameter:<br /> 
+<em>data-loading-strategy = prefer-viewability-over-views</em>
+- **Place ads in your video content** via [supported players](https://github.com/ampproject/amphtml/blob/master/extensions/README.md#audiovideo) or [`amp-iframe`](https://ampbyexample.com/components/amp-iframe/) to enable revenue on all types of content.
+- **Implement native ads** to compete with display ads using multi-sized ad requests, adding demand pressure while providing your readers with a premium user experience.
+
+### Innovation: <br /> Offer the most engaging ad products
+
+- **Implement ads on ancillary AMP pages** to generate incremental revenue:
+    - [Ads in your AMP Image Carousel](https://github.com/jasti/amp-ads-testing/blob/master/dfp-amp-testing/amp_tests/amp-carousel-demo.html)
+    - [Ads in your AMP Lightbox](https://github.com/jasti/amp-ads-testing/blob/master/dfp-amp-testing/amp_tests/amp-lightbox-demo.html)
+- **Implement new formats for direct sold ads** to equip your sales team with high-impact, innovative ad products:
+    - [Sticky Ads](https://ampbyexample.com/components/amp-sticky-ad/)
+    - [Flying Carpet](https://ampbyexample.com/components/amp-fx-flying-carpet/)

content/docs/guides/engagement.md

@@ -0,0 +1,53 @@
+---
+$title: Tips to Improve Engagement with AMP
+$order: 9
+---
+
+### Help readers identify you with consistent branding and rich content across AMP and non-AMP pages
+
+- **Reflect your brand in AMP pages.** Use the same header and design scheme (e.g. colors, spacing, type styles) as in your non-AMP pages to ensure your pages are recognizable and appear legitimate.
+
+- **Feature your most engaging content** when converting your pages. Include key page elements like images, videos, embeds, structured data, comments and social media. Learn how to [include 3rd-party content](https://www.ampproject.org/docs/guides/third_party_components). 
+
+- **Keep AMP pages current.** Dynamically update live blogs with [`amp-live-list`](https://www.ampproject.org/docs/reference/components/amp-live-list).
+
+### Optimize for user engagement and retention
+
+- **Provide interactive experiences** on your AMP pages. Use components like [`amp-carousel`](https://www.ampproject.org/docs/reference/components/amp-carousel) to create rich image carousels and [`amp-iframe`](https://www.ampproject.org/docs/reference/components/amp-iframe) to 
+incorporate interactive elements that AMP does not natively support.
+
+- **Create personalized user journeys.** Offer a login button, and if your content 
+lives behind a paywall, implement your rules and offers using [`amp-access`](https://www.ampproject.org/docs/reference/components/amp-access). 
+
+- **Extend onward journeys.** Link to related or suggested articles and other 
+relevant sections of your site. 
+
+- **Personalize content** by including recommendations through [`amp-list`](https://www.ampproject.org/docs/reference/components/amp-list).
+
+- **Implement a menu** with [`amp-sidebar`](https://www.ampproject.org/docs/reference/components/amp-sidebar) to encourage users to browse the rest 
+of your site.
+
+- **Help readers share your content** with [`amp-social-share`](https://www.ampproject.org/docs/reference/components/amp-social-share) and your 
+own share buttons.
+
+- **Cultivate new interactions** such as lead generation, newsletter signup, and 
+comment support with [`amp-form`](https://www.ampproject.org/docs/reference/components/amp-form).
+
+- **Aim for ad types that offer a good reader experience.** Explore AMP ad 
+formats such as [`amp-sticky-ad`](https://www.ampproject.org/docs/reference/components/amp-sticky-ad) and [`amp-fx-flying-carpet`](https://www.ampproject.org/docs/reference/components/amp-fx-flying-carpet). Follow ads 
+monetization [best practices](/docs/guides/ads/ads_tips.html).
+
+- **Drive app downloads.** Include an app install link in a banner with 
+[`amp-app-banner`](https://www.ampproject.org/docs/reference/components/amp-app-banner).
+
+- **Ensure a fast transition** to your non-AMP Progressive Web App (PWA) site for 
+readers. Use [`amp-install-serviceworker`](https://www.ampproject.org/docs/reference/components/amp-install-serviceworker) to populate your cache.
+
+### Participate in the open-source AMP Project to help shape its development
+
+- **Watch the AMP roadmap** for updates and features at [ampproject.org/roadmap](https://www.ampproject.org/roadmap).
+
+- **Get involved.** Contribute source code, file bugs, or offer feedback 
+on [GitHub](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md). Share your input about AMP at [Stack Overflow](https://stackoverflow.com/questions/tagged/amp-html).
+
+- **Learn** how to use AMP components with [AMP by Example](https://ampbyexample.com/).