AMP

How to Combine AMP with Dynamic, Personalized Content

Ecommerce

Note: the following guest post was written by Madison Miner, CEO and founder, WompMobile

AMP is well known as a comprehensive solution for speed. A common misconception, however, is that because AMP pages may be served from a cache, AMP is best suited for static content like news articles and blog pages, and not ideal for dynamic, personalized experiences. As an open-source initiative, AMP has steadily evolved and matured. Today, AMP delivers rich, dynamic content with guaranteed speed – making the framework perfect for e-commerce, retail and other industries that rely on delivering targeted, personalized experiences. 

This post describes how dynamic data – commonly required for e-commerce websites – can be used within the AMP framework.

Three Types of Dynamic Data

1. Time-sensitive data: Data that’s the same for all users and changes frequently, such as product pricing and availability. Example AMP pages that exhibit time-sensitive data:

2. User profile or personal data: Data that changes based on what you know – or can guess – about a user. This is often used to display relevant products based on a user’s browsing history and their location, or to serve highly targeted, personalized experiences. Examples:

3. User-account data: Data that’s tied to a specific-user account, which often includes authentication, currency, number of items in the cart, or a wish list. Examples:

  • George remembers your Cookie settings, and only prompts new users to select cookies on AMP 

A Deeper Dive into How AMP Works

AMP requires the adoption of performance guardrails and best practices while ensuring content can be consumed from a cache. To implement each of the dynamic features outlined above, two things are required: the <amp-list> component and an AMP-compatible API. Let’s see how each of these features work.

Time-sensitive data is the simplest type of dynamic data, only requiring an amp-list and an API that returns pure JSON with the correct CORS headers.  Since the price and availability data is the same for all users, the API doesn’t need to concern itself with cookies or credentials. 

To return meaningful user account data, an API will typically use cookies to identify users. To include cookies in requests made by <amp-list>, the credentials=”include” attribute is required. This requires a more sophisticated API that accepts cookies, identifies users, potentially sets cookies, responds with personalized content, and also responds with an access-control-allow-credentials header. 

When using AMP pages on your own domain, there are no unusual cookie restrictions. However, when pages are served from the AMP cache, it’s important to remember that your domain is recognized as a third party. Some browsers, like Safari, may block third-party cookies. It is recommended to understand Safari cookie management before committing to a final strategy.

There are several workarounds for this problem, such as using the AMP client ID to recognize users instead of cookies. When AMP pages are served from your own domain, cookies work as expected, allowing AMP to deliver user-specific data for all browsers.

Creating a personalized experience based on a user profile or persona can be done in several ways. 

  • Deliver an experience based on location
    • IP-geolocation can be used on the server to approximate a user’s location. A database of IP addresses, like those offered by MaxMind, is required. IP-geolocation won’t provide GPS-like accuracy; however, it returns accurate city-level results. Once the user’s approximate location is determined, the server returns localized results via an API response. This can be used to display nearby stores sales, the closest services available location, or the local currency and language. George.com, Providence Health Services and Zales.com are examples of brands that utilize IP-geolocation to approximate location and return personalized results. 
  • Deliver an experience based on user history
    • Show related products or services based on the customer’s previous browsing history on your site. 
  • Deliver an experience based on persona 
    • Use data and algorithms to guess which of your products the customer will be most likely to buy. This technique may require working with third-party data and creating AMP-specific APIs.

A key component of this type of customization is tracking user behavior. The amp-analytics component can be used in several ways to report user journey steps, such as product views and user interactions. The AMP Client ID is the most straightforward and consistent way to unify session management.  The Linker feature of amp-analytics can also be used to link amp sessions between 3rd party amp caches and your own domain. 

Final Thoughts

The AMP framework is unapologetic about the importance of speed, and sets rules and best practices to guarantee a fast experience.  But achieving speed can’t come at the expense of functionality. You need both. As you’ve learned, AMP provides a framework to do just that.

By using components and APIs, AMP eliminates bloated JavaScript and historic bad practices, while retaining all the features and logic that are critical to any business. AMP is a great way to build for the web that provides a balanced approach, promotes speed and helps your customers. 

Debunking Common AMP Myths

Ecommerce, Websites

AMP is a great and easy way to build very fast sites. Since its launch in 2015, AMP has grown to power billions of pages across the web from tens of millions of domains. We’ve seen many examples of businesses in both the publishing and e-commerce spaces see success with implementing AMP on their websites. As the AMP project has grown, we have noticed a number of misconceptions & myths have arisen — so we thought we would take this opportunity to bust some of the most common myths about AMP.



MYTH: AMP is exclusively a Google project.
FACT: AMP is an open source initiative led by Google along with other companies and members of the web community.

