Skip to content

Commit

Permalink
Edits to ads and engagement guides.
Browse files Browse the repository at this point in the history
  • Loading branch information
yunelee committed Jan 10, 2017
1 parent 3e5730b commit 10af8c9
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 10 deletions.
4 changes: 2 additions & 2 deletions content/docs/guides/ads_on_amp.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
$title: Ads on AMP
$title: Serving Ads on AMP
$order: 8
---
<div class="toc">
Expand All @@ -10,7 +10,7 @@ $order: 8
</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.
AMP pages are just web pages with some extra features (and a few limitations), making them consistently faster and more user-friendly. 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.

Expand Down
24 changes: 17 additions & 7 deletions content/docs/guides/ads_on_amp/ads_getting_started.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,27 @@ $order : 0

## 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.
Not sure how to get started? In this short guide, 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:
By adding the `amp-ads` component, you've added the ads framework to your AMP page.

### 2. 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.
[Here](https://www.ampproject.org/docs/reference/components/amp-ad#supported-ad-networks) 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:
### 3. Specify your ad unit’s height and width:

[sourcecode:html]
<amp-ad width="300"
Expand All @@ -35,9 +37,13 @@ Not sure how to get started? In this tutorial, you’ll learn how to quickly and
</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).
By defining your ad unit's height and weight, you've specified the ad size on your AMP page.

{% call callout('Note', type='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).
{% endcall %}

### 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:
### 4. [OPTIONAL] Specify a placeholder:

[sourcecode:html]
<amp-ad width="300"
Expand All @@ -48,7 +54,9 @@ Note: The additional data attributes are telling the ad network to pull the righ
</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:
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:

### 5. [OPTIONAL] Specify a fallback attribute:

[sourcecode:html]
<amp-ad width="300"
Expand All @@ -59,4 +67,6 @@ Note: The additional data attributes are telling the ad network to pull the righ
</amp-ad>
[/sourcecode]

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.

### 6. Congratulations! You are now serving ads on your AMP page!
3 changes: 2 additions & 1 deletion content/docs/guides/engagement.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
---
$title: Tips to Improve Engagement with AMP
$title: Improve User Engagement
$order: 9
---
Here are some quick tips to improve user engagement with AMP.

### Help readers identify you with consistent branding and rich content across AMP and non-AMP pages

Expand Down

0 comments on commit 10af8c9

Please sign in to comment.