amp-bind brings flexible interactivity to AMP pages

We invited developers to try out amp-bind in April to experiment with greater AMP page interactivity. Today we’d like to highlight that amp-bind is generally available and take a deeper dive into the feature, in order to give you a sense of just how much this expands AMP support—especially for e-commerce.

What is amp-bind?

We introduced amp-bind in an April blog post by saying:

amp-bind fundamentally changes the model for interactivity in AMP, while retaining AMP’s essential performance and UX assurances. amp-bind works more like a coding layer on top of AMP—going beyond the AMP Project’s historical approach of limiting interactivity to scoped, use-case-driven components like amp-carousel and amp-accordion. amp-bind links user actions with triggers for different document states, giving developers much more freedom in the types of interactions they can define.

While this definition is technically accurate, it’s also pretty abstract. The feature is so flexible that a broad description doesn’t really reveal what it can actually do.

What can amp-bind do?

One good way to start is to take a look at some of the basic behaviors for the feature. After that, you can try it out yourself by tweaking some of the code in the AMP by Example playground.

Building on what you’ve learned after mastering the basics, the examples below show you some of what’s possible when you combine amp-bind with other AMP HTML features.

  • Product color and size selection (detailed example below)
  • Server-side filter & sort (detailed example below)
  • Search results without page reload (detailed example below)
  • Search auto-suggest (detailed example below)
  • Carousel slide indicators (detailed example below)
  • Trigger navigation from “select” input
  • Smart buttons that update the state of the entire page state based on “like”, “thumbs up”, “add to cart”, etc. Could reveal a carousel of personalized recommendations based on this action, increment number of items in cart or “like” count.
  • Toggle between different views (list v. grid) of an array of items.
  • Toggle overlaying UI panels to customize product options before purchase
  • Hide/show tooltips
  • Use custom sliders to filter amp-list data
  • Change currency (e.g. from US dollars to euros) w/out updating the entire page
  • And more!

Product color and size selection

bind-product.gif

This example incorporates a number of features that are commonly found on product detail pages, though these features could also be separated and used individually if you don’t need the entire interaction. Here, amp-bind coordinates events and actions between amp-form, amp-selector, amp-carousel, and some basic CSS.

  1. User makes a selection in amp-form (with inputs using amp-selector for easy customization and clear semantics)
  2. There’s an event associated with each of these selections
  3. This event is coordinated through amp-bind to do a few things:
    1. trigger CSS display of one of three different amp-carousels (one for each color of apple)
    2. trigger “disabled” attributes (and therefore style) on form inputs where a particular size isn’t available for a particular color apple
    3. trigger updates to the price, based on the color of the apple

Because the page uses amp-bind, the user has visual confirmation of their selections, so they have the best possible understanding of their purchase before submitting the form.

Server-side filter & sort

bind-filter-sort.gif

Sorting & filtering with server-side data is now possible through amp-list[src] binding. It uses amp-bind to coordinate events and actions between the “select” input and amp-list. Let’s take a look step by step:

  1. User selects a sorting or filtering rule (let’s say “low to high”)
  2. There’s an event associated with changing the “select” input state
  3. This event is coordinated through amp-bind to trigger an update to an amp-list’s src attribute, appending a query param matching the sorting rule (?sort=price-ascending), which sends a call to the server
  4. The server responds with a list of results according to the sorting rule, which are rendered by amp-list according to its defined template

Because bind events can be triggered by an array of inputs, you can use this basic pattern for many other features, like adding additional results via a “show more” button, or paginating list results, so users can explore additional items in a list without re-loading the parent page. Developers You could even implement an experience where users refresh a list of personalized recommendations.

Best practice: statically display results on first loading the page, using div[placeholder], so there is no delay before the results are displayed to the user. Then, when the user interacts with the sorting & filtering mechanism, you can use amp-bind to issue a call through amp-list to an updated URL defined in the “src” attribute to display the results.

Search results without page reload

bind-auto-search.gif

