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

Enabling publishers to implement user controls on AMP pages

Read new details about this post here

Users today want additional control over their online experience. Additionally, publishers are faced with a variety of different demands on how they provide notice and choice to their users –  from vendor policies to evolving legal requirements, like the forthcoming General Data Protection Regulation (GDPR). The open source AMP Project is working to give publishers and tech vendors tools to implement their preferred user controls and to support their varied individual compliance requirements on their AMP pages.

A new component is currently under development (Update: development finished. See docs here) and will be available for integration into AMP pages soon. This will enable publishers to implement more easily the notice, choice and consent flows that they deem necessary for their websites. The features to be launched include the ability to show choices in user interface notices via “accept” and “reject” semantics, and configuration of AMP element behaviors in response to users’ choices. We encourage you to check out the corresponding GitHub issue for more details, to offer comments, and to subscribe and stay up to date.

Approaches to implementing user controls and achieving compliance with laws, such as GDPR, will vary by publisher. Therefore, we encourage everyone to engage and communicate requirements using the AMP Project GitHub. We welcome specific feature requests and ideas in the project at any time by filing new issues.

In addition, AMP supports over 100 vendor-provided capabilities ranging from analytics to ad tech to video players and other kinds of content embeds. As a publisher, if you want to ensure your vendors integrate with AMP’s user control features, please encourage the vendor to engage with the AMP Project.

In a couple of weeks, we will publish documentation and examples to help publishers with implementation of the new component. Please watch this space for further updates as we continue to share more details. Update: See this post for updates.

Posted by Rudy Galfi, Product Manager for AMP

Enabling publishers to implement user controls on AMP pages

Jung von Matt’s road to the world’s fastest* automotive content marketing website

Posted by Thomas Feldhaus, Managing Director, Jung von Matt/NEXT ALSTER

Read more about BMW.com in the AMP case study on AMPproject.org or on Jung von Matt’s page here.

“What a nice challenge!” That’s what we thought when we won the job to relaunch the digital home of BMW, BMW.com, and to excite users by transforming the website from only a web showroom to a data driven, entertaining and helpful  state of the art automotive content marketing platform.

Our creatives, strategists and consultants discussed every little detail of the task: digital strategies, content strategies, media strategies, social media strategies, KPIs and so on: everything needed to reach the long-term goal of getting car enthusiasts and those generally interested in mobility excited about the beauty of the BMW brand.

As an agency well-known for creative excellence, our friends in the creative department wanted users to plunge into a digital adventure that would totally ‘wow’ them – with everything an ultramodern user experience has to provide: inspiring articles with high-res images, smooth full-screen videos and a state-of-the-art user interaction design. By setting up this seamless experience, we knew we could meet our goals of reaching users when they were interested in our content.

Let the code experts take the lead and performance will follow

There is a known cliche cliché that developers are just seen as the “code monkeys” who put a stop to any creative concept. Not in our case, because we all agreed that the critical  success factor would be: PERFORMANCE!!!

Our simple formula was “No performance, no fun. Mo’ performance, mo’ fun!” Because what’s the value of super-fancy content if it takes you ages to load on your mobile device.

By using a technical strategy that allowed performance and visual and engaging content to coexist via the combination of AMP and PWA (Progressive Web Apps), we hardly had to make any compromises. Not to mention the fact that we liked that AMP pages are linked and load quickly from all platforms, like Google Search and Twitter.

So in close collaboration with UX, designers and editors we started working on the new BMW.com, with our focus turned 100% to delivering the best-ever mobile user experience.

Close collaborations and requirements for fast, engaging user experiences

Every creative wish brought to our attention was checked for its feasibility with AMP. With the limitation of 50 KB in CSS, we started to research, develop and test whether a desired feature was realisable with the PWA technology. For example, we were able to implement the feature of swiping smoothly from one article to the next whilst remain super-fast – an experience users would normally only expect from a native app.

