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.