By fetching and displaying search results inline without a full page reload, users save bandwidth and can have a more seamless experience by retaining the context of the current page. The implementation approach is another application of binding to amp-list, this time using amp-form as well.

  1. User searches for “pear” through amp-form
  2. The event triggered by this search is coordinated through amp-bind to trigger an update to amp-list’s src attribute, appending a query param matching the search query (?searchProduct=pear), which sends a call to the server
  3. The server responds with a list of results according to the search query, which are rendered by amp-list according to its defined template

Search auto-suggest

bind-autosuggest.gif

This one (code here) adds a little bit more complexity to the amp-list[src] binding. It uses amp-bind to coordinate events and actions between amp-form and amp-list.

  1. User starts typing in the search box
  2. There’s an event associated with text input into form fields (debounced, to prevent these events from getting triggered with every button press)
  3. This event is coordinated through amp-bind to do two things:
    1. trigger visibility on a hidden div containing amp-list
    2. trigger an update to that amp-list’s src attribute, which sends a call to the server containing the partial query that the user has typed into the form
  4. The server responds with a list of potential results, based on this query, which amp-list renders through its template — and the user sees these options as auto-suggestions
  5. The amp-list template coordinates tapping on any one of these suggestions to update the form field, completing the interaction

Note: remember to turn off the browser’s automatic auto-suggest if you’re building your own, to avoid overlaying two different UIs for this function at the same time

Take a look at the example on GitHub to dive more into how this works. You can just copy-and-paste the example into your own page, and customize the template and your back end to serve just about anything: on one end of simplicity you could have more granular suggestions for words that the user could search for, and on the other you could display detail-rich cards for product results with prices, pictures, and ratings.

Carousel slide indicators

bind-carousel-indices.gif

Here amp-bind is simply used to coordinate the index of amp-carousel with CSS styles on a simple page indicator (those four dots in the lower-left of the carousel).

  1. User swipes the slide in the carousel
  2. There’s an event associated with the change of the visible slide
  3. This event is coordinated through amp-bind to trigger a change in CSS styles for the pagination dots

This capability means that developers can configure a wide range of affordances to indicate that the carousel is swipeable, and don’t need to rely on the amp-carousel default arrows.

What’s next?

amp-bind is stable now, but it’s still actively getting more features. Based on feedback we’ve gotten from the community, we’re adding capabilities that make the component even more powerful—without sacrificing AMP’s essential performance and UX guarantees.

Among other things, the roadmap includes: updating URL query parameters and corresponding history state from bindings, to complete the sorting/filtering use-case; enabling messaging between iframes and their parent document, to enable rich interactions that cross the boundary between what can be inlined & embedded in AMP; and updated bindings to coordinate page state with forms validated through server calls.

Go forth! Explore! (and share what you find)

In the end, developers out there will probably discover more new capabilities than what we’ve identified here on the AMP team. So go forth! Explore! Experiment with amp-bind and let us know what you find—we’d love to see what you’ve built, and share with the broader AMP community.

As always, we want your feedback for amp-bind, and for any other feature you need support for in AMP. We’re looking forward to hearing from you!

Posted by Eric Lindley, Product Manager, AMP Project

amp-bind brings flexible interactivity to AMP pages

AMP Roadmap Update for Q2

We’ve updated the AMP Roadmap with our new projects and progress on existing priorities. Specifically we are focusing on format, analytics and ads improvements. Highlights from these areas below.

Format

We’re doubling down on e-commerce, engagement, and developer tools this quarter, with big features in all three targeting completion by the end of June.

amp-bind, a flexible event binding system supporting more interactivity in AMP, is now available via origin trials, and targeting launch later this quarter. A recent addition to amp-bind is the ability to bind to amp-list’s src parameter. This opens up a wide range of functionality, including in-place sorting, filtering, pagination, and search results pulled in from an arbitrary server without re-loading or navigating the page. In addition, we’re implementing a method to support client-side sorting and filtering. These, along with two in-progress features, asynchronous form validation and form input autocompletion, should make it a lot easier to build robust e-commerce pages in AMP.