If the team said, “There’s no chance to implement the feature without a loss of speed”, the whole agency backed our decision, because we were all committed to one divine command: performance.

It also certainly helped that during our development journey, the AMP team was friendly and helpful via Slack, GitHub and in person at conferences.

The world’s fastest* automotive content marketing website

Working with AMP not only demonstrated  to us what a great technology it is, but also what is possible if the development and creative teams agree on a plan from the very first line of code.

The result of all the work: a website that loads unbelievably fast. The all-new BMW.com – possibly the world’s fastest automotive content marketing website. Read more about our results in the recent AMP case study.

Challenge us

Are you up for a challenge? Which major car brand has the fastest automotive website? See how we score on the Visually Complete Index on webpagetest.org. #automotivespeedindex

*Possibly the world’s fastest automotive content marketing website. Please take a look at our challenge for further details.

180327-BMWCOM-AMP_white.jpg

Read more about BMW.com in the AMP case study on AMPproject.org or on Jung von Matt’s page here.

Jung von Matt’s road to the world’s fastest* automotive content marketing website

Standardizing lessons learned from AMP

For over two years, AMP has been a leading format for creating consistently excellent user experiences on the web, and Google continues to invest strongly in it as our well-lit path to achieving a user-first web. We’ve long believed that the goal of a user-first web can be built in many ways, but, until we began working on AMP, knowing exactly what that meant and how it could be verified was a challenge. Based on what we learned from AMP, we now feel ready to take the next step and work to support more instant-loading content not based on AMP technology in areas of Google Search designed for this, like the Top Stories carousel. This content will need to follow a set of future web standards and meet a set of objective performance and user experience criteria to be eligible.

 

The origins and development of AMP

We started working on AMP because we were seeing the mobile web feel clunky and slow, falling behind the tightly-integrated, highly-optimized user experiences that walled garden platforms can offer. Yet we also knew there wasn’t a fundamental technology problem: you could build great experiences on the web with the right knowledge, resources, and management support. Thus we set out to create a framework that would provide a well-lit path to building great web-based experiences: AMP would be well documented, easily deployable, validatable, and opinionated about user-first principles.

AMP has seen fast development as an open source project with weekly releases and constant adjustment to publisher and user feedback. The lessons learned in 2+ years of iteration based on the extensible web are ones we hope will be useful in informing the web standards process. Credit goes to Tim Kadlec and Yoav Weiss for kicking off the Content Performance Policy idea in 2016 and convincing us that we should go down this path. This idea has now morphed into the Feature Policies and become a real thing that will help with AMP-like performance guarantees without relying on AMP going forward.

We feel that the mission underlying AMP is more important than ever before and Google will continue to invest strongly in developing AMP. Current focus areas of investment are: engaging storytelling experiences with AMP Stories, dynamic email, JS in AMP, pushing the boundaries of e-commerce on the web, and developing additional deep integrations between platforms and content into Google Search.

 

Standardizing lessons learned

The standardization work motivated by AMP is well under way through various WICG projects. Google’s goal is to extend support in features like the Top Stories carousel to AMP-like content that (1) meets a set of performance and user experience criteria and (2) implements a set of new web standards. Some of the proposed standards in the critical path are Feature Policy, Web Packaging, iframe promotion, Performance Timeline, and Paint Timing. Equally important, the Chrome team last year released the Chrome User Experience report. Its underlying data provides, for the first time, web-wide real world measurements for performance and user experience.

In January we announced that we plan to use Web Packaging as recommended by the W3C TAG finding for providing privacy preserving pre-loading together with being able to serve AMP content under the publisher URLs. We’re super excited about Web Packaging because it isn’t AMP-specific technology, so we’ll be able to use it for instant-loading of all packaged web content!

Features like the Top Stories Carousel in Google Search rely on AMP’s embeddability features. For example, it uses privacy-preserving pre-rendering; AMP-based throttling of CPU, RAM and bandwidth usage; and built-in container-embed-communication. We now feel confident that with iframe performance isolation through site isolation or cooperative multitasking, web packaging, Feature Policies, iframe promotion, and a document opt-in, it’ll be possible to make such features available to non-AMP web content that implements those standards.

