Add personalization to your Astro website

Add visitors to segments

For this setup we’ll make use of the Electric Car Buyers segment in the Acme lease demo data. Make sure that the segment in your Prepr environment includes the condition, Visitors who did view specific items, Electric Lease Landing Page.

If you need more details, checkout the Segments docs.

You previously enabled Prepr tracking in your website. This means a visitor gets added to the Electric Car Buyers segment whenever they view the Electric Lease Landing Page content item.

You can test this with the following steps:

1. Go to http://localhost:4321/electric-lease to open the electric lease landing page in your website.

   

2. In your Prepr environment, go to the Segments page and click the Electric Car Buyers segment. You should see matching visitors in this segment like in the image below.

   

To make sure that visitors in the Electric Car Buyers segment see the matching adaptive content when they visit the home page, you need to set the API request header, Prepr-Customer-Id, when you retrieve the page content. Based on this value, Prepr will check the segment that this visitor belongs to and will retrieve the matching personalized variant.

Because you installed the Prepr Toolkit previously, your API request headers are already prepared.

Set the API request headers

Now that the Prepr Toolkit is installed, update the helper prepr.ts you created previously by replacing the headers type with the PreprHeaders type from the toolkit.

import { PREPR_GRAPHQL_URL } from 'astro:env/server';
import { print } from 'graphql';
import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
import type { PreprHeaders } from '@preprio/toolkit';
 
export async function prepr<TResult, TVariables>(
  document: TypedDocumentNode<TResult, TVariables>,
  variables: TVariables,
  headers: PreprHeaders = {},
): Promise<TResult> {
  const response = await fetch(PREPR_GRAPHQL_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', ...headers },
    body: JSON.stringify({ query: print(document), variables }),
  });
  if (!response.ok) {
    throw new Error(`Prepr GraphQL request failed: ${response.status} ${response.statusText}`);
  }
  const { data, errors } = await response.json();
  if (errors?.length) throw new Error(errors[0].message);
  return data;
}

Since the API request headers are already prepared, you can simply set them for your page. To set the API request headers, update the [...slug].astro with the highlighted code below:

---
import Layout from '../layouts/Layout.astro';
import Hero from '../components/sections/Hero.astro';
import Feature from '../components/sections/Feature.astro';
import { prepr } from '../lib/prepr';
import { GetPageBySlugDocument } from '../gql/graphql';
import { getPreprHeaders } from '@preprio/toolkit/astro';
 
// The home page has no slug in the URL; in Prepr its slug is '/'.
const slug = Astro.params.slug ?? '/';
 
// Prepr uses these headers (visitor ID, segments, A/B variant) to pick the right variant.
const data = await prepr(GetPageBySlugDocument, { slug }, getPreprHeaders(Astro.request.headers));
 
if (!data.Page) return Astro.rewrite('/404');
const page = data.Page;
---
 
<Layout>
  <meta slot="head" property="prepr:id" content={page._id} />
  {page.content.map((element) => {
    if (element.__typename === 'Hero') return <Hero item={element} />;
    if (element.__typename === 'Feature') return <Feature item={element} />;
  })}
</Layout>

Test your adaptive content

Now that people who visit the Electric lease landing page are being grouped into the Electric Car Buyers segment, you can test the adaptive content. To test the adaptive content for the Electric Car Buyers segment follow the steps below.

1. Go to the Electric Lease Landing Page in your website. For example: http://localhost:4321/electric-lease.
2. Then, go back to the home page. You can now see the personalized home page like in the image below.

To see the non-personalized page, you can reset the cookies and refresh the page as follows:

1. Right-click the page to Inspect the page, click the Application tab. Under the cookies, click your localhost. You’ll notice the __prepr_uid cookie in the list.

2. Right-click the localhost entry to Clear the cookies and refresh the page. You should now see the non-personalized content in the home page.

Add HTML attributes to track impressions and conversion events

Your personalization is running successfully, however there are no metrics being recorded yet. You can see this with the Awaiting data message at the top of the Adaptive content block in the Homepage content item.

To get Prepr to start showing some metrics data, you need to add HTML attributes to elements in your adaptive content. When you add these attributes, the tracking pixel you added in the previous section automatically tracks impressions and your chosen conversion events.

1. To start collecting impressions and clicks, add the HTML attributes data-prepr-variant-key and data-prepr-variant-event to the Hero section as shown in the highlighted code below. The impression is recorded when the Hero element scrolls into view. The click is recorded when the Button element is clicked.

   If you followed the previous guide to add A/B testing, then you’ve already added the necessary HTML attributes and can skip this step.

   ./src/components/sections/Hero.astro

   ---
   import { Image } from 'astro:assets';
   import type { HeroFragment } from '../../gql/graphql';
   import Button from '../Button.astro';
    
   interface Props {
     item: HeroFragment;
   }
    
   const { item } = Astro.props;
   const image = item.image;
   ---
    
   {/* data-prepr-variant-key on the section records an impression for the variant */}
   <section class="bg-primary-50" data-prepr-variant-key={item._context?.variant_key}>
     <div class="mx-auto max-w-8xl p-spacing flex flex-col items-center md:flex-row gap-8 py-10 lg:py-20">
       <div class="basis-6/12">
         <h1 class="text-mb-5xl lg:text-7xl text-secondary-700 font-medium break-words text-balance">{item.heading}</h1>
         <p class="text-secondary-500 lg:text-lg mt-4 lg:mt-6 text-balance">{item.sub_heading}</p>
         <div class="flex gap-4 mt-8 xl:mt-10">
           <div>
              {/* data-prepr-variant-event on the link records a click (conversion) */}
             <a href="#" data-prepr-variant-event><Button>{item.buttons[0]?.text}</Button></a>
           </div>
         </div>
       </div>
       <div class="basis-6/12 relative flex justify-end items-center">
         <div class="z-10 flex items-center aspect-[20/17] w-9/12 overflow-hidden justify-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
           {image?.url && <Image src={image.url} alt="Hero Image" width={720} height={360} class="object-cover rounded-2xl" />}
         </div>
         <div class="w-9/12 aspect-[20/17] bg-primary-100 rounded-3xl right-0 top-0 z-0"></div>
       </div>
     </div>
   </section>

2. To start recording metrics, go to the home page in your website, click the Find your car button.

3. Now when you view the adaptive content in your Homepage content item, you can click the Metrics link and see the number of impressions and clicks like in the image below.