We’re also continuing to work on creating rich, engaging experiences in AMP. First, to better support rich imagery in AMP, we’ve refocused our efforts on improving amp-image-lightbox, so developers can easily implement an immersive lightbox experience synced with amp-carousel. Second, we’re continuing to work on scroll-bound behaviors. We’ve switched up the approach a bit to start by exposing a flexible framework for scroll-bound animations. Once that’s in place, we’ll re-purpose the general solution for parallax scrolling and contextually-displayed headers.

Finally, we’re building a handful of new templates for AMP Start to help developers in more verticals quickly make great-looking AMPs. To help customize the templates on the site, we’re also making it easier to configure AMP Start pages without having to edit code directly by developing an AMP Start configurator.

Analytics

Several recent improvements have extended amp-analytics capabilities, particularly to support requirements for AMP ads. Tracking element visibility is now more flexible with the introduction of a waitFor property that can be specified alongside other visibility trigger parameters. We also plan on adding support to specify when visibility data should be reported (tentatively called “reportWhen”), which is useful for totals information (data that’s accumulated throughout the page lifecycle and reported just once).

We’ve introduced a mechanism to support varying the Client ID depending on viewing context. This has been employed as part of an announced change in Google Analytics — launching soon — that will bring consistency to how users are counted across AMP and non-AMP pages served from a publisher’s domain. It is available for other analytics vendors to use as well.

During the rest of the quarter, we will focus on launching support for AMP extensions to collect data using amp-analytics. We will also work on adding filter support to transform AMP variables prior to their being sent as part of analytics hit requests.

Ads

This quarter, we are focused on improving UX behaviors of existing ads, adding more options to improve monetization, and continue focus on supporting the ability to serve AMP ads using DoubleClick for Publishers.

We listened to your feedback that the current default ad placeholder was more conspicuous than we’d like it to be. We experimented with a few different options and settled on one that is more subtle than the previous version, which will roll out soon. We are also looking into optimizing how we load non-AMP ads served to AMP pages to help minimize the time a user sees the ad placeholder.

We are always working on ways to improve publisher monetization. Next month, we expect to launch the amp-ima-video component to allow serving pre-roll ads via the IMA SDK in the built-in browser video player. When a user dwells on the page for awhile, it can make sense to swap out an ad for another. We are working on a feature to auto refresh ads after a minimum interval to allow publishers to monetize more ads for the same number of pages.

The DoubleClick team is working on correlating ad requests on a single page to allow publishers to run ads that require competitive exclusions and roadblocks. The DoubleClick formats team is also working on the ability to deliver AMP creatives using the custom creatives type, which is expected to launch by July.

* * *

Thanks to the AMP development community for your work and feedback. As always, please let us know if you have any issues or feature requests.

Posted by Rudy Galfi, Product Manager, AMP Project

AMP Roadmap Update for Q2

Bringing the speed of AMP to search & display ads

The following was posted on Google’s Inside AdWords Blog by Jerry Dischler, Vice President, Product Management, Google.

Succeeding on mobile starts with getting the basics right. People choose brands that meet their needs instantly and seamlessly. That means no matter how great your site looks, if it loads slowly, users will leave and you’ll miss out.

The open source Accelerated Mobile Pages (AMP) Project launched 18 months ago to help make the web better with faster experiences. Since then, we’ve been expanding how we surface fast-loading AMP pages on Google Search — starting with the top stories carousel and extending to organic search listings.

Today we’re introducing two new ways to harness the speed of AMP to improve advertising performance. First, we’re launching a new AdWords beta that lets you use fast-loading AMP pages as the landing pages for your search ads. Second, we’re speeding up ads served across the Google Display Network by using the same technology that makes AMP pages so fast.

Improving campaign ROI with AMP landing pages

We’ve said before that the median page load time for an AMP page from Google Search is under one second. If that wasn’t already fast enough, last week we announced that these pages are now twice as fast. No wonder AMP has been so widely adopted – more than 2 billion AMP pages have been published from 900,000 domains. Advertisers like Johnson & Johnson, Toll Brothers and eBay have already seen increased engagement with their brand by directing people to AMP pages from organic search results.

