AMP at Google I/O: Strengthening the AMP ecosystem

For the latest AMP project updates, subscribe to our new newsletter!

A strong network of AMP contributors and collaborators has been critical to achieving the project’s mission of building a user-first web. At Google’s I/O developer conference this week, members of the AMP team are sharing recent ways the AMP community has come together to improve key elements of the AMP ecosystem.

AMP has progressed a lot in the past year, especially thanks to the help and input of over 500 contributors. Components like amp-bind and amp-position-observer provide developers the tools to create their own rich interactivity on their AMP pages, rather than relying on more narrowly defined components. Along with these low-level frameworks, AMP has been focused on making it easier to create complex, immersive interactions. amp-fx-collection bundles some of the behaviors like parallax scrolling trivial to implement; amp-date-picker, now available as an experiment, offloads the complexity of a fully-featured date picker to a straightforward component; and with amp-lightbox-gallery, also available as an experiment, any developer can easily provide users with a seamless, immersive, media gallery.

In fact, AMP’s evolution has made it a viable solution to build entire websites. Major e-commerce companies like AliExpress have seen sizable business wins by launching a single all-AMP-driven mobile site. In particular AliExpress increased their conversion rate for non-search traffic by 31%. Combining AMP with PWA is also a powerful usage pattern, with sites like BMW.com building AMP pages within a PWA shell to load custom-built, all-AMP content for a seamless and fast user experience. BMW.com has seen 30% higher click through rates to national websites and 26% more mobile users overall. Finally, news content sites like Tencent who recently launched their news site built entirely with AMP saw a 2x increase in time on site and a 3.5x increase in page views per session.

WordPress
Support for AMP in the CMS ecosystem is critical to ensuring it’s easy to author content on the web. WordPress is one of the most popular tools for authoring web content, so Automattic, XWP, and Google are working together to advance the WordPress AMP plug-in. The recently launched 0.7 version includes native AMP support, allowing the creation of entire sites with AMP with the standard WordPress content creation workflow. This work includes the development of two full themes with native AMP support: News and Adventures (based on the AMP Start travel template). Ongoing work continues with a focus on adding AMP support to all core themes, and improving the integration of the AMP plugin in the development workflow in WordPress. The next major release will be v1.0 and is already in active development.

image2Native AMP ‘Adventures’ theme in WordPress

AMP URLs
We recognize the way platforms display AMP URLs are a concern for many, and earlier this year we shared our plans to improve AMP page URLs from Google Search. Since then, the AMP team has been working with Chrome and the web community to allow AMP URLs to point to a publisher’s domain when served from the cache. By utilizing the signed exchanges component of emerging Web Packaging technology, web content can be bundled and allow other parties to distribute it, while keeping the integrity guarantees of HTTPS. AMP project collaborators Food Network and Pinterest have built demos to showcase the capabilities of Web Packaging; one is shown below. To make this process easier, they used a new set of tools available at https://github.com/ampproject/amppackager. To learn more about the AMP team’s work on Web Packaging, see this complete blog post.

webpackagingA demo using Web Packaging with an AMP page from Google Search

AMP Stories
The possibilities of AMP extend beyond typical web pages, which is why we’ve also been collaborating with platforms and publishers on new, interactive formats like AMP stories. Content consumption on mobile is changing, with engaging, fullscreen storytelling formats becoming increasingly popular. While the web has all the capabilities to create content like this, the technical investment can be challenging. So to help meet this need, we are working with publishers to build the AMP stories format, a rich set of web components for storytelling on mobile. And while AMP stories are designed for mobile, they also work great on desktop. We’re continuing to prepare the format for a full release, but to learn more and try the developer preview now, visit ampproject.org/stories.

Examples of AMP stories from various publishers

AMP for Email
Additionally, we’re thinking about new ways to allow the broader web ecosystem to benefit from AMP. The AMP format is ideal for embedding content in other web-based experiences because it is performant, secure, and functional. While not immediately obvious, email is a great use case to enable actionable and interactive capabilities while maintaining the controls needed in an email client. To bring this experience to life, we’ve been collaborating with companies like Pinterest and Zillow. The AMP for email demos they have built showcase a new type of functionality that AMP facilitates inside the inbox.

image1Pinterest using AMP to enable interactivity inside an email

