diff --git a/content/docs/guides/ads_on_amp.md b/content/docs/guides/ads_on_amp.md new file mode 100644 index 00000000000..e410a0e22b1 --- /dev/null +++ b/content/docs/guides/ads_on_amp.md @@ -0,0 +1,17 @@ +--- +$title: Ads on AMP +$order: 8 +--- +
+{% include "/views/partials/sub_nav.html" %} + +
+ +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. + +Let's get started! diff --git a/content/docs/guides/ads_on_amp/_blueprint.yaml b/content/docs/guides/ads_on_amp/_blueprint.yaml new file mode 100644 index 00000000000..ca6ad00f8db --- /dev/null +++ b/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 + diff --git a/content/docs/guides/ads_on_amp/ads_getting_started.md b/content/docs/guides/ads_on_amp/ads_getting_started.md new file mode 100644 index 00000000000..26960e46740 --- /dev/null +++ b/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 `` component to your AMP page: + +[sourcecode:html] + +[/sourcecode] + +### 2. You added the ads framework, now specify the ad server or ad network in the `type` attribute: + +[sourcecode:html] + + +[/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] + + +[/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] + + + +[/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] + + + +[/sourcecode] + +### 6. Congratulations! You are now serving ads on your AMP page! diff --git a/content/docs/guides/ads_on_amp/ads_tips.md b/content/docs/guides/ads_on_amp/ads_tips.md new file mode 100644 index 00000000000..d5ff1768774 --- /dev/null +++ b/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:
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 multi-size ad requests** on your AMP inventory to increase ad auction pressure and drive revenue. + +### Demand & Pricing:
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:
Serve the best types of ads + +- **Avoid heavy creatives** per IAB guidelines. +- **Avoid interstitials** or other ad formats that cause the content to reflow on ad load. +- **Optimize for viewability** by setting the parameter:
+data-loading-strategy = prefer-viewability-over-views +- **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:
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/) diff --git a/content/docs/guides/engagement.md b/content/docs/guides/engagement.md new file mode 100644 index 00000000000..52e35b646a2 --- /dev/null +++ b/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/).