The new AdWords beta brings the performance benefits of faster mobile pages to search campaigns. Now, when advertisers link their search ads to AMP landing pages, consumers will get the fast mobile web experiences they’ve come to expect from AMP pages on Google Search. If you’re interested in participating in the beta, sign up here.

“We understand the importance of speed in delivering effective advertising campaigns. That is why we’re incredibly excited to apply the speed of AMP to our paid campaigns in AdWords,” says ‎Aaron Cocks, Online Marketing Optimization Manager at Toll Brothers

“Johnson & Johnson has seen great results in testing AMP with our product information pages. For specific pages, we’ve seen page speeds improve by 10x and engagement rates improve by 20%. J&J is looking forward to expanding our application of AMP,” says Paul Ortmayer, Head of Digital Analytics – EMEA at Johnson & Johnson

Ensuring display ads are seen with AMP

When ads load fast, people are more likely to see them. That means media budgets work more effectively and messaging strategies realize their full potential. Fast-loading ads also create better experiences for users.

To make ad experiences on the web a lot better and faster, the AMP Project launched the AMP Ads Initiative last year. The Initiative applies the technology powering fast-loading AMP pages to ads.

As of today, a significant number of ads shown on AMP pages across the Google Display Network are automatically converted and served in the new AMP ad format. We’ve found these ads load up to 5 seconds faster than regular ads even though the creative looks exactly the same. Ultimately, this ensures that your messages are actually seen by your intended audience and that the experience users have with your brand is seamless.

Speed matters. To meet the needs of today’s customers, you have to be fast. Bringing the speed and performance of AMP to advertising will help you deliver more effective campaigns that keep up with accelerating consumer expectations.

Posted by Jerry Dischler, Vice President, Product Management

Bringing the speed of AMP to search & display ads

Growing the AMP Ads Initiative

We launched the AMP Ads Initiative last year with the ambitious goal of fixing ad experiences on the web by bringing the speed and performance of AMP to advertising. AMP Ads are faster, lighter and more secure — loading up to 5 seconds faster than regular ads on AMP pages — making them more viewable and delivering better user experiences.

With a growing network of technology platforms, publishers and advertisers supporting AMP Ads, the Initiative is taking root and beginning to drive positive results for the industry. For example, native ad tech platform Triplelift helped boost Time Inc’s revenue and viewability with native AMP Ads that are 6x faster and 3x lighter than traditional native ads.

Today at Google I/O, the AMP Project shared its vision for how AMP Ads are positioned to change the way we build, serve and measure ads. Here’s how we’re making progress towards that goal.

Making it easier to build AMP Ads

Fixing advertising on the web starts with fixing the way ads are built. Just like AMP pages, AMP Ads are built in AMP-HTML, providing a streamlined framework for building creatives and avoiding the redundant scripts that slow down ads. To make it easier for advertisers and publishers to build these creatives, creative management platform Celtra now supports building AMP Ads.

Celtra’s AdCreator platform is already used by thousands of brands and publishers globally to build immersive, rich media ads. By integrating support for AMP Ads in this easy-to-use drag-and-drop software for creating ads, all of their customers can now easily create beautiful and fast AMP Ads.

“Mobile advertising campaigns today are often hampered by broken, non-viewable ads with a poor UX experience,” says Aleksander Kmetec, VP of Engineering at Celtra. “The need for better UX and fast-loading ads are not only the future of digital advertising, but a necessity for developing markets that are more sensitive to data. We are proud to join the AMP Project and believe that AMP helps pave the way for better creative, a significantly improved customer experience and higher mobile ad engagement rates.”

We hope that with Celtra’s AdCreator platform, creative developers will explore building new and interactive creatives with AMP Ads. But in case they need more inspiration, we shared six new rich formats on AMP by Example, a showcase of live examples and code using AMP in interesting ways. The new creative formats include carousels, video parallax and ‘LightBox’, which use a number of AMP components, allowing developers to build beautiful creatives while ensuring that the technical performance of the ad remains great.

