Optimize your AMP pages with amp-experiment

Whether you’re running an online news, travel, or e-commerce site, you’ve likely invested time in reviewing your site’s design and user journeys to make your experiences more useful to your users. Often this means running A/B-style experiments to learn which enhancements work best. To enable this in AMP, we’ve launched <amp-experiment>, a new AMP component that allows you to conduct user experience experiments on an AMP page.

How it works

You can now design experiments and specify how much traffic to drive to specific variations. AMP handles the traffic diversion on the client side and provides a way to collect data with either <amp-pixel> or <amp-analytics>.

There are three key steps to getting a content experiment set up on your AMP page:

  1. Configure the experiment
  2. Implement variations
  3. Collect the data

Configure the experiment

<amp-experiment> is a new custom element that you use to specify all experiment behaviors via a JSON configuration. Here’s a code sample that configures an experiment called “recommendedLinksExperiment”:


<amp-experiment>
<script type=”application/json”>
    {
      recommendedLinksExperiment: {
        sticky: true, 
        variants: {
          shorterList: 25.0,
          longerList: 25.0,
          control: 50.0,
        },
      },
      bExperiment: {...}
    }
  </script>
</amp-experiment>

The JSON configuration supports specifying the following attributes of one or several experiments:

  • Whether assignment to a given experiment is sticky: Should a given user always be assigned to the same experiment variants across pageviews? In the example above, the experiment is indeed sticky.
  • How much traffic to expose to each variant of a given experiment: Do you want a random 50% of users to see version A and 50% to see version B? What about 20% for each of versions A through E? In the sample above, we allocate 50% of users into the control experience and allocate 25% each into either an experience with a shorter list of recommendations or one with a longer list of recommendations.

Please consult the configuration documentation for other advanced settings like experiment dependencies (groups) and employing a user notification constraint when using the sticky setting.

Implement the variations

Next up, you need to implement how each variant in each experiment should behave. <amp-experiment> will expose an attribute on the <body> element for each variant the user has been assigned to. You can then use CSS to change styling or visibility to construct variants as you’d like users to experience them:


body[amp-x-recommendedLinksExperiment=”control”] .extra-links {
display: none;
}

In the above example, the “control” variant of the recommendedLinksExperiment is meant to not display (“display: none”) the extra links for building the longer recommendation list, as indicated by the class name “extra-links”. This behavior will give just the right list length that we want to test as the experimental control experience.

Collect the data

Finally, AMP takes the configuration and decides what variant to assign across all experiments and for all users. As users receive different experiences based on the experiment variants you’ve defined, you collect data so that you can measure the key metrics of interest such as button clicks or time spent.

<amp-experiment> exposes a couple new reporting features. There is a new substitution variable called VARIANT that you can use to look up which experiment variants were assigned to a user on a given page view. If you’re running multiple experiments, you can use the VARIANTS variable to get the assigned variants across each defined experiment in a serialized format. You can use the combination of the user’s experiment combinations and the data indicating how they behaved during their visit to judge the success of each variant.

Try it out!

The <amp-experiment> feature gives developers a handy tool to optimize their users’ experiences.

Please read the documentation for a full overview of features supported in this initial version and check out the sample at AMP By Example. Drop by GitHub and let us know your feedback and any ideas you have to enhance amp-experiment to be even more useful for the content experiments you’d like to run.

Posted by Rudy Galfi, Product Manager, AMP Project

Optimize your AMP pages with amp-experiment

Getting Started with AMP for E-commerce

When the AMP Project first launched, the initial use cases and feature development focused on building AMP to support news and blog content. However, the AMP Project’s ambition has always been making the consumption of any type of mobile content vastly better and faster than we had seen before. Ideally, the format should allow anyone to create high performing websites across many verticals—from news to retail to travel and beyond.

Through the extraordinary progress and open-source collaboration to date, we have built AMP to be great at handling news and blogs, but it’s also now suitable to build many aspects of an e-commerce site. AMP is a natural fit for e-commerce because AMP makes web pages fast, and fast pages help with purchase conversions.

To take a closer look at this, we’ll step into the shoes of a typical user, making their way through an e-commerce site. Throughout the journey, we’ll highlight ready-to-use and proposed features of AMP that can be used to build a fast, beautiful shopping experience.

Before we begin

The general idea is that the entire site doesn’t have to be converted at once. We recommend analyzing and AMP’ing the portions of the site that make sense. Identify each page type’s main goal and key features to help decide where to get started.

