As we talked before, Accelerated Mobile pages of AMP are one of the latest trends powered and pushed up by Google. AMP claim to be providing faster and better user experience and in order to support them, Google, in turn, claims that sites having AMP mirrors will get their content higher ratings and places in the search results list. So, no matter, what is our personal opinion about, this whole thing making sense or not, in a world, overruled by a particular search engine, this AMP thing about is definitely worth the shot.
At first glance it all can be summarized by a single word – "RESTRICTIONS" – you can't have your own style sheets, run your own scripts and some of the tags must carry different AMP-specific names instead of the ones we are used to in a regular HTML. At the certain point that can be understood – removing tons of stuff will definitely make a page using AMP Layout Template load faster but what comes to be done when some custom script elements just need to take place? Are such pages suitable for transforming to AMP?
The answer is YES - AMP pages can carry custom scripts and more complicated content as long as it's being a part of a different web page published somewhere aside and just referenced in the AMP page via an
amp-iframe element. Of course, there are still plenty of restrictions to pay attention for in order to get the Validation's approval but at least including a bit more complicated content is not a chimera as it might seem like at first.
Here are a few things about the
amp-iframe to get you started:
First of all
amp-iframe is the part of AMP's extended Components – you can't just use it in the markup you are about to define – you need to call the script handling it in the page's
<head> first. It all pretty much narrows down to a single
script tag you would want to include:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Now, when the component has been included, let's get to know it a bit better. The AMP developers claim their element is quite different from the vanilla iframe object – it is much more secured and not allowing a single iframe to dominate over the entire AMP Landing Page Template for a reason. As a rule, an
amp-iframe should not take place in the first 600px of the document's height or in the first 75% of the viewport's height – according to which of those values comes to be the smaller one.
There is an exclusion of this rule -
amp-iframe element can be positioned higher in case it carrying the
placeholder attribute and getting displayed until the
amp-iframe gets actually loaded. with such restricting standard we could expect restrictions here as well – all the
amp-iframe elements are sandboxed by default – all the scripts and APIs form submissions and automatically triggered features are blocked and if you want some of them actually working on your AMP page you need to explicitly allow it adding a
sandbox attribute to your
amp-iframe and defining in its value the items to allow separated by space. This sandboxing approach is also forced to all the child
iframe elements the embedded content might have so landing pages might fail even if the element itself seems to be working.
Along with that, the
amp-iframe does not have any means passing configuration to the iframe and has no mechanism allowing it to be resized by the content held within. It should explicitly provide
height attributes but also can have the following AMP layouts provided as values to its
responsive ,fill, fixed-height, fixed, flex-item and
Now, when we have some clues about the container, how about the content? The
src attribute of the
amp-iframe should draw its contents via
https:// and generally – its origin must be different from the one the AMP page takes place on. If your included content comes from the same domain you must explicitly allow that adding
allow-same-origin as one of the
sandbox attribute's parameters. And since it looks like this attribute pretty much controls everything about the AMP element we're talking about, it would be a good idea having some kind of reference to all the possible values which can be assigned to it. This one is pretty decent one to get you started: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox
amp-iframe element is much similar in functionality to other pair of the custom AMP elements -
amp-embed since they are practically do the same thing. What comes to differ them though - it's the purpose they are being used for and the actual content held within. When you need displaying some ads you might want to go for
amp-embed and when it is an actual content you are embedding -
amp-iframe is the element for you.
You have the ability to show an iframe within your web page by operating the
- Need to be at least 600px or 75% of the 1st viewport away from the top ( other than iframes that utilize a
- May only seek resources by HTTPS, and they should certainly not be inside the identical origin just as the container until they do not identify allow-same-origin.
To include an
amp-iframe inside of your page, first of all include the following script to the
<head>, which in turn runs the supplementary code for the increased element:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
In the following good example, we designed a responsive
amp-iframe to set a Google Map via the Google Maps Embed API:
<amp-iframe width="200" height="100" sandbox="allow-scripts allow-same-origin" layout="responsive" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=europe"> </amp-iframe>
You can show an
amp-iframe at the top of a document, presented the
amp-iframe contains an feature with the
placeholder attribute, ( for instance, an amp-img element) which would be exhibited as a placeholder until the iframe is available to get presented.
amp-iframe ought to have stationary format determined as is actually the case together with some other AMP item. Yet, it is certainly attainable to change size of an amp-iframe at runtime. To act so:
amp-iframe should be specified with the
amp-iframe must have an
overflow child element
3. The iframe document need to send an
embed-size demand like a window message.
embed-size demand will be refused in case the request height is certainly much less compared to a particular threshold (100px).
resizable overrides the value of
scrolling to no.
<amp-iframe width=300 height=300 layout="responsive" sandbox="allow-scripts allow-same-origin" resizable src="https://foo.com/iframe"> <div overflow tabindex=0 role=button aria-label="Read more">Read more!</div> </amp-iframe>
Some example: iframe resize
window.parent.postMessage( sentinel: 'amp', type: 'embed-size', height: document.body.scrollHeight , '*');
As soon this particular text message is received, the AMP runtime aims to support the request as soon as possible, however, it considers just where the audience is presently going through, whether the scrolling is continuing and other UX or productivity factors. Supposing that the runtime can easily not satisfy the resize inquiry, the
amp-iframe will certainly reveal an
overflow feature. Selecting the overflow feature will instantly resize the
amp-iframe because it is actually generated by a visitor activity.
Here are certain aspects that affect just how fast the resize is going to be performed:
- In case the resize is set due to the visitor activity.
- If the resize is requested for a currently active iframe.
- Whether the resize is demanded for an iframe below the viewport or above the viewport.
It is actually attainable to possess an
amp-iframe appear at the top of a file once the
amp-iframe provides a
placeholder element as demonstrated in the example listed here.
amp-iframe ought to feature an element with the placeholder quality, ( as an example an
amp-img element) which in turn would certainly be rendered like a placeholder unless the
iframe is available to be featured.
- Iframe readiness can be learnt by paying attention to
onload of the iframe or an
postMessage, which would be given by the iframe file, whichever arrives primarily.
Some example: Iframe utilizing a placeholder
<amp-iframe width=300 height=300 layout="responsive" sandbox="allow-scripts allow-same-origin" src="https://foo.com/iframe"> <amp-img layout="fill" src="https://foo.com/foo.png" placeholder></amp-img> </amp-iframe>
Example: Iframe embed-ready
window.parent.postMessage( sentinel: 'amp', type: 'embed-ready' , '*'); <h3>Iframe viewability</h3> Iframes can certainly send a <code>send-intersections
window.parent.postMessage( sentinel: 'amp', type: 'send-intersections' , '*'); <code> The iframe can take note to an intersection information from the parent window to receive the intersection details. Example: iframe send-intersections <code> window.addEventListener('message', function(event) const listener = function(event) ; );
The intersection notification would definitely be provided by the parent to the iframe as the iframe moves in or outside of the viewport ( or else is partially detectable) as soon as the iframe is scrolled or resized.
amp-iframe component should be thought about a fallback in the case that the needed customer knowledge is not feasible by various other methods located in AMP, that is, there is really not already an presenting AMP component for the use situation. This is simply because there are numerous real benefits to employing an AMP element tailored for a specific use-case for instance,:
- A lot better option control and effectiveness
- Customized elements have the ability to provide incorporated placeholder pictures in many cases. This means receiving, say, the right video clip thumbnail right before a video clip loads, and lowers the coding initiative to provide a placeholder manually.
- In-built changing of the size. This indicates that iframe information with uncertain scale can more frequently appear to the visitor like it was belonging to the page, rather than located in a scrollable frame
- Many other alternative functions can possibly be integrated in ( as an example, auto-play for video players).
So basically that's the way the
amp-iframe element could be used to add some juice to the accelerated pages we creating. Of course, the dev team does not step back by far from the strictly restrictive approach they have used with this one, advising to use the element as the final measure, if no other AMP means are capable of providing the needed content or functionality.
Talking about AMP - this is rather a project specific decision each of us should make for themselves – either to use the AMP or not and which components must be included if we decide to create AMP copies of our pages.