Expanding support with more ways to serve AMP Ads

Okay, now you have great looking AMP Ads, but how do you get them to deliver to a web page? Last year, DoubleClick announced support for AMP Ads by allowing publishers to traffic AMP Ads as native ads in DoubleClick for Publishers. Since then, platforms like TripleLift, AdZerk and Dianomi have also built support for serving AMP Ads. Later this summer, DoubleClick is giving publishers even more flexibility to serve AMP Ads, enabling them to serve these ads as custom creatives.

Quantifying success with more tools to measure AMP Ads

We also understand the importance of measurement. After all, what good is creating and serving an AMP Ad if an advertiser can’t measure the results? In the coming months, real-time, multi-platform measurement and analytics platform Moat will support AMP Ads.

With Moat measurement, marketers and publishers will be able to quantify how much more engaging ads are when they’re faster, lighter and more secure. The integration provides Moat’s full suite of viewability and attention analytics powered by their proprietary and Moat-hosted JavaScript tag, empowering publishers to design better experiences and provide brands with greater insight into how audiences pay attention to their campaigns.

“Attention is the key to branding, and seamless ads and content that load quickly provide a better experience to capture that attention,” said Jonah Goodhart, CEO and Co-Founder of Moat. “We’ve seen consumers respond negatively when faced with slow load times or a poor user experience. The AMP Ads initiative represents a huge step forward for the industry and consumers, and we’re proud to contribute independent measurement to the AMP Project’s ambitious plans to improve web experiences.”

As the industry recognizes the need for better and faster advertising experiences, we’re looking forward to expanding the open source AMP Ads Initiative to all.

Whether you’re an advertiser, ad tech platform or publisher, deliver better ads by joining the AMP Ads Initiative today.

Posted by Vamsee Jasti, Product Manager, AMP Project

Growing the AMP Ads Initiative

Turbocharging AMP

Improving speed and user experience on the web is core to the AMP Project’s mission. Today at Google’s I/O developer conference we announced that AMP pages load twice as fast from Google Search, as we’ve cut the time it takes to render content in half from last year. Additionally, new platforms and websites have joined the AMP ecosystem, giving hundreds of millions more users the lightning-fast AMP experience.

AMP’s new speed gains in Google Search are due to several key optimizations that we made to the Google AMP Cache, such as server-side rendering of AMP components, and reducing bandwidth usage from images by 50% without affecting the perceived quality. We also used a compression algorithm called Brotli that Google launched a couple years ago, resulting in a reduced document size by an additional 10% in supported browsers.

Globally AMP continues to grow its footprint, with the news that China’s largest social network Tencent Qzone and the country’s third largest, Weibo will show AMP pages to hundreds of millions of users. This follows an announcement at the first AMP conference in March when Baidu, Sogou and Yahoo Japan said they are linking to AMP pages from their Search results, joining Bing and Google.

Other social platforms also made announcements, with Tumblr telling developers at Google I/O it is publishing 340M blogs across 500K domains in AMP. And Twitter shared that they are linking to AMP pages from their new mobile web app, and are in the process of launching AMP support in their Android and iOS apps. The global reach of these platforms further extends the availability of the 2B+ AMP pages and 900K domains with AMP on the web.

Finally, e-commerce sites are benefiting from AMP’s speed and user experience. At AMP Conf, WompMobile and Wego shared their initial success seeing 95% and 105% increase in conversion rates with AMP respectively. In the months since then, new e-commerce websites have joined the AMP ecosystem, including eBay announcing their plan to use AMP across all their product pages, Zalando implementing AMP for 250K product pages, and Myntra taking advantage of the powerful new amp-bind component. Additionally, AliExpress, one of China’s biggest online marketplaces, is having success with AMP pages, seeing a 4% uplift in conversions.

ecomm_AMP_logosSome of the e-commerce websites using AMP

Many of AMP’s e-commerce capabilities were previewed at the AMP Conf and the amp-bind component is now available for origin trials, creating a new interaction model for elements on AMP pages. To learn more, watch the interactive AMP pages talk on Friday at I/O. Additionally AMPbyExample.com has demos for amp-bind, and ampstart.com will soon have e-commerce page templates and elements.