AMP developers, companies and individual contributors participate in the development of this project: Over the last 3 years, AMP received contributions from 850+ contributors, 78% of whom were employed by companies other than Google, such as Twitter, Pinterest, Yahoo, Bing, and eBay. AMP moved to a new governance model that explicitly gives a voice to all constituents of the community, including those who cannot contribute code themselves, such as end-users, and representation from companies such as Twitter, Microsoft, Pinterest, The NY Times, Washington Post, AliExpress and many others.

MYTH: AMP only works from Google.com.
FACT: AMP pages are accessible across the web including any distribution platform and device.

Users can access AMP pages via links on distribution platforms (e.g., search engines) or sites. Some platforms (e.g., Google, Bing, LinkedIn, Twitter, Yahoo JP, Baidu and more ) will always serve AMP pages by default on mobile, when available. Some platforms (e.g., google.com, bing.com) take an extra step to cache your content for a much faster user experience.

MYTH: AMP is only for mobile.
FACT: AMP is designed with responsiveness in mind, to work across all screen sizes.

AMP is now just AMP, and does not stand for Accelerated Mobile Pages anymore. AMP isn’t just for mobile, it not only works across many device types including desktop and tablet but comes with super handy responsive design features. AMP is designed to be mobile friendly, and with slow hardware and high latency connections, the boost you get with AMP on smartphones is going to be felt a lot stronger than on desktops. It should also be understood that some features for third-party platforms (e.g., Google’s Top Stories carousel) may only be designed for the mobile experience. For more information, see this article.

MYTH: Every AMP page has to also have a non-AMP version.
FACT: An AMP page can be associated with a non-AMP version, but it’s not a requirement.

In some cases, you might want to have both a non-AMP and an AMP version of the same page, especially during the early phases of your AMP migration when you might want to also support testing AMP and non-AMP. But this is not a requirement and you don’t need to maintain two versions of the same content if you think AMP is the right solution for your business. You can choose to have one page, and that page could be an AMP page. This means lower maintenance costs to build, maintain, and monitor a single version of each document (as opposed to building both a non-AMP and paired AMP page). More details here.

MYTH: AMP landing pages are usually difficult to build.
FACT: It typically takes less than a week to build AMP landing pages for the majority of page types and use cases.

80% of development teams we contacted said they built AMP Landing Pages in less than a week. Having said that, AMP development effort varies on the page type. Some AMP pages can be built within a day, others take longer. Check out amp.dev for some free AMP templates to reduce your development time even further.

MYTH: AMP is only for publishers or static websites.
FACT: More than 60% of Google Search clicks to AMP pages go to non-news sites.

AMP is built thanks to a deep collaboration with thousands of developers, publishers and websites, distribution platforms and tech companies. When AMP first launched, it was initially adopted by publishers but now advertisers and e-commerce companies are also leveraging AMP to gain speed benefits. Read some of the success stories on our site.

MYTH: AMP doesn’t support interactive experiences.
FACT: AMP components now enable design customization and interactive experiences.

When AMP first launched, it had limitations to visual design. As the AMP project has grown thanks to the collaboration of the open source community, new components have been built that allow companies to do design customization and create interactivity. Today, most interactive experiences are supported:

  • Rich Media: there are ever increasing AMP components and anyone can contribute if something is missing.
  • Third-Party (3P) integrations: there are many available now and growing.

Companies such as BMWAliExpress and Rep from La Repubblica have been able to build great interactive experiences on AMP, with some using AMP for the majority of their site pages.

MYTH: AMP is not capable of supporting e-commerce websites.
FACT: AMP is a natural fit for e-commerce because AMP makes web pages fast, and fast pages help with purchase conversions.

When AMP first launched, it was initially adopted by publishers. As the AMP project has grown, new components have been built that allow brands to create interactive experiences. We are excited by the speed with which the internet is adopting and extending the AMP platform, and AMP can be used to build a fast, beautiful e-commerce experiences. For more details, check “Getting started with AMP for e-commerce” and “E-commerce At The Speed of AMP” blog posts.  

MYTH: It’s not possible to serve fresh content on AMP Pages.
FACT: There are many options to keep content on AMP pages up to date.

You can serve fresh content on AMP either relying on the default AMP Cache mechanism (stale-while-revalidate), using the update cache functionality, or using dynamic components (like amp-list). Many big e-commerce companies have demonstrated great success when implementation is planned properly.

MYTH: AMP is not secure/private enough.
FACT: The AMP framework is built to preserve privacy and ensure data security.

AMP landing pages are often served from the Google AMP Cache, which simply caches a version of your AMP landing page for purposes of validating AMP documents and for providing reliable, fast delivery. The Google AMP Cache as well as AMP JavaScript are served from cookieless domains that do not track users in any way. Additionally, AMP has a security review process that is routinely used when launching new AMP components. For further reading we recommend this blog post “Privacy and user choice in AMP’s software architecture”.

