Personalization
The web is better when it is personal and relevant to you. The edge is the ideal place for delivering performant, personalized pages customized to the needs of each unique user.
Personalization is the process of using identity, or attributes that divide users into groups that share similar traits (like location), to transform content and make it feel more relevant to the individual user.
Fastly features
Many Fastly features can be used to support personalization, whether by providing data about the user browsing your website, a place to store user settings or sessions, or tools that enable content to be modified dynamically before it is served.
Identifying or grouping users:
- Geolocation: Our geolocation feature, given an IP address, will provide information such as latitude and longitude which in any cases can be local enough to allow for personalization. Learn more about how to use our geolocation features.
- Authentication: We have many features to help securely authenticate users at the edge – from a variety of VCL functions, to the endless possibilities of Compute, where you can use dynamic backends to integrate with an identity provider, and SubtleCrypto to generate and verify digital signatures.
Storing user data, preferences, sessions, templates or other personalization data:
- KV Store: Our edge based KV store allows data to be easily stored and retrieved, both at the edge and via our API, with global consistency, making it an ideal place to store user-specific sessions, settings and preferences. Learn more about KV Store.
Modifying content to add personalization:
- Streaming transforms: Using the Compute platform, streaming transforms can be written in any supported Compute language, to modify the content of the response as it passes through your app. See Solutions below for examples!
- Edge side includes: In VCL services, we support the Edge Side includes standard, which allows a region of a page (or any HTTP response) to be populated by the content of a separate HTTP request. Learn more about using ESI in VCL.
Ideas and typical uses
Personalization takes many forms, and can be one of the most powerful ways of harnessing edge computing. Here are some of the things our customers are doing today.
- Closest or "home" store info: If your business operates physical locations, use user profile data or geolocation to customize pages with the user's preferred location, the one they visit most often, or the one closest to their current location.
- History navigation: Show the user what they most recently watched, purchased, read or edited, by recording their activity in a lightweight state store at the edge, and using that data to personalize subsequent page views.
- Recommendations: Display recommended next-click content (or recommended products), in your pages based on user behavior. Use your own recommender engine, integrate with a third party, or even run one directly on Fastly's edge.
- Server-side rendering: Frameworks like Next.js are more performant when you enable server-side-rendering. It's often best to do this at build time for small sites, but for a large number of pages or those containing user-specific data, why not render them on demand, at the edge.
- Page templating: By combining data with page templates at the edge, you can minimize traffic from Fastly to your origin servers, and reduce the need for origin requests at all, speeding up delivery to the user and reducing cost.
- Tag insertion: Products like Google Tag manager can provide powerful solutions for managing tags like Intercom or Google Analytics, but for fine grained control and easy deployment, consider modifying your pages to insert tags at the edge. This can also allow tag insertion to be sensitive to feature flags, A/B testing conditions, location, or user preferences.
- Ad insertion: Insert ads into your pages that respond to behavioral signals, or splice them into your video streams - even live video.
- Premium content: Authenticate users at the edge, and perform authorization checks at the edge, to determine whether they have access to premium content which can then be retrieved from origin (or generated), cached, and incorporated into the requested page. For attempts to access premium content from unauthorized users, consider generating a paywall response directly at the edge to provide subscription or payment options.
Solutions
The following demos, tutorials, starter kits, and code examples are relevant to this use case. Try them out!
Demos
Sites running on Fastly you can browse. See the principles working for an end user.
| Weather App | Use Fastly's geolocation and a third-party weather API to build a synthetic HTML response using a template. |
Tutorials
Step by step instructions. Build and learn.
| A/B Testing (Fastly Compute) | You want to try out multiple variations of a page or a feature of your website, dividing your visitors into groups, some of whom experience one version, and some the other. Once a visitor is in one group, they should continue to get a consistent experience. |
| A/B Testing (VCL) | You want to try out multiple variations of a page or a feature of your website, dividing your users into groups, some of whom experience one version, and some the other. Once a person is in one group, they should continue to get a consistent experience. |
| Generate synthetic content | You need to fetch personalized data from external APIs and serve it to the user without a full web stack. |
Code examples
Snippets of code ready to copy and paste.
| Add a new field to a JSON response | Decorate API responses in JSON format with new fields. |
| Add or remove cookies | Read individual cookies, set new cookies in response. |
| Apply feature flags from an origin API | Park request, make a different request first, use the response to annotate the real origin request (or make decisions about how to route it). |
| Assemble content at the edge with Edge-side includes (ESI) | Use Fastly's support for ESI to combine multiple origin-hosted objects into a single response at the edge. |
| Create image transform presets | Use custom, predefined classnames like large, medium, small, teaser, thumb, or article to control Fastly Image Optimizer and optionally prevent end-user access to native properties like 'width'. |
| Create montage poster frame images | Combine multiple source images into a single image and then optimize and serve the result. |
| Use A/B testing to personalize responses | Serve different responses to separate user cohorts. |