That’s a lot to keep track of, so we plan to keep this page updated regularly to track progress. While we fully intend to make these changes in Google Search, as with any Google Search feature they will undergo experimentation and user testing and only launch if results are positive for users. It is hard to estimate when these changes will roll out as it depends on future progress of standardization and browser implementations. Achieving consensus between the community and implementers is an important part of the standardization process, which may require changes to this plan.

In summary: We are taking what we learned from AMP, and are working on web standards that will allow instant loading for non-AMP web content. We hope this work will also unlock AMP-like embeddability that powers Google Search features like the Top Stories carousel. Meanwhile, AMP will be Google’s well-lit path to creating great user experiences on the web. It will be just one of many choices, but it will be the one we recommend. We will continue to invest heavily in AMP. A key example of how we continue to innovate on user experience on the web are AMP Stories and we hope to provide insights to future web standards along that way.

I and the rest of the AMP team are incredibly excited about the future of the open web and can’t wait to see what all of y’all will be building! #teamweb

Posted by Malte Ubl, Tech Lead for the AMP Project at Google.

Standardizing lessons learned from AMP

Faster ads with ‘Render on Idle’

We’ve launched a new feature called “Render on Idle” now available for publishers using the DoubleClick AMP ad tag, and any ad network choosing to implement Fast Fetch can also take advantage of it. With Render on Idle, ads load 12 viewports from the user’s scroll position (as opposed to 3) when the browser is idle, no other page content is being retrieved or rendered. This delivers better ad performance by loading ads earlier in the page lifecycle.

In early tests with publishers using DoubleClick AMP ad tags, we’ve seen a 13% increase in impressions per page (giving Fast Fetch an overall +18% increase compared to Delayed Fetch) and 0.5% increase in clicks and viewable queries from this feature.

Render_On_IdleFast Fetch is AMP’s way to make ad requests earlier in the page lifecycle, ensuring a great user experience and better ad performance by reducing the likelihood of encountering an empty ad slot. When Fast Fetch was launched in Aug 2017, we saw some significant increases in impressions and viewability for ad networks that adopted it.

If you’re an ad network:

Consider migrating from Delayed Fetch to Fast Fetch to receive these benefits. See instructions here.

If you’re a publisher:

Most publishers won’t have to do anything and will automatically reap the benefits of using a Fast Fetch-enabled ad tag. However; there are a few exceptions that cause the AMP runtime to automatically fall back to delayed Fetch. The table below lists these exceptions and the mitigations that allow a publisher to take advantage of Fast Fetch. Note that Delayed Fetch will not be supported after 3/29/2018; please see this GitHub issue for more information.

In summary, if you are using remote.html for any reason, switch to using Real-Time Config (Instructions).

If you are using  ‘useSameDomainRenderingUntilDeprecated’ in amp-ad, then remove this attribute your tags and instead, use the SafeFrame API, which is now exposed to ads on AMP pages (Help Center Article).

As always, we look forward to your feedback or questions.

Posted by Keith Wright, Technical Lead, AMP Project

Faster ads with ‘Render on Idle’

Ads and AMP: Year in Review and Looking Ahead

In the world of online advertising, the saying “time equals money” seems more pertinent than ever. Consumer attention is a scarce commodity, meaning ads need to be not only relevant and engaging, but also fast.

Since the Accelerated Mobile Pages (AMP) Project launched in October 2015, over 31M domains have embraced AMP to grow their business with faster and better mobile web experiences. In the past year alone, we’ve seen publishers on AMP reach several milestones: they’re generating up to $6 million per week from ads using Google AdSense and Doubleclick Ad Exchange, earning 3X more revenue per day, and leveraging over 100 ad tech platforms supporting the open source AMP Project.1

hero_image_2