abe_screens

AMPbyExample.com and templates

As always, there’s room to take AMP even further. Please reach out, share your feedback and join us during I/O! And if you’re attending I/O, be sure to stop by the mobile web sandbox booth to say hello. Finally, look out for our latest roadmap update next week which will share all of the AMP Project’s plans for the upcoming quarter.

Posted by Matt Ludwig, AMP Project Marketing Lead at Google

Turbocharging AMP

Google Analytics is Enhancing Support for AMP

The following was posted on the Google Analytics blog by the Google Analytics team

Over the past year, developers have adopted the Accelerated Mobile Pages (AMP) technology to build faster-loading pages for all types of sites, ranging from news to recipes to e-commerce. Billions of AMP pages have been published to date and Google Analytics continues its commitment to supporting our customers who have adopted AMP.

However, we have heard feedback from Google Analytics customers around challenges in understanding the full customer journey due to site visitors being identified inconsistently across AMP and non-AMP pages. So we’re announcing today that we are rolling out an enhancement that will give you an even more accurate understanding of how people are engaging with your business across AMP and non-AMP pages of your website.

How will this work?

This change brings consistency to users across AMP and non-AMP pages served from your domain. It will have the effect of improving user analysis going forward by unifying your users across the two page formats. It does not affect AMP pages served from the Google AMP Cache or any other AMP cache.

When will this happen?

We expect these improvements to be complete, across all Google Analytics accounts, over the next few weeks.

Are there any other implications of this change?

As we unify your AMP and non-AMP users when they visit your site in the future, you may see changes in your user and session counts, including changes to related metrics. User and session counts will go down over time as we recognize that two formerly distinct IDs are in fact the same user; however, at the time this change commences, the metric New Users may rise temporarily as IDs are reset.

In addition, metrics like time on site, page views per session, and bounce rate will rise consistent with sessions with AMP and non-AMP pageviews no longer being treated as multiple sessions. This is a one-time effect that will continue until all your users who have viewed AMP pages in the past are unified (this can take a short or long period of time depending on how quickly your users return to your site/app).

Is there anything I need to do to get this update?

There is no action required on your part, these changes will be automatically rolled out.

Will there be changes to unify users who view my pages both on my domain and in other contexts?

Some AMP pages are not visited directly on the domain where the content is originally hosted but instead via AMP caches or in platform experiences. However we decided to focus on fixing the publisher domain case first as this was the fastest way we could add value for our clients.  

We are committed to ensuring the best quality data for user journey analysis across AMP and non-AMP pages alike and this change makes that easy for AMP pages served on your domain. We hope you enjoy these improvements – and as always, happy analyzing!

Sincerely,
The Google Analytics Team

Google Analytics is Enhancing Support for AMP

See AMP live at I/O 2017!

We’re just days away from the start of Google I/O 2017, Google’s annual developer conference. And with lots of AMP contributors working at Google, we’ll naturally use the opportunity to connect to developers worldwide.

This year there’ll be 4 big talks about the latest and greatest in the world of AMP, a bigger developer sandbox booth for those who join us in person, and plenty of office hours.

Best of all, all of this year’s AMP sessions are being live streamed. Here’s the agenda:

  1. The AMP Keynote, Wed. May 17, 6PM – 7PM PDT
  2. AMP Ads: Better Advertising on a Faster Web, Thu. May 18, 8:30AM – 9:30AM PDT
  3. From AMP to PWA: Progressive Web AMPs, Thu. May 18, 9:30AM – 10:30AM PDT
  4. Building beautiful, interactive AMP pages for e-commerce & beyond, Fri. May 19, 3:30PM – 4:30PM PDT

Finally, if you’re tuning it from a different timezone or need to feed your baby sloth during one of our talks, rest assured that we’ll upload all session videos to our YouTube Channel (subscribe to be notified!). We’re all looking forward to connecting with you all at I/O 2017 or across the web!

See AMP live at I/O 2017!