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:
<head>tag), such as
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
<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.
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
Add the following script to the
<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:
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.
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:
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
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
- 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.
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
script tag to add.
Add the following script to the
<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:
As with the other elements on the page, we specified the
height of the video so that the AMP layout system can calculate the aspect ratio. Also, we set the
responsive, so the video fills the width of its parent element.
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.
<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>
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:
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
<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!