Publishers like MailOnline Advertising are implementing optimized strategies to maximize revenue on their AMP pages. After adjusting their AMP monetization strategy to include a server-side unified auction using Prebid, they saw a 6X increase in AMP revenue on their site Metro.

Another AMP partner, India Today, is seeing 23% more revenue on their AMP pages compared to non-AMP pages, despite having fewer ads on their AMP pages. Like MailOnline and India Today, all publishers should approach monetizing their AMP pages with the same optimizations as their non-AMP pages to ensure they are capitalizing on this growing revenue opportunity.

But we know there is still progress to be made. Today at AMP Conf, we announced several new partnerships and technologies to help the entire ecosystem continue growing their businesses with AMP in more flexible and open ways.

Greater flexibility and performance with regular ads on AMP

When the AMP Project was launched, a top priority was ensuring ads did not get in the way of the AMP experience. Since then, the AMP Project has worked hard to bring better performance and capabilities to ads on AMP.

A key step along the way was the release of Fast Fetch, a faster mechanism for loading ads on AMP pages. Fast Fetch renders ads up to 2.7 seconds faster compared to the legacy mechanism. A lot can get done in 2.7 seconds. In fact, in 2.7 seconds, there are over 130,000 Google searches made, 140,000 YouTube videos viewed, and 5,000,000 emails sent.2 Since announcing Fast Fetch in August 2017, we’ve shifted our focus to making sure all AMP partners can apply the speed and performance of Fast Fetch to their own businesses.

2.7seconds

Today we announced Real-Time Config, a new component enabling publishers to implement third-party technology partners while also leveraging the speed and performance of Fast Fetch. Real-Time Config allows publishers to leverage the benefits of Fast Fetch without compromising their monetization strategy. For example, publishers can now leverage their data management platforms or server-side demand aggregators such as Prebid Server on their AMP pages.

Expanding AMPHTML ads with new tools and partnerships

While ad serving is one component that impacts AMP monetization—the ad creatives themselves are another. We recently rebranded AMP Ads as “AMPHTML ads” with the goal of accelerating awareness and support for these faster and more secure ads.

AMPHTML ads load up to five seconds faster than traditional ads and prevent the spread of malware, ensuring a brand’s experience is both viewable and secure. AMPHTML ads also work across both AMP and non-AMP pages, so creative developers can build once and serve their ads anywhere.

A number of technology partners already support AMPHTML ads, including Triplelift, Celtra, and DoubleClick. Today at AMP Conf, we moved closer to the goal of making all ad experiences on the web faster and more secure, with AdZerk, Logicad, and Google Web Designer  announcing support for AMPHTML ads. After building support for AMPHTML ads, Japanese marketing technology platform So-net Media Networks (Logicad) saw a 33% decrease in ad load time and 30% increase in CTR.

To start delivering faster, more secure, and better performing ad creatives with AMPHTML ads, leverage one of the open-source AMPHTML ad templates on AMPbyExample or reach out to a supporting platform to help you get started.

AMPHTML Ads Demo Gif

The AMP Project was launched with the goal of making the open web better and faster for all. We look forward to continuing our work with the entire ecosystem to help our partners build growing and sustainable businesses with AMP.

Posted by Gabe Bender, Product Marketing Manager, AMP Project, Google

1 Internal Data, Google, February 2018
2 Internet Live Stats, February 2018

Ads and AMP: Year in Review and Looking Ahead

AMP’s New Horizons

Hallo uit Amsterdam! We’re kicking off the second AMP Conf today in Europe, celebrating the global reach of the AMP community. This year we have over 400 developers joining the AMP team in Amsterdam for two days and thousands more watching the livestream, marking our biggest event yet. Since last year’s AMP Conf, we’ve seen AMP continue to grow globally as more websites adopt and experiment with the format, with strong results. Europe is home to many AMP websites like Spiegel Daily, which was built with AMP, that demonstrate the strength of the format across devices. And Russian web design studio Eski.Mobi are using AMP for their ecommerce clients, seeing double digit conversion rate increases across many sites.
As a result, there are now over 31 million domains that have created more than 5 billion AMP pages across  publishing, ecommerce and travel. We’re excited and encouraged by the progress, but there is much left to do to continue improving the web user experience. The AMP team is focused on expanding AMP’s horizons, taking its benefits to more websites and platforms across the web.

