Setting up personalization

Estimated duration: 15-30 minutes

This guide demonstrates how to set up personalization and the related metrics in your web application using the Prepr GraphQL API.

Introduction

Prepr lets you create personalized experiences with Adaptive content. With Adaptive content, content editors can make different versions of content for various visitor segments. You can then show the right content to each visitor based on their segment giving them a personalized experience. By doing the one-time setup detailed below, Prepr can track and measure the visitor interactions for each adaptive content element.

Use case

Let's look at an everyday use case. The marketing team wants to improve user experience and the clickthrough rate of the home page header. They've decided to group their customers into two main segments: Customers who lease electric cars and customers who lease used cars. Based on these segments they add adaptive content to the home page to target these customers separately.

General website visitors
When customers navigate to the Acme Lease home page, they see a generic page like in the image below.

Visitors interested in leasing an electric car
When a potential customer searches for an electric lease car and clicks on an Acme Lease ad, they are directed to the electric lease landing page on the Acme Lease website. If they visit the home page again later, they'll see content focused on electric lease cars instead of the usual generic home page.

Visitors interested in leasing a used car
Another potential customer sees an Acme Lease social ad after searching for used car leasing options. When they click the ad, they’re taken to the used car lease landing page on the Acme Lease website. Later, when they revisit the home page, they see content focused on leasing used cars.

For this use case, the front-end application has been set up to track each visitor's behavior based on their interests. When they view a particular landing page, Prepr places them in the correct segment.

The adaptive content in the home page is for two segments: Electric Car Lovers and Used Car Lovers. This allows the front end to display the correct home page for each segment.

The marketing team can then evaluate metrics in Prepr to measure conversions for each element with adaptive content and determine how well they perform against the generic home page.

Prerequisites

To implement adaptive content for the above example, you need to have the following set up in Prepr beforehand:

• A Prepr CMS account (opens in a new tab)
• An environment with Acme Lease demo data in Prepr

We will make use of the Home Page content item from the Acme Lease demo data. Take note that adaptive content is defined in a Stack field.

Set up personalization in your front end

Before setting up personalization in your front end, make sure the following points have been prepared:

• Set up segments. Usually this is done by the marketing team, but if you don't have any segments, you can set them up for Electric Car Lovers and Used Car Lovers and add them to their matching variants in the Home page content item. Don't forget to add conditions to each of the segments so that Prepr can track view events on the corresponding landing pages.

• Add the Prepr Tracking Code to track visitor events.

• Get a customer Id to identify visitors. Check out the example Next.js code on how to get a customer Id. (opens in a new tab) Prepr uses this customer Id to match a visitor to a segment.

  The code above uses the __prepr_uid cookie. For your project, you could use your own Id to set the Prepr Customer Id.

Now you're ready to set up personalization in the following steps:

• Step 1: Retrieve adaptive content using the API.
• Step 2: Add HTML attributes to track impressions and conversion events.

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
                }
            }
        }
    }
}

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

{
    "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="
                    },
                }
            ]
        }
    }
}

{
    "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"
                        ]
                    }
                }
            ]
        }
    }
}

...
<!-- 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> 
...
 

Other use cases

This guide explains just one use case for adaptive content. Below we list a few more common options.

Segments from external CRM/CDP systems

It is possible to set up adaptive content based on segments maintained in other CDP/CRM systems or segments based on UTM tags (for instance from an ad campaign). This means that customer data doesn't have to be imported into Prepr. In this case, you need to reference these external segments from within Prepr using the segment unique identifier from that system or the UTM tag.

Your adaptive content flow will look like this:

1. Create a new segment in Prepr and set the ID value to the segment unique identifier copied from your CRM/CDP system or the UTM tag.

2. Retrieve adaptive content using the API with one difference — you must pass the Prepr-Segments header instead of the Prepr-Customer-Id. For more information, refer to our API documentation.

3. If the segment is based on external customer data, ensure that your front end is connected to the external CRM/CDP system for data retrieval.

Want to learn more?

Check out the following chapters:

• Capturing event data
• A/B testing
• Recommendations
• Connecting your front-end application

Schedule a free consultation

Do you want to get started with adaptive content but still have questions or want a demo?

Schedule a free call (opens in a new tab) with a Prepr solution engineer.