Set 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

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 personalize 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
A potential customer comes across an Acme Lease online ad based on a search they made for an electric lease car. When they click the ad, they end up on the electric lease landing page of the Acme Lease website. When they revisit the home page of the website later, they see a personalized page focused on electric lease cars instead of the above generic home page.

Visitors interested in leasing a used car
A different potential customer comes across an Acme Lease social ad based on a search they made for to lease a used car. When they click the ad, they end up on the used car lease landing page of the Acme Lease website. When they revisit the home page of the website later, they see a personalized page focused on leasing a 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 home page content is personalized 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 personalized page and determine how well they perform against the generic home page.

This is just one method for personalization. You could also personalize based on other characteristics such as age, gender, membership status, etc.

You could even personalize based on criteria outside of the web app, for example, when a user visits your web app from a social media link. In this case you could set up the segment to match a UTM tag on the redirect link. Check out one of our front-end app complete guides for more details.

Prerequisites

To implement personalization 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 the personalized content is defined in a Stack field. Check out the personalized page example for more details on how to define and set up a Stack field.

Set up personalization in your front end

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

• Set up segments. Usually this is done by the marketing team, but if they don't exist, you can set up segments for Electric Car Lovers and Used Car Lovers and add them to their matching personalized variants. 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. (opens in a new tab) Prepr uses this customer Id to match a visitor to a segment.

Now you're ready to do the personalization setup with the below steps.

• Step 1: Retrieve the variants using the API.
• Step 2: Add HTML attributes to track impressions and clicks.

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 personalization. Below we list a few more common options.

Segments from external CRM/CDP systems

It is possible to personalize Prepr 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 personalization 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 personalized content using the API as shown in Step 1 with one difference — you must pass the Prepr-Segments header instead of 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 personalization but still have questions or want a demo?

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