Telling visual stories

Content consumption on the web continues to evolve, especially on mobile. And while some stories are told best through text, the AMP Project wanted to ensure publishers can invest in new ways of storytelling and engaging readers on the open web. That’s why we’ve been working on the AMP story format.

image2

AMP stories use the technical infrastructure of AMP to provide a reliably fast, beautiful experience on the web. And AMP stories live on the web, being hosted on a publisher’s site and can be easily shared or linked. Check out some of the latest examples of AMP stories on ampproject.org/stories. Today AMP stories are available for everyone to try on their websites. As part of the AMP Project, the AMP story format is free and open for anyone to use.

Empowering commerce

Ecommerce websites have also seen progress with AMP as the format matures to support greater interactivity. Like US Xpress which is projecting to save over $1M a year using AMP pages to recruit truck drivers, or Event Tickets Center which has seen a 20% lift in conversion rates compared to their responsive site. The AMP team is committed to providing e-commerce websites with new functionalities like the datepicker and payment methods to make AMP sites even more useful. And we’re excited to highlight AliExpress in particular, which just launched their new AMP mobile site, decreasing load time by >40% and increasing conversion rates for new users by >4.3%.

image3

The AMP ecosystem

The growth of AMP is also a result of strong support across the web ecosystem. Platforms and services across the globe such as Baidu, Sogou, VK (Russia), 360 Search and Twitter link out to AMP pages. Twitter in particular has seen positive results with their AMP support, seeing a 10% reduction in page load abandonment on AMP pages compared to non-AMP. Many publishers and businesses have websites that rely on a CMS platform. Sites on platforms such as Drupal, BigCommerce and Squarespace are able to publish AMP pages. And today, Google, together with XWP and Automattic, released the 0.7 version of the WordPress AMP plugin to better support an all-AMP experience in WordPress. We’re committed to ensuring the web ecosystem allows for the creation of AMP pages.

New surfaces for AMP

Last year, we looked at everything AMP was capable of and saw a huge opportunity for AMP to modernize one of the most popular and widely used communication channels: email. Today we announced AMP for Email — a new way to include AMP components in email messages across all platforms. Many people rely on email for information about flights, events, news, purchases and more— over 270 billion emails are sent each day! With AMP for Email, information in email messages can be dynamic, kept up-to-date and made actionable. We’re really excited about the possibilities — developers and businesses will be able to send more expressive and interactive email messages than ever before.

Companies like Pinterest, Booking.com and Doodle have already built new experiences using AMP for Email, and we’re excited to see what others will do soon. The AMP for Email spec is available today and Gmail is planning to support it later this year. In the meantime, developers can access a developer preview for Gmail, here.

image1

Community

Ultimately the success of an open source project like AMP is dependent on the contributions and support across the web. I speak for the entire AMP team when I say that we are extremely grateful for all the input, contributions, and support we’ve seen over the past several years. We have over 560 contributors on Github, with the majority (88%!) outside the core AMP team at Google. And as always, we sincerely would love for more of you to get involved and build the project with us. Our weekly design reviews, now at global-friendly times, are a great way to get started.

image4

While there is still more to be done, we’re excited by the enthusiasm for making the web a place where users and websites can thrive, and I hope I’ve conveyed the energy in the room here in Amsterdam. Be sure to watch all of the talks from this year’s AMP Conf on AMPproject.org/amp-conf and follow us on Twitter using the #ampconf hashtag. Proost!

Posted by Malte Ubl, Engineering Lead, AMP Project, Google

AMP’s New Horizons