AMP has a large selection of pre-built and easy-to-use components to enable interactive experiences like image carousels or instrumentation to collect analytics data. These foundational pieces are a good starting point. Content features like product descriptions, images, reviews, and navigation can be implemented in AMP easily today. Start exploring and building prototypes to learn how you might build these experiences of your site in AMP.

More sophisticated and complex scenarios like purchasing flows cannot yet be done in AMP but is something we’d like to explore through gathering additional input on use cases and user flows. In the meantime, consider if it’s possible to have a button click or similar type of hand-off to a non-AMP HTML page to complete a purchase flow. Remember that AMP is an open-source community effort. It’s easy to engage, start developing, and contribute new components as needed. The format will grow richer in time.

With all that said, let’s get on with stepping through the user’s journey.

Step 1: Browsing

product-listing-pagerecommendations

A sample home page or category page

Users often start their journey from a site’s home page or a product category page. These are great pages to AMPlify first, as eBay discussed in their post.

These types of pages are very well suited for AMP. The content is typically static and geared toward offering the best showcase of available products. Use features like <amp-carousel> to offer a mobile-optimized way to browse other products organized by subcategories.

Step 2: Landing on a product page

product-page

A sample product page

Our user arrives at an AMP’ed product page after clicking on an item from a featured listing on our e-commerce site’s home page.

AMP can help you create a rich beautiful page to showcase your product. Add bold hero images and videos using the <amp-carousel> and <amp-video> elements. Focusing on e-commerce is inspiring us to dream up additional experiences to support in AMP. For example, we are looking to introduce a new component that will enable presenting a large image of a product that can be changed by choosing from a strip of thumbnails.

For sections with more detailed requirements or extended descriptions, use the <amp-accordion> tag. In addition, enable users to share product links with the <amp-social-share> element. Should a user want to switch gears and explore some other areas of the site, <amp-sidebar> allows you to implement a navigation menu across all pages.

Step 3: Exploring related products

related

Related products on a product page

We know that users often change their mind and that sometimes the initial product they are looking for isn’t the one they want, so let’s show them more products.

With AMP, there are multiple approaches to show related products. One approach is to statically publish a list of related products.

Another approach is to generate the list on the fly. To do so, just use <amp-list> to fire a CORS request to a JSON endpoint which supplies the list of related products. These are populated into an amp-mustache template on the client. What’s more, the result list can be personalized, because the content is dynamically generated server-side for each request.

Step 4: Personalizing & understanding

Knowing a user’s preferences is powerful. You can tailor content to them to increase conversions.

Use the <amp-access> component to display different blocks of content dependent on a user’s status, such as if the user is logged in. Much like the <amp-list> component, fire a request at a JSON endpoint and then present the data into an amp-mustache template.

To see how users are interacting with the site at an aggregate level, use the <amp-analytics> component. Collect analytics data directly, or integrate with 3rd party analytics platforms. AMP supports several popular analytics vendors.

Step 5: Supporting purchase

The final piece of the puzzle comes in when the user is ready to make the purchase and taps on “Buy”. This is likely to be the point of transition from an AMP-only environment to full HTML. Ensure that transition is as fast and consistent with the experience they have had so far.

If your site is a Progressive Web App (PWA), then AMP provides an ideal bridge in the form of <amp-install-serviceworker>. This allows your AMP page to install a service worker for your domain regardless of where the user is viewing the AMP page. You can then preemptively begin caching content from your PWA so that when the transition out happens, all of the needed content is cached, keeping the experience fast and the customer engaged.

Step 6: Keep caching in mind

AMP is built to work within a smart caching model. This enables platforms that refer traffic to AMP pages to use caching and prerendering to load web pages fast—virtually instantly. However, this also means you may see less traffic to your own origin where the AMP pages are originally hosted and see the balance of the traffic through proxied versions of your pages served by AMP caches. It’s important to keep these factors in mind when analyzing your traffic and engagement.

* * *

Here again are links to AMP By Example pages where you can see samples of a couple of the sample pages highlighted in the pictures above:

Hopefully this walkthrough has given you a taste of what’s available now, but it’s by no means everything that’s possible. We’d love to see examples of what you’re building and hear your feedback over at the GitHub repo on what needs to be added to AMP to enable the e-commerce experiences you want to create.

