Personalize website

This guide shows you how to add personalization in Prepr to improve website engagement and user experience.

This guide is focused on the typical personalization activities of a marketer. Check out the set up personalization guide for developers for the one-time setup in the front-end app.

Introduction

Deliver a personalized customer experience for your website or app visitors by using built-in Prepr features. Let's look at an everyday use case.

You want to improve user experience and the clickthrough rate of the home page header. You've decided to group your customers into two main segments: Customers who lease electric cars and customers who lease used cars.

Based on these segments you then 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.

Acme lease home page

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.

Acme lease electric 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.

Acme lease occasional home page

For this use case, the front-end application tracks each visitor's behavior based on their interests. When a visitor views 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.

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

Prerequisites

To add personalization to your website like in the above example, you need to have the following set up in Prepr beforehand:

We will make use of the Homepage - Generic content item from the Acme Lease demo data.

Personalize your website

To personalize your website, you need to complete the following steps:

Step 1: Set up segments. Set up segments based on specific visitor interaction on the content. These segments are the groups of visitors for whom you want to deliver a personalized experience.
Step 2: Personalize an element. For each segment, create content specifically aimed at those groups of visitors.
Step 3: Evaluate the personalized variants. Prepr collects metrics on the performance of the personalized pages. You can use this data to improve on your personalized pages and/or criteria.

Set up segments

Before implementing personalization you need to choose different target segments for your web app. In this example, set up two segments: Electric Car Lovers and Used Car Lovers.

Go to the Segments tab and click + Create segment.
Add a condition and choose the Viewed event, Content item and select the corresponding landing page. Landing page Electric Lease for Electric Car Lovers and the Landing page Occasion Lease for Used Car Lovers.

For more information on how to manage segments, check out the segments doc.

By completing this step, you will have successfully grouped your web app visitors based on their clicking behavior.

Personalize an element

Now that you know for which visitors you want to personalize the experience, it's time to create specific content for each segment.

Go to the Content tab, click the Home page - Generic content item and add the personalization as follows:

In the Stack, go to the Section header and click the icon to add the personalization.
In the Personalization box, duplicate the section header. The original section header will automatically be used as the fallback content and linked to All other users.
Update the image and text for the Electric Car Lovers segment.
Click the All customers link and choose the Electric Car Lovers segment for this header. Note that it's also possible to limit this personalized header to a specific country.
(Optional) Drag and drop another content item or component into the personalization. This feature gives you a wide array of options when personalizing your content.
Duplicate the original section header again and update the image and text for the Used Car Lovers segment. Repeat step 4 to link the Used Car Lovers segment to this section header.

Home page content item

At this point, you have successfully created personalized content.

Evaluate the personalized variants

After a developer has done the one-time setup for Personalization and the personalized variants have been active for some time, you'll see some metrics data for the personalization group.

Click the Metrics link to open the Metrics modal. If your personalization has been running for a while, you should see some significant results like in the image below:

Metrics example

The metrics data can be filtered by by a Date range (Maximum 90 days, defaulted to the start of the experiment). The color marker at the beginning of each variant indicates if the metrics are significant (green) or not (orange). Whether the metrics are significant is based on the confidence level and a minimum sample size.

See the list below for the metrics available in Prepr.

Impressions (IMPR): These are the number of times that the element is viewed by visitors. The developer sets this element during the Personalization setup.
Conversions (CONV): The number of times that a desired action is performed on the element by visitors, such as a click. The developer sets this element during the Personalization setup.
Conversion rate: A percentage based on the conversions and the impressions. It is calculated as (Impressions/Conversions)×100.
Standard deviation: You'll notice a +/- percentage value next to the conversion rate. This value tells you how much the conversion rates vary from the mean.
Uplift - The increase in the conversion rate for the variant (B) compared to the control (A). It is calculated as: (Conversion Rate (B) − Conversion Rate (A)) / Conversion Rate (A) × 100
Confidence level (CL) - This is the confidence level. In other words, the probability that this variant will outperform the control.

Congratulations, you have successfully implemented Personalization and used it to improve the customer experience on your web app.

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:

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.
Personalize an element. See Step 2 from the instructions above.
Retrieve personalized content using the API as shown in Step 3 with one difference — you must pass the Prepr-Segments header instead of Prepr-Customer-Id. For more information, refer to our API documentation.

You do not need to add tracking code to the front end in this case because the segments are based on outside criteria and not the visitor interaction on Prepr data.

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.

Call-to-actions

Personalizing call-to-actions can significantly increase conversion rates. Offer each segment the call-to-action that fits best. For example, show a relevant whitepaper to first-time visitors and offer a demo to returning visitors.

Want to learn more?

Check out the following guides:

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.

Manage segments Run A/B tests

Was this article helpful?

We’d love to learn from your feedback