Uniform and Edge Functions: A No-Code Method for Site Personalization

Netlify recently launched the Beta release of Edge Functions, an innovative, Deno-powered, edge logic-layer. With Edge Functions, developers can modify network requests to localize content, serve relevant ads, and raise Core Web Vitals scores with only a few lines of JavaScript or TypeScript code.

Additionally, by leveraging Netlify Edge Functions along with Uniform tools and no-code solutions, marketers, content writers, and other nontechnical professionals can A/B test content or personalize pages—without writing code at all.

Background: What do Edge Functions bring to Jamstack sites?

As a rule, businesses turn to Jamstack for fast performance, elastic scale, enhanced security, and infrastructure efficiency of their web properties. However, even though static websites promise all that, you cannot edit them to customize the web experience of individual visitors. That’s a nontrivial issue, for personalization and A/B testing capabilities are significant pluses for marketing teams, which are tasked with continuously optimizing user experience and raising conversions.

To be sure, client-side tools abound that work on the DOM level, but they predate today’s virtual DOM-based, front-end libraries and frameworks like React and Vue, causing constant conflict for DOM (HTML) and resulting in flickers, content swaps, poor UX, and a lower score in Core Web Vitals. Consequently, many digital architects have reverted to server-side rendering, which, depending on the parameters of the solution, might raise infrastructure overhead and even impact performance.

Fortunately, edge-side processing of static sites is here to the rescue. Powered by the edge-compute capability of a content delivery network (CDN), edge-side processing not only continuously generates static pages at build time (through Jamstack), but also offers you the ability to modify page content before delivery. You then have the best of both worlds: stellar performance, scale, and security characteristics, which Jamstack is renowned for, as well as personalization and A/B testing features.

Uniform and Netlify Edge Functions

As part of the edge-side SDK, Uniform Context, which personalizes webpages across channels without sacrificing page performance or scalability, plugs natively into Netlify Edge Functions so that nontechnical professionals can manage both personalization and A/B testing without developer involvement. Moreover, personalization and A/B testing run in front of statically generated pages, i.e., outside the browser, eliminating issues like flickers, content swaps, and cumulative layout shifts—a capability called edge-side personalization.

Note: For the differences between edge-side and traditional server-side personalization, check out this guide on activating personalization in Uniform.

This is a real webpagetest.org test that loads a page blazing fast in half a second with no UX snags or flickers:

Quick demo of Uniform personalization on Netlify Edge Functions

This predeployed demo site shows Uniform personalization running on Netlify Edge Functions:

Procedure

1. Open the For Developers page and go to the homepage. The hero image changes to display a different message.
2. Reload the page. Notice that the page is stable—no flickers.
3. Disable JavaScript through your browser’s developer settings and then refresh the page. Notice that the personalization stays unchanged: That’s edge-side execution in action.
4. Reenable JavaScript to continue with the demo.
5. Click Forget me to reset the Uniform signal scores.
6. Visit the For marketers page and return to the homepage, which now displays a different variant that reflects the personalization based on the behavior collected at the edge.
7. Go to Registration and sign up for an account for this test. Go back to the homepage, which now displays a different hero image as a result of a cookie-based signal in action.
8. Click Forget me to reset the Uniform signal scores.
9. Visit the Campaign page. Notice that the string ?utm_campaign=unfrmconf has been added to the URL and that a different hero image is shown as a result of a query-string-based signal in action.

Examples of Personalization with Uniform + Edge Functions

Uniform Context and Netlify Edge Functions make possible the following use cases for non-technical contributors:

• Geography-based personalization contingent on Netlify’s geo data. The Uniform-Netlify integration extends your project with Netlify-specific APIs, enabling you to create signals according to Netlify’s geo attributes. For details, see the related documentation on Edge Functions.
• Personalization based on any data on the HTTP request:
  • utm_campaign or any query-string-based personalization
  • Cookie-based personalization
  • Uniform A/B testing
• Personalization based on session context (user preferences, profile, shopping history, etc.).
• Personalization based on a customer data platform (CDP) or any API-based data-context provider. Implementation requires fetching the data from the Edge Functions and incorporating their values into Uniform Context quirks.

For more ideas of what’s possible with Netlify Edge Functions, check out Netlify’s Edge Functions example library.

Summary

By adding Netlify Edge Functions through the straightforward procedure described above, you offer visitors the much-desired ability to examine the nuances of your product. In addition, you can you save your team countless hours of manual work of personalization: that’s also a significant win-win for everyone.

Have a try at setting up the Beta version of Edge Functions with Uniform. We welcome your feedback.