Posted by Boris Farber and Rowan Merewood, Developer Advocates at Google; and Rudy Galfi, Product Manager, AMP Project

Getting Started with AMP for E-commerce

AMP Roadmap Update for Mid-Q3 2016

We’ve just published updates to the AMP Roadmap — please check them out!

Here is a summary across the focus areas:

Format

A few weeks ago, we announced the beta for <amp-live-list> and development work is complete. This feature will be vital for publishers looking to launch liveblog experiences using AMP. We anticipate upgrading the feature to stable status within August.

With opportunities ahead for growing the AMP format for e-commerce experiences, we’ve been engaging with the AMP community to outline use cases and build features to enable e-commerce in AMP. The roadmap reflects several initiatives tying in with this effort, including support for <form>, support for a component that would enable product image galleries, and various <amp-analytics> improvements detailed below.

Finally, we’re working on several projects that will enable AMPs to be more beautiful and engaging experiences. We’ll soon ship improvements to the <amp-carousel> component to have better scrolling performance and we’re also just beginning work to enhance <amp-lightbox>. We want to make video awesome on AMP pages and in platform experiences where users discover video content. To achieve this, we’re planning several enhancements, including muted autoplay support and the ability to load AMP pages in a video viewing mode. We’ll also begin to work on introducing a set of out-of-box styling and templates for AMPs.

Analytics

To enhance the core of amp-analytics, we shipped support for a “hidden” event and element-level data variables. Each of these enhancements, coming to stable builds of AMP within August, should enable publishers to build greater awareness of users’ behaviors on AMP pages.

A/B-style content experimentation support has been a long-standing feature request. We’ve recently completed the code for <amp-experiment>, which offers client-side traffic diversion and variation, and integrates with <amp-analytics>. This feature should be launched within August.

Finally, we’d like to improve analytics support in AMP for a couple of key focus areas mentioned above, video and e-commerce, through the introduction of new triggers, variables, and ways of passing data to analytics.

Ads

Since our previous update, we launched sticky ads and flying carpet formats. We also worked on building a lot of the infrastructure required to serve AMP Ads for AMP Pages (A4A).

This quarter, we announced the AMP for Ads (A4A) initiative and expect to deliver A4As via supported ad servers. We are also releasing a format spec for A4A to ensure ads can render quickly and smoothly in the browser and do not degrade a site’s user experience. We’d like to focus on making A4A work in non-AMP pages as well, which will allow advertisers and publishers to build a creative once and deploy to any inventory. Enabling as much A4A creative demand as possible across the advertiser and publisher ecosystem is critical to ensuring overall success of the initiative. To that end, we’re working with creative agencies to build creatives in A4A and auto-convert creatives to A4A when possible.

Finally, we plan to improve the ad loading user experience in AMP through a couple specific projects: displaying a better ad loading indicator and showing a default fallback when no ad is available to serve.

Access

Working towards the goal of enabling seamless access to subscription content in AMP, the team has been developing a general framework for allowing an AMP viewer to help the user sign-in to the publisher of the AMP document. We are working on a prototype that should be ready soon, and look forward to engaging with the community to bring it to market. We are brainstorming ways to use the same general approach to open up user experiences with publisher content that requires signed in usage.

On the AMP Access server-side support front, we needed to switch gears and explore a new approach, so we are prototyping a solution that should be available by end of Q3. Many thanks to the publisher partners who are helping us test the approach.

* * *

As always, please let us know if you have any feedback.

Posted by Vamsee Jasti, Product Manager, AMP Project

AMP Roadmap Update for Mid-Q3 2016

Fast Ad Landing Pages with AMP

Page load time is one of the strongest reasons of page bounce. The average U.S. retail mobile site loaded in 6.9 seconds in July 2016, and according to the most recent data, 40% of consumers will leave a page that takes longer than three seconds to load [source].  This means that if you’re navigating users to a landing page from an ad, 40% will likely not bother and click away. Furthermore, a click to a landing page often takes the user out of context so it’s hard for them to return to the publisher’s site, making the whole experience very disruptive. This is not just bad for the user experience but also bad for publisher and advertiser monetization.

Introducing AMP Ad Landing Pages

Blog1
Difference in how regular ad landing pages load vs how AMP Ad Landing Pages load