MYTH: AMP pages don’t convert as well as non-AMP pages.
FACT: Properly optimized AMP pages often perform better than their non-AMP equivalents.

Many advertisers and publishers have seen success with AMP as documented on amp.dev. A study from Forrester found that a site implementing AMP could expect 20% increase in sales conversion rate on AMP pages, 10% year-over-year increase in AMP site traffic, and 60% increase in pages per visit. There are a few reasons why an AMP page might appear to perform less well than an non-AMP page. If you are seeing poor performance, these are a few areas to explore:

  • Measurement and tracking issues: Make sure you’ve setup analytics on your AMP page using the following two setup guides.
  • Inconsistent landing pages: If AMP page looks different from non-AMP page, it can affect conversion rates. Landing pages should be identical both in appearance and in function in order to accurately assess AMP performance. Also make sure you offer user-friendly landing pages.

You can check this blog post for the things to keep in mind when testing and evaluating AMP.

Posted by Cemal Buyukgokcesu, Global Product Lead, Mobile Web, Google

Shopify Apps make AMP easy and effective for eCommerce

Ecommerce

Online retailers are always looking for ways to exceed their customers’ expectations. With most online shopping now happening on mobile devices, it’s important for merchants to deliver fast, engaging experiences optimized for mobile. Because AMP guarantees consistently fast webpages, it’s becoming an increasingly popular framework for eCommerce.

Shopify Apps add functionality or features to Shopify stores, like plugins or extensions do to other platforms. Apps built to support AMP provide an easy way to launch a lightning fast, mobile optimized AMP version of a store that users love.

The best AMP Apps for Shopify are able to easily create many page types, including product, collection, home, and blog pages. They’re free or low cost, and come with reliable support. Some integrate with third party apps, meaning AMP versions of stores will not lose critical functionality such as product reviews. These Apps generate pages can be cached and served nearly instantly when accessed through Google Search.

The most popular AMP Apps have been installed thousands of times and have received 5 stars in 87% of user reviews. AMP by Shop Sheriff has great user reviews, and has been able to grow quickly because of their focus on user experience. “Merchants using our app, as well as their customers who get to experience the AMP pages, all love the experience,” said Shop Sheriff founder Stephen Gardner. “We’re extremely proud to have 98% 5-star reviews, and maintain a 5.0 average star rating on Shopify.”  

Out-of-the-box, top Shopify AMP apps provide beautiful eCommerce templates for product, category, home, blog pages, and more, which merchants can further customize. Above is a GIF of a user seamlessly customizing their AMP pages using the AMP App by AMPify Me.

Testing the AMP versions of these stores using PageSpeed Insights show industry-leading performance scores over 90, with pages being fully interactive in just seconds. Data show that users are more likely to bounce from a page that takes longer to load, and users view more pages on fast loading websites, leading to more engagement and higher conversion rates.

For the app creators, it’s all about using technology to improve retail experiences online. “We’re committed to building technology that makes it easy for retailers to succeed online,” said Jana Filipovic from AMPify Me, a leading AMP App. “Our customers, and even users of our free products, are able to drive increased engagement and conversion rates using AMP.” Their focus on great product and user experiences have enabled AMP by AMPifyMe to grow very quickly. Over 13,000 stores have installed their App since launch in May 2018!

Shopify noted in a recent blog post that AMP by Shop Sheriff and AMPifyMe were leaders in the category of successful apps that improve mobile performance. “By helping merchants take advantage of this mobile-first opportunity, these apps were able to find success on our app store.”

Top Shopify AMP apps have a WYSIWYG editor that enables merchants to customize the look and feel of AMP pages to deliver feature rich, lightning fast user experiences. Above is the editor from Shop Sheriff.

Google recently conducted a detailed review of the most popular AMP Apps for Shopify, analyzing the apps across 5 critical characteristics. If you’re a Shopify client considering AMP, consider these when choosing a provider:

  1. Price & Support – How much will the app cost at the service level that’s appropriate for you, and will you get quality support for that investment?
  2. Ease of Use – How much work is required to set up the AMP version of your shop? How intuitive is the app’s user interface?
  3. Quality of AMP pages – How good is the user experience on the AMP version of your shop?
  4. Integration with Google tools – How easy will it be to ensure the AMP versions of your pages are cached by Google and any issues are surfaced?
  5. Third party integrations – Which of your other apps can be integrated out-of-the-box? Which can be integrated with a little more work?

Apps provide an easy path for merchants to adopt AMP on Shopify, creating a lightning fast, mobile optimized version of their pages that can help meet users’ rising expectations. Check out our review on amp.dev to see which AMP App might be best for your Shopify store.

Posted by Chris Sater, Web Product Partnerships, Google