Setting up personalization

Create a customer ID

To make sure each web app visitor sees the correct adaptive content when they view a personalized page, Prepr CMS identifies each visitor by a Prepr Customer ID. Based on this value, Prepr can determine which segment the customer belongs to and therefore the related personalized content.

The Prepr tracking pixel you added, assigns each visitor a unique ID with a cookie called __prepr_uid. You can use this __prepr_uid value to set the Prepr Customer ID.

Follow the steps below to generate and store a Prepr Customer ID for each visitor:

1. Check if the __prepr_uid cookie is set.
2. If the cookie isn't set yet, meaning the first time this visitor views a page, generate a random ID.
3. Set the __prepr_uid cookie value to the generated ID.
4. Make this ID available to the web app as a global variable. This variable will be used for the Prepr Customer ID instead of the cookie.

This solution can best be implemented in the middleware of your web app where you have access to reading and setting cookies and can store a global variable. See the following example on how to set this up in the Next.js middleware.

import type { NextRequest } from 'next/server'
import { NextResponse } from 'next/server'
import { headers } from 'next/headers'
 
export function middleware(request: NextRequest) {
  //Get the cookie to check if it exists
  let prepr_uid = request.cookies.get('__prepr_uid')?.value
 
  let newResponse = NextResponse.next()
 
  // If the cookie doesn't exist yet, generate a random ID
  if (!prepr_uid) {
    prepr_uid = crypto.randomUUID()
    newResponse.cookies.set('__prepr_uid', prepr_uid, {
      maxAge: 1 * 365 * 24 * 60, // Set for one year
    })
  }
 
  // Create a global variable to make it available to the
  // rest of the web app for the Prepr Customer Id
  newResponse.headers.set('Prepr-Customer-Id', prepr_uid)
 
  return newResponse
}

Now that the global variable is set, we can later retrieve the Prepr Customer ID with this helper function:

import { headers } from 'next/headers'
 
export function getPreprUUID() {
  return headers().get('Prepr-Customer-Id')
}

For some other frameworks, you could use the Session ID instead of the __prepr_uid cookie in your front end and use this value as the Prepr Customer ID to be sent to Prepr. See the example Laravel code snippet below.

$prepr_customer_id = Session::getId();

Make the session persistent by setting the cookie's lifetime parameter to something like 90 days. This means that you get the same session ID even when a customer visits the site multiple times.

Now that the Prepr Customer Id is available you can continue the next step to retrieve the adaptive content.

Retrieve adaptive content using the API

Now it's time to retrieve the Home page content item including the adaptive content elements.

Copy the sample code below into your front-end application.

query{
   Page (id: "6b9aab64-4972-4049-810f-333fc89bf87c") {
    title
        stack {
            ... on SectionHeader {
                title
                image {
                    name
                }
                text
                cta_button
                _context {
                    kind
                    variant_id
                    variant_key
                    segments
                }
            }
        }
    }
}

Update the id string of the query with the Content item ID of the Home page. See the image below on where to find the Content item ID on the content item page.

To retrieve the page content, call the API using the query above and pass a Prepr Customer ID as a header as shown below. The Prepr Customer ID is required to determine which segment a visitor belongs to and as a result which variant a visitor gets.

--header 'Prepr-Customer-Id: <YOUR-CUSTOMER-ID>' 

As a response to your API request, Prepr sends the variant to be displayed. Your app then needs to build its response based on this variant. If you don't specify a customer Id in the header or the customer Id is for a visitor that does not belong to either segment, then the query response looks like the example below.