To ensure users have a great experience with ads, we’re introducing AMP Ad Landing Pages (ALP), which are landing pages that are built in AMP-HTML that load incredibly fast. Early tests indicate that the median load time for these pages is under one second. We’ve introduced a number of optimizations to improve the loading experience before the user even navigates to the landing page:

  1. Pre-connect to landing page: Normal ads do not typically know the URL of the actual landing page. Ads leading to ALPs always know it, and thus can issue a pre-connect request to the respective landing page, which reduces the time it takes to navigate the user to the landing page after the user clicks.
  2. Pre-fetch landing pages: Simple non-CPU intensive resources that are visible on the first viewport of the landing page are requested and downloaded before the user clicks on the ad.
  3. Delivering Google Cache URL when available: As a trafficker, when you input a canonical destination URL for a creative, the ad server can switch it to the AMP version of the URL (with trafficker consent) using the AMP URL API. The ad server can also embed code required by the creative to pre-fetch and pre-connect to the landing page. Ad servers like DoubleClick for Publishers (DFP) are integrating such features over the next couple of quarters to make trafficking of AMP landing pages easy.
  4. Zero Redirects: When possible, AMP eliminates redirects to the ad server. So what happens with the redirects? AMP will initiate the requests once the user has reached the landing page. AMP also supports the amp-pixel component for 3rd party tracking redirects which can be performed on the landing page.

Below is an example of the ALP experience. A user is being served an ad with an AMP Landing Page on the Google Search viewer. Not only does the landing page load in under a second, the user can easily navigate back to the content they were reading before their click on the ad.

blog2
AMP Landing Pages experience shown in a Google Search flow

We think that a better ad landing page experience is better for the entire ads ecosystem:

  • Users are more likely to click on ads they may be interested in if they know they’ll have a positive experience;
  • Advertisers benefit from increased user engagement and higher conversion rates;
  • Publishers increase revenue with better performing ads, while ensuring that users can get back to their content anytime they want.

Getting started with ALP

If you are a publisher:

AMP landing pages are very well suited to serving sponsored content pages or house marketing pages. If you publish your sponsored content as AMP, similar to how you do for other content, follow the instructions listed below for trafficking in your adserver and you are all set.

If you are an advertiser:

More than 650,000 domains and growing, already publish AMP pages today.

Get started with AMP Ad Landing pages by launching AMP versions of your campaign landing pages. Head to AMP’s Get Started tutorial to learn how. These pages can be highly interactive and fast with AMP components like carousel, video, light box etc. You’ll be able to customize them even more using amp-iframe to embed components not yet supported by AMP.

What’s next?

The AMP project was launched with the goal of making the entire mobile web experience faster and better for everybody. AMP Ad Landing pages is a key initiative to improving the user’s experience of ads on mobile and ensuring that we build a sustainable model for monetization.

This project is in early stages with much more to come. If you have ideas or a use case that isn’t currently supported, or if you’re looking for more information on how you can contribute, come say hi on Github. In the meantime, check out detailed instructions for how to traffic an ad campaign in DFP with AMP landing pages.

Posted by Vamsee Jasti, Product Manager, AMP Project

Fast Ad Landing Pages with AMP

AMP your content – A Preview of AMP’ed results in Google Search

It’s 2016 and it’s hard to believe that browsing the web on a mobile phone can still feel so slow with users abandoning sites that just don’t load quickly. To us — and many in the industry — it was clear that something needed to change. That was why we started working with the Accelerated Mobile Pages Project, an open source initiative to improve the mobile web experience for everyone.

Less than six months ago, we started sending people to AMP pages in the “Top stories” section of the Google Search Results page on mobile phones. Since then, we’ve seen incredible global adoption of AMP that has gone beyond the news industry to include e-commerce, entertainment, travel, recipe sites and so on. To date we have more than 150 million AMP docs in our index, with over 4 million new ones being added every week. As a result, today we’re sharing an early preview of our expanded AMP support across the entire search results page –not just the “Top stories” section.

To clarify, this is not a ranking change for sites. As a result of the growth of AMP beyond publishers, we wanted to make it easier for people to access this faster experience. The preview shows an experience where web results that that have AMP versions are labeled with The AMP Logo. When you tap on these results, you will be directed to the corresponding AMP page within the AMP viewer.

AMP in Search Preview

Try it out for yourself on your mobile device by navigating to g.co/ampdemo. Once you’re in the demo, search for something like “french toast recipe” or music lyrics by your favorite artist to experience how AMP can provide a speedier reading experience on the mobile web. The “Who” page on AMPProject.org has a flavor of some of the sites already creating AMP content.

