AMP

Adding extended AMP components

AMP’s component system allows you to quickly build efficient and responsive features into your articles with minimal effort. The AMP HTML library has three classifications for AMP components:

  • built-in: These are components that are included in the base AMP JavaScript library (specified in the <head> tag), such as amp-img and amp-pixel. These components can be used immediately in an AMP document.

  • extended: These are extensions to the base library that must be explicitly included in the document as custom elements. Custom elements require specific scripts that are added to the <head> section (e.g., <script async custom-element="amp-video...).

  • experimental: These are components that are released but are not yet ready for wide use. Developers can choose to opt-in to use these features before they are fully released. Learn more in Experimental features.

Our sample already uses a built-in component, amp-img, and we explored how that component relates to the AMP layout system in the "Convert your HTML to AMP" tutorial. Now, let's add some commonly-used extended AMP components to our news article.

Monetize with ads

Ads in AMP are constructed by using the amp-ad component. The amp-ad component allows you to configure ads in several ways, such as the width, height and layout mode. However, many ad platforms require additional configuration, such as the account ID for the ad network, which ad should be served, or options for targeting the advertising. These options are easily specified in the amp-ad component by using HTML attributes.

Take a look at this example of a DoubleClick ad:

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/image/static">
</amp-ad>

As you can see, this is a very simple configuration. Take note of the type attribute, which informs the amp-ad component of the ad platform that we want to use. In this case, we want to use the DoubleClick platform, so we specified doubleclick as the value.

The data-slot attribute is more unique. In amp-ad, any attributes that start with data- are vendor-specific attributes. This means that not all vendors will necessarily require this particular attribute, nor will they necessarily react if it is supplied. For example, compare the DoubleClick example from above with the following test ad from the A9 platform:

<amp-ad
  width="300"
  height="250"
  type="a9"
  data-aax_size="300x250"
  data-aax_pubname="test123"
  data-aax_src="302">
</amp-ad>

Try adding both of the above examples into your article just after the <header> tag.

Remember, not all components are included in the core AMP library JavaScript file. We need to include an additional JavaScript request for the ad component.

Add the following script to the <head> tag:

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

Refresh the page and you should see two test ads:

Test ads

IMPORTANT – You might have some errors in your developer console, such as Mixed Content or XMLHttpRequest cannot load. The former error is likely related to the A9 advertisement because not all the content it loads is secure. This is a notable requirement for all ads served on AMP.

The two amp-ads below provide an example of the flexibility amp-ad provides for supporting ad platform features. In this case we've configured (using DoubleClick's dashboard) two DoubleClick test ads to only show in certain countries--the first will show only in the UK and the second will show only in the US. Try adding these two geotargeting ad configurations in the AMP document below the ads you added earlier:

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/uk">
  <div fallback>No ad appeared because you're not browsing from the UK!</div>
</amp-ad>

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/us">
  <div fallback>No ad appeared because you're not browsing from the US!</div>
</amp-ad>

Refresh the page and take a look. The following screenshot was captured from Canada, so neither ad loads:

Test ads

NOTE – You might notice that inside these amp-ad tags are additional div tags with an attribute named fallback on them. Can you guess what the fallback attribute denotes? It informs AMP’s loading system to only show the contents of that element when the parent element fails to load successfully. Learn more in Placeholders & fallbacks.

READ ON – To see the latest supported ad networks, read the reference documentation for the amp-ad component.

NOTE – No ad network-provided JavaScript is allowed to run inside the AMP document. Instead, the AMP runtime loads an iframe from a different origin (via an iframe sandbox) as the AMP document and executes the ad network’s JS inside that iframe sandbox.

Our AMP document now includes text, an image, and an advertisement embedded on the page, which are all key ingredients to telling a story and monetizing your content. However, modern websites often include more functionality than simply pictures and text.

Let’s take our AMP document to the next level and add more advanced web functionality that is commonly found on news articles, like:

  • YouTube videos
  • Tweets
  • Article quotes

