Skip to content
main
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Oct 27, 2020
Oct 27, 2020
Oct 27, 2020
src
Oct 27, 2020
Oct 27, 2020
Oct 27, 2020
Oct 27, 2020
Oct 27, 2020
Oct 27, 2020

README.md

Edge-personalize

Personalize and a/b test static generated pages at the edge. Get the performance and uptime of static generation, with the personalization of server side rendering

Usage

E.g. in an AWS lambda viewer response function over your static site or page

import { personalize } from '@builder.io/edge-personalize';

export const handler = (ctx) => {
  const { request, response } = event.Records[0].cf;
  const html = response.body;
  const newHtml = personalize(html, {
    // E.g. parse these from cookie header - request.headers.cookie?.[0]?.Value
    viewer: { gender: 'male' },
    abTests: { 'cta-test': 'free-promo' },
  });
  response.body = newHtml;
  return response;
};

Personalizations

This turns static markup like:

<div class="foo">
  <template data-edge-personalize>
    <div data-edge-personalize="viewer.gender === 'woman'">Hello mam</div>
    <div data-edge-personalize="viewer.gender === 'man'">Hello sir</div>
    <div data-edge-personalize="viewer.gender === 'other'">Hello there</div>
  </template>
  <div data-edge-personalize="default">Hello there</div>
</div>

into:

<div class="foo">
  <div>Hello sir</div>
</div>

A/B tests:

Turns

<button class="foo">
  <template data-edge-ab-test="cta-test" duration="30d">
    <div data-edge-ab-test="free-promo" data-edge-ab-test-percent="20">
      Sign up free
    </div>
    <div data-edge-ab-test="fast-promo" data-edge-ab-test-percent="20">
      Sign up fast
    </div>
  </template>
  <div data-edge-ab-test="default">Sign up now</div>
</button>

Into

<button class="foo"><div>Sign up free</div></button>

React support (WIP)

To generate (and hydrate) in this format, e.g. for Gatsby, Next.js, or other React frameworks, you can create your own custom renderer, or use your React component

import {
  EdgePersonalize,
  When,
  Default,
} from '@builder.io/edge-personalize/react';

export const PersonalizedComponent = () => (
  <EdgePersonalize id="gendered-greeting">
    <When expr="viewer.gender === 'men'">Mens content</When>
    <Default>Default content</Default>
  </EdgePersonalize>
);

A/B tests:

import { EdgeABTest, Group, Default } from '@builder.io/edge-personalize/react';

export const ABTestedComponent = () => (
  <EdgeABTest
    id="cta-test"
    duration="30d"
    onLoad={({ group }) => {
      // Track which test group was viewed
    }}
  >
    <Group percent={20} name="free-promo">
      Sign up free
    </Group>
    <Group percent={20} name="fast-promo">
      Sign up fast
    </Group>
    <Default>Sign up now</Default>
  </EdgeABTest>
);

Made with ❤️ by Builder.io

About

Personalize and a/b test your static pages at the edge. Static speed with dynamic optimizations!

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.