We’re starting with a preview to get feedback from users, developers and sites so that we can create a better Search experience when we make this feature more broadly available later this year. In addition, we want to give everyone who might be interested in “AMPing up” their content enough time to learn how to implement AMP and to see how their content appears in the demo. And beyond developing AMP pages, we invite everyone to get involved and contribute to the AMP Project.

We can’t wait to hear from you as we work together to speed up the web. And as always, if you have any questions, please visit our webmaster forums.

AMP your content – A Preview of AMP’ed results in Google Search

Live-updating AMPs

More and more publishers are leveraging the power of live blogs to connect readers to breaking news as it unfolds. Today we are inviting you to try out the beta for <amp-live-list>, a new AMP component that updates page content dynamically without additional navigation or reload: readers looking at an earlier version of the page will simply see new updates as they come in.

amp-live-list-demo

You—as a developer—have control of the content, and can override the component’s default styles. For example, a default class is applied to the most recent updates, so you can determine the style of new items, such as subtly highlighting the background for new items for a few seconds. The component also includes a customizable button for your users to pull in updates on demand.

How does it work?

In the background, while an AMP page using <amp-live-list> is displayed on the client, <amp-live-list> polls the origin document on the host for updates. When the client receives a response, it then filters and dynamically inserts those updates back into the page on the client. Publishers can customize the polling rate in order to control the number of incoming requests, and AMP caches like the Google AMP Cache can perform optimizations to reduce the server response payload, saving client bandwidth and CPU cycles.

amp-live-list-flow

To use <amp-live-list>, all you have to do is:

  1. While the component is in beta, opt into the experiment by entering
    AMP.toggleExperiment('amp-live-list')

    into your javascript console on your testing page. You can also opt in on the AMP experiments page for all pages served from cdn.ampproject.org.

  2. In the HTML for an AMP page, wrap any live-updating content in <amp-live-list> and its children, ensure that each element has the required attributes and structure, and publish the page.
  3. Whenever new information comes in, update the HTML for <amp-live-list> with new entries or changes to older entries, and re-publish the page.

That’s it! The child elements of <amp-live-list> will be dynamically updated as new content comes in.

Example implementation


<amp-live-list id="live-list" data-poll-interval="20000" data-max-items-per-page="10">
<div update on="tap:live-list.update">
You have updates
</div>
<div items>
<div id="live-list-item-2" data-sort-time="1464281932879">world</div>
<div id="live-list-item-1" data-sort-time="1464281932878">hello</div>
</div>
</amp-live-list>

Why beta?

This is a very flexible format: on one hand, you could use it for live blogs, which feature updates across nearly the entire page, and can include details like pagination or deep-linking to specific posts. On the other, you might use it to update just one small section, like a scoreboard during a soccer game, or a map of voting results on the night of an election. With your feedback from testing real-world applications of the component, we have the opportunity change some of the behaviors and validations before launch.

This of course means that you shouldn’t launch it on a public-facing page until <amp-live-list> progresses to “stable” status, and that you should expect to see some validation errors associated with the component while you’re testing.

Try it out!

So check out the documentation in GitHub and at AMP by example, test out the component in your development environment, and give us feedback for what does and doesn’t work for your use-cases. The sooner we know what is and isn’t working for <amp-live-list>, the sooner we can polish it up and release it to production for use in your AMP pages.

Posted by Eric Lindley, Product Manager

Live-updating AMPs

Using machine learning to predict drivers of bounce and conversions on mobile

Earlier today, Daniel An and Pat Meenan from Google shared the results of a recent research project focused on uncovering what influences the bounce and conversion rates for e-commerce sites.

Using a machine learning model developed in collaboration with SOASTA, Daniel and Pat identified that the speed and performance of a website can significantly influence the bounce rate of an e-commerce site.  To put it simply: the slower and the more complex the page, the higher the bounce rate and the lower the conversion rate. This is consistent with several research studies and shows the promise that AMP adoption in e-commerce sites holds for doing business on the mobile web.

 

full-site-load-time-bounce-rate
Source: Google/SOASTA Research, 2016.

 

To read more about Daniel and Pat’s research check out their article on Think with Google. And if you are curious to learn more about how your website is performing, we encourage you to run the same analysis using their open-sourced code.

Using machine learning to predict drivers of bounce and conversions on mobile