Most importantly, we want to thank the more than 500 contributors and additional collaborators we’ve worked with for helping to create a more user-friendly web. There are 6 billion AMP pages on the web, and they only exist through the work of the community that has come together to build the project. And we’re excited about the new capabilities and use-cases for AMP, which are brought to life by the folks working directly with the core AMP team. To learn about the latest in the AMP community, subscribe to our new newsletter, and to see all of the AMP talks at Google I/O 2018, check out the AMP YouTube channel.

Posted by Matt Ludwig, Marketing Lead for AMP at Google

AMP at Google I/O: Strengthening the AMP ecosystem

A first look at using web packaging to improve AMP URLs

One of the top pieces of feedback that people share about AMP is about the “google.com/amp…” URLs that are used when linking to a piece of AMP content in Google Search. A couple of months ago, the AMP team at Google outlined a plan to display better AMP URLs, and today we’d like to share progress on this effort.

Our approach uses one component of the emerging Web Packaging technologies—technologies that also support a range of other use cases. This component allows a publisher to sign an HTTP exchange (a request/response pair), which then allows a caching server to do the work of actually delivering that exchange to a browser. When the browser loads this “Signed Exchange”, it can show the original publisher’s web origin in the browser address bar because it can prove similar integrity and authenticity properties as a regular HTTPS connection.

Addressing this issue is great for users and publishers alike. Users see URLs that are consistent with their expectations based on the publisher identified on the search results page. Publishers benefit from retaining their brand in the address bar and the instant loading, thanks to pre-fetching.

To confirm the proposed tech works in practice, the AMP Project worked with two partners, Pinterest and Food Network, who signed their AMP content and published those signed exchanges to the web. To make this process easier, they used a new set of tools available at https://github.com/ampproject/amppackager.  Additionally a non-AMP–specific package tool is also available at https://github.com/WICG/webpackage/tree/master/go/signedexchange.

The Chrome team has built enough Signed Exchange support for developers to try it out. Starting with Chrome 67 on Android—in Beta channel at the time of writing—you can enable the experimental “Signed HTTP Exchange” flag under chrome://flags to use Web Packaging’s signed exchanges. In parallel with this experimental implementation, the Chrome team has also been collecting feedback from members of standards bodies, other browser vendors, security experts, and publishers and web developers to refine and improve the Web Packaging specifications.

Last, to tie everything together, the Google Search team has implemented a version of Google Search that illustrates the end-to-end flow. When a signed exchange is available, instead of linking to an AMP page served from Google’s AMP Cache, Google Search links to a signed AMP page served from Google’s cache.

webpackaging
There’s a lot happening behind the scenes to ensure that opening a Food Network result from Google Search is blazingly fast!

As you can see in the animation above, the final URL for the AMP content is on the foodnetwork.com domain, exactly as desired, and with the fast load speed that people enjoy with AMP pages. We’re very excited to validate that the imagined approach works across multiple layers of technology. However, it’s important to keep in mind that it’s still early and what you see isn’t ready to ship. As noted above, we expect more feedback from browser vendors and the web community to further refine the Web Packaging related specifications and work toward finalizing them.

Please reach out if you’re interested in this area and we’ll continue our commitment to provide updates as there is additional progress to share.

Posted by Kinuko Yasuda, Chrome Software Engineer, and Eric Steinlauf, Software Engineer, Google Search

A first look at using web packaging to improve AMP URLs

Join the AMP team at Google I/O 2018!

Starting Tuesday, May 8th, many members of the team will share the latest AMP updates and news at Google I/O 2018, Google’s annual developer conference. With many of the core AMP contributors working at Google, it gives us an opportunity to share the most recent work from the team.

This year there are many talks which include AMP across topics like e-commerce, WordPress, Progressive Web Apps and more. All of the talks will be live streamed on the I/O website and then added to the AMP YouTube Channel. For those of you who are able to join us in person, AMP also has demo tables at the Web Sandbox and Office Hours to answer your questions.

Talks that feature AMP content are listed below – be sure to check them out on live stream or watch the recordings on the AMP YouTube Channel afterwards!

Posted by Matt Ludwig, AMP Outreach/Marketing lead at Google

Join the AMP team at Google I/O 2018!

New functionality to help manage user choice in AMP pages