{
    "data": {
        "Page": {
            "title": "Homepage",
            "stack": [
                {
                    "title": "Welcome to Acme Lease 👋🏼 Find your car",
                    "cta_button": {
                        "text": "Find a car"
                    },
                    "_context": {
                        "kind": "PERSONALIZATION",
                        "variant_id": "ALL_OTHER_USERS",
                        "variant_key": "eyJpIjoiZGJkMDY0NjctMDNiMy00N2Q1LTkxNmEtZjM2ZjRiYTkyM2FiIiwiZSI6IjNiOWE0M2NhLTJkMjctNDg1Yi1hMWI3LTgwNWE4YTcyZGQzNSIsInYiOiJBTExfT1RIRVJfVVNFUlMifQ="
                    },
                }
            ]
        }
    }
}

If the customer Id in the header matches a visitor that belongs to one of the segments, then the query response looks like the example below.

{
    "data": {
        "Page": {
            "title": "Homepage",
            "stack": [
                {
                    "title": "Green your drive ☘️ Lease top electric cars!",
                     "cta_button": {
                        "text": "Find a car"
                    },
                    "_context": {
                        "kind": "PERSONALIZATION",
                        "variant_key": "eyJpIjoiZGJkMDY0NjctMDNiMy00N2Q1LTkxNmEtZjM2ZjRiYTkyM2FiIiwiZSI6IjNiOWE0M2NhLTJkMjctNDg1Yi1hMWI3LTgwNWE4YTcyZGQzNSIsInYiOiJFTEVDVFJJQy1DQVItTE9WRVJTIn0=",
                        "variant_id": "ELECTRIC-CAR-LOVERS",
                        "segments": [
                            "8f1e1cac-c3a8-4716-b911-db37446de85f",
                            "electric-car-lovers"
                        ]
                    }
                }
            ]
        }
    }
}

Take note of the following important context fields:

• kind - This returns a value of PERSONALIZATION when adaptive content is enabled for this element in the Stack.
• variant_id - This returns a value of the segment for the variant, for example, ELECTRIC-CAR-LOVERS. This value is ALL_OTHER_USERS for the variant not assigned to any specific segment.
• variant_key = A unique Id for the variant. You will use this field value in the next step to indicate which components need to be tracked for impressions.

Add HTML attributes to track impressions and conversion events

To track visitor interactions with adaptive content and get accurate metrics, we need to add attributes to the section header. Usually, you'd collaborate with the marketing team to choose the element and the corresponding event that indicates a conversion in the page with adaptive content.

In our example, we have a section header with some specific text and a call-to-action button for each variant, so we want to report on the following types of visitor interactions:

• Impressions: How many visitors viewed the section header for each variant.
• Clicks: How many visitors clicked the CTA button for each variant.

Prepr will determine the conversion rate and other related metrics based on these events and will show you which variant performed best.

To start collecting impressions, add the HTML attribute data-prepr-variant-key to the Section header. The impression is then recorded when the Section header element scrolls into view.

Set the data-prepr-variant-key value to the Prepr variant key value returned in the query response.

To start collecting clicks, add the HTML attribute data-prepr-variant-event to the CTA button. The click is recorded when the CTA button element is clicked.

See an example code snippet to include the HTML attributes below:

...
<!-- section header -->
<div class="..."  data-prepr-variant-key="{{ variant_key }}">
  <!-- section header image -->
  <img src="..." class="...">
  <div class="...">
    <div class="...">
      <!-- section header text -->
      <h1 class="...">...</h1>
      <span>
        <!-- section header button -->
        <a href="/catalog?category=electric" data-prepr-variant-event>
          <button class="...">Find your car</button></a>
      </span>
    </div>
</div> 
...
 

That’s it. You've set up adaptive content in your website. Now, you can show each visitor a personalized header based on their clicking behavior.

As visitors interact with your web app, data will be collected and metrics will be visible in the adaptive content group. Go to the Home page content item to see the metrics.

After some time the marketing team will be able to evaluate metrics to determine how well the variants with adaptive content perform and adjust the content, if necessary.

Congratulations, you have successfully set up adaptive content on your web app.

Check out the marketers' adaptive content guide to get a full picture on the steps needed to add adaptive content to your website.