Embed a YouTube video

Let’s try embedding a YouTube video into the document. Add the following code just after the <header> in your AMP document (above the amp-ads you just added):

<amp-youtube
  data-videoid="npum8JsITQE"
  layout="responsive"
  width="480"
  height="270">
  <div fallback>
    <p>The video could not be loaded.</p>
  </div>
</amp-youtube>

Refresh the page. Instead of the video you'll see this text: “The video could not be loaded.”

Even if your browser can show YouTube videos without issue, you will still receive this error. Why? The video hasn’t actually failed to load, rather the component itself failed.

Remember, not all components are included in the core AMP library JavaScript file. We need to include an additional JavaScript request for the YouTube component.

NOTE – If you still have your developer console open and #development=1 in your URL, you'll see an AMP validator error at this point reminding you to add the amp-youtube JavaScript and a link to documentation that will tell you the script tag to add.

Add the following script to the <head> tag:

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Refresh the page and you should see the YouTube video:

Embedded Youtube video

As with the other elements on the page, we specified the width and height of the video so that the AMP layout system can calculate the aspect ratio. Also, we set the layout to responsive, so the video fills the width of its parent element.

To learn more about embedding YouTube videos, read the amp-youtube component documentation. For even more video and media components, check out the list of media AMP components.

TIP – Use the fallback attribute to inform users if a component fails to load or if the component is unsupported in their browser.

Display a Tweet

Embedding preformatted tweets from Twitter is a common feature in news articles. The amp-twitter component can provide this functionality with ease.

Start by adding the following JavaScript request to the <head> tag of your document:

<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

Now, in your article add this code to embed the Tweet:

<amp-twitter
  width="486"
  height="657"
  layout="responsive"
  data-tweetid="638793490521001985">
</amp-twitter>

The data-tweetid attribute is another example of a custom attribute required by a particular platform. In this case, Twitter correlates the value of the data-tweetid attribute to a particular Tweet.

Refresh your browser and take a look at the page. You should see the Tweet appear:

Embedded Tweet

To learn more about embedding Twitter Tweets, read the amp-twitter component documentation.

TIP – AMP provides even more components for embedding content from social networks. See the latest social AMP components.

Highlight an article quote

A common feature in news articles is to highlight particularly engaging snippets of text from the article. For example, a quotation from a particular source or an important fact might be repeated in a larger font to attract the reader's attention.

However, not all snippets of text are necessarily the same length of characters, which can make it difficult to balance a larger font size with the amount of space the text consumes on the page.

AMP provides another component specifically designed for this type of situation, it's called the amp-fit-text component. The amp-fit-text component allows you to define a fixed width and height element, and a maximum font size. The component intelligently scales the font size to fit the text within the available width and height.

Let’s give it a try. First, add the component’s library to the <head> tag:

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

Add the following to your page:

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  Big, bold article quote goes here.
</amp-fit-text>

Refresh the page and look at the result!

Now, experiment further. What happens if the quotation is much shorter?

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  Hello!
</amp-fit-text>

Or, what if the quotation is longer?

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
   And the Raven, never flitting, still is sitting, still is sitting. On the pallid bust of Pallas just above my chamber door; And his eyes have all the seeming of a demon’s that is dreaming, And the lamp-light o’er him streaming throws his shadow on the floor; And my soul from out that shadow that lies floating on the floor. Shall be lifted—nevermore!
</amp-fit-text>

As a last experiment with amp-fit-text, try creating a short piece of text, such as "Hello" with a much larger height (for example, a value of 400), and maintaining the max-font-size attribute value of 42. What would the resulting page look like? Is the text centered vertically? Or, does the height of the amp-fit-text tag shrink to fit the max font size? With what you already know about AMP’s layout system, try to answer the question before playing with the code!

You can learn more about amp-fit-text from AMP by Example's live demo.