Over the past few weeks, we launched tools to help publishers collect user consent. Today, we’d like to give you an update on some new functionality  that may make it easier for publishers to collect consent on AMP pages.

Ad Network integrations with the <amp-consent> component

The DoubleClick and AdSense implementations of <amp-ad> now support <amp-consent>, including non-personalized ad serving. See detailed documentation about when and how to serve non-personalized ads from DoubleClick and AdSense and availability here.

Separately, if you are an ads or analytics vendor, you can learn more about how you can integrate with <amp-consent> here.

<amp-ima-video> support for <amp-consent>

Publishers can now collect consent when using the <amp-ima-video> component. See availability date here.

Using <amp-geo> for geolocation-based configuration of <amp-consent>

AMP provides a way to configure <amp-consent> with a remote call by using the checkConsentHref field. If you wished to incorporate geolocation-based logic for <amp-consent>, you  would need to resolve geolocation on the server-side, and customize the checkConsentHref response accordingly. Until now, it was not possible to have geolocation-based logic without a remote server setup.

The <amp-geo> component recently launched to enable content variation based on users’ approximate location, at the level of an ISO Country Code. Now, you can use this functionality in combination with <amp-consent>, which also means you could skip implementing checkConsentHref, if your configuration needs do not extend beyond geolocation. Checkout the ampbyexample.com  <amp-geo> sample or the <amp-consent> documentation.  

<amp-consent> support in AMP stories

Coming soon, <amp-consent> will be available to use with <amp-story>.  For the <amp-story> use case only, most of the UI will be pre-configured, though there will be publisher-specifiable choices for the look and feel in addition to full control over the text content. In addition, all <amp-consent> UIs in AMP stories will be blocking (i.e., the consent UI will not have an optional close button). See availability date here.

amp_consent

New features in <amp-consent>

checkConsentHref support for key-value pairs : This feature allows the checkConsentHref endpoint to respond with key-value pairs that can be propagated to and consumed by the ad network implementation. This is useful for publishers who want to communicate additional configuration information to ad networks to serve appropriate ads. This information is available to AMP components that wait on <amp-consent> to resolve. More details here.

Timeouts in <amp-consent> : With this feature, publishers could unblock components waiting for consent after a certain timeout. The feature also allows publishers to configure consent state that would be obtained by the AMP components blocked on the consent. More details here.

Availability

All this functionality is launching at different times in May, 18. Below is a summary of availability and you can go here for the latest updates.

Functionality Prod Availability Documentation Ready For Testing?
DoubleClick & AdSense 05/10/18 Link Yes
AMP IMA Video Integration 05/15/18 No
AMP Geo 05/10/18 Link Yes
AMP Stories 05/15/18 No

What’s next?

There are a number of features planned for <amp-consent> including supporting external consent flows and many others. If you have features in mind that haven’t been discussed yet, please add a comment to the master issue.

Also, don’t forget to check out the amp-consent usage examples on AMP By Example.

As always, thanks for your support. If you have any questions, let us know by opening an issue on GitHub.

Posted by Vamsee Jasti, Product Manager, AMP Project

New functionality to help manage user choice in AMP pages

Dynamic geo-personalization

AMP documents are often served from a third-party cache; this means it’s not always clear how to support dynamic or personalized content. There are a range of components and techniques to achieve many of these use cases (amp-list, amp-state, amp-form, and amp-iframe just to name a few), but there are some common cases the AMP team can make a lot easier.

In particular, businesses often want to vary content by the geographic location of the user. The best way to do this for pages in different languages is to use the hreflang attribute, but this isn’t the best solution for pages with just a small geo-dependent variation, like a promotion for a particular locale. This is why we’ve created the amp-geo component, which is ready for testing, and targeting a full release next week.

amp-geo

amp-geo makes it easy to vary small sections of web content for users based on an approximation of the users’ country-level location, similar to the level of an ISO Country Code. As a developer, there are just a few steps:

1. Include the amp-geo script

In the document <head>:

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

2. Include the amp-geo tag

In the document <body>:

<amp-geo layout=”nodisplay”></amp-geo>

3. Mark up your document with CSS to alter content based on the user’s approximate location

In the <style amp-custom> tag:

/* defaults */
.flag { background-image: "./starsandstripes.png"; }
/* override */
.amp-iso-country-ca .flag { background-image: "./mapleleaf.png"; }


In the document <body>:

<div height=”300” width=”500” layout=”responsive” class=”flag”>
</div>

Groups in amp-geo

Here’s a slightly more advanced case, where you can take advantage of the grouping feature in amp-geo to vary an aspect of English dialect by geo.

1. As above, include the amp-geo script in theof your document

2. Instead of just including an empty amp-geo tag, configure ISOCountryGroups to reduce the amount of code you have to write to specify behaviors across multiple locales.

In the document <body>:

<amp-geo layout=”nodisplay”>
  <script type="application/json">
  {
    “ISOCountryGroups”: {
      "soccer": [ "au", "ca", "ie", "nz", "us", "za" ],
      "football": [ "unknown" ]
    }
  }
  </script>
</amp-geo>

3. As in the previous example, mark up the document with CSS to alter content based on the user’s approximate location

In the <style amp-custom> tag:

/* defaults */
.football:after { content: 'football';}
/* override */
.amp-geo-group-soccer .football:after { content: 'soccer' }


In the document <body>:

<div>
The game is called <span class='football'></span>!
</div>

If the user is in any of the locales configured for “soccer”, then the text will read “The game is called soccer!” Otherwise, the text will read “The game is called football!”

You can find another, more complex example at AMP by Example, and learn about more extended capabilities of the feature in the official documentation; for instance, you can integrate amp-geo with your analytics through variable substitution, or use it in more complex interactions through amp-bind.

Try it out

amp-geo is targeting a full production release next week, but as of today you can test it on your site and tell us what you think. You can file bugs and requests in Github, and feel free to reach out and chat on Slack. We look forward to hearing from you!

Posted by Eric Lindley, AMP Product Manager

Dynamic geo-personalization

AMP and Advertising Conversions

The following was posted by Oliver Armstrong, VP of Product, Instapage. Learn more about Instapage’s AMP integration on their blog.

You don’t have to be an advertiser to know that mobile ad experiences are lacking. According to research from Google and SOASTA, the average load time for mobile landing pages is 22 seconds. For more than half of people who click through mobile ads, that’s at least 19 seconds too long:

accelerated-mobile-pages-bounce-rate

And as load time grows, so does the number of people who abandon a page:

accelerated-mobile-pages-bounce-rate-increaseA business can no longer bank on relevant and engaging ads. More than a click-through, your goal is conversion — and for that, you need a fast post-click experience.

Back in February, Instapage’s Senior Director of Engineering Piotr Dolistowski and I spoke at AMP Conf on How to Balance AMP Limitations with Optimization Features. During the presentation we announced our plans to build AMP functionality within the Instapage platform. Fast forward to today, and we are pleased to report that advertisers can now build fast post-click experiences faster than ever by combining the AMP framework with Instapage.

The post-click experience

Before internet advertising, ads delivered revenue. Prospects watched TV commercials, read print ads, and determined whether or not they wanted what you were selling. If your ad sold the product well, they’d call to purchase or mail a check for your product. Today on the internet, that’s not the case.

The ad doesn’t do the selling anymore. The ad is only the gateway to what does the selling: the landing page. Here lies the difference between the pre-click and post-click experience:

  • The pre-click experience: Everything that affects whether or not somebody clicks through your ad. These are things like platform, location, copy, media, targeting, etc.

  • The post-click experience: Everything that affects whether those who click through convert. These are things like visual hierarchy, message match, load time, trust indicators, etc.

Recent numbers have shown that search advertising service AdWords click-through rates leave much room for improvement, at an average of 3.17%. And while pre-click experiences can be further optimized, post-click experiences have lagged behind significantly.

The average AdWords conversion rate across industries is 3.75%. That means around 97% of people aren’t clicking your ad, and of the 3% who are, more than 96% aren’t converting.

To address this gap between the ad and landing page on mobile, Google and others spearheaded the development of the open-source Accelerated Mobile Pages project (AMP). Three years later, it’s become clear that one of the easiest and most effective ways to boost mobile landing page conversion rate is by improving load time.

AMPifying your pages: What search advertisers stand to gain

From preliminary research done by Google and SOASTA, we can safely assume that with faster landing page load times come more conversions. If 53% of your visitors don’t get to see your landing page because it loads in over 3 seconds, then you’ve lost more than half your opportunities to earn a conversion. Even with a stellar landing page, you can’t convert visitors you don’t have.

However, a safe assumption is still an assumption. Luckily, now that 31 million domains have used AMP to speed their pages, we have some data to back up the hypothesis.

In a Forrester Consulting study commissioned by Google, AMP publishers are seeing a 20% increase in sales conversion rate, 10% year-over-year increase in AMP site traffic, and 60% increase in pages per visit. Certainly, numbers any advertiser would love to achieve.

The trouble is, while building a landing page with AMP is quick and easy, building one for every campaign isn’t. And reusing a landing page for a different campaign can deter visitors just like a slow-loading one can. The reason is because it won’t have message match.

What is message match?

The landing page is where conversions happen. And just as speeding your load time can quickly boost conversion rate, so can ensuring that the message of your landing page matches the message of your ad with:

  • Similar colors  
  • Identical logos
  • The same media
  • Matching headlines

Conversions start with a foundation of trust, and message match establishes it by letting visitors know they’re in the right place. However, when you’re constantly running and testing new campaigns, it’s tough to customize every landing page to match every ad.

The middle ground

When advertisers need something quick-loading, quick to build, and fully customizable, now they can turn to Instapage’s new AMP functionality.

Using the most robust post-click optimization platform, you can pick a template and click to edit elements, drag to place them, and publish your accelerated mobile landing page faster than ever.

Where there was once a trade-off between quality and quantity, there is no longer. Today, you can quickly create landing pages with all the ingredients of a persuasive landing page:

  • No navigation
  • An attention-grabbing, message matched headline
  • Engaging media
  • Skimmable, benefit-oriented copy
  • Trust indicators like social proof and security badges
  • A compelling call-to-action

Today, when the ad alone can’t convert, every campaign needs its own landing page. By combining AMP and Instapage, you maximize opportunities for conversion by keeping visitors from bouncing, and compelling them to click your CTA. Go here to get started building AMP-compliant pages in Instapage.

Oliver Armstrong, VP of Product, Instapage. Learn more about Instapage’s AMP integration on their blog.

AMP and Advertising Conversions

New tools for building user controls in AMP pages

A couple weeks ago, we talked about our plans to give publishers and tech vendors tools to implement their preferred user controls on AMP pages. Today we’re announcing the initial availability of these tools.

We are introducing the new <amp-consent> component, in AMP, as a new tool for publishers to implement user controls. The component enables three main things:

  • Determining if the user should be asked to interact with the control.
  • Capturing the user’s decision — either a positive response or a negative response — and remembering it for future use during the current page lifecycle and future page loads.
  • Making the user’s setting available to elements on the AMP page in order to modify the page’s behavior.

Determining if the user should interact with the control

User controls may be applicable for certain users or circumstances but not others. Publishers can specify a remote URL to ping in order to determine if the user will be prompted to make a choice, thereby setting the control. If so, a UI container will be presented that is completely configurable within the page and can be used to capture the user’s choice.

Capturing the user’s decision

The currently supported semantics for a user control are either an “accept” or “reject” action. The publisher can designate a button corresponding to each of these choices. In addition, the publisher can implement a “dismiss” action, which will result in neither state being set and the user control remaining unresolved.

Modifying element behavior

Once the user has made a choice, the publisher can specify how the page should behave to respect that choice. By adding a simple HTML attribute, publishers can configure AMP elements  to be blocked from loading if the user setting is undetermined or is in a negative state (that is, the user rejected). This makes it possible to, for example, only load ads and/or analytics when user consent is given. Additionally, elements can be further customized by vendors to have more sophisticated behaviors that depend on the user’s setting.
Check out the documentation to learn more about how to implement and configure amp-consent. You can find some sample implementations on AMP by Example as well.

We plan to add more features to <amp-consent> over time. You can find some already planned ideas on GitHub and we invite you to submit new ideas by filing an issue. If you’re a vendor who wants to customize how your AMP extensions behave based on user controls, please get started by following our contribution guidelines and reading documentation on the topic here.

Posted by Rudy Galfi, Product Manager for AMP

New tools for building user controls in AMP pages