Fetching personalized content
Prepr lets you generate fully customized experiences to boost engagement and conversion rates in a web app. Check out the Personalization guide for more details.
A native personalization engine is built into the Stack field. Once added to a model, the Stack field may include multiple content items and components and allows editors to personalize these elements 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.
Segmentation
You can link adaptive content variants to one of more segments in Prepr.
- When visitors are maintained in Prepr, you can create segments with conditions directly in Prepr to target them with adaptive content based on their behavior on the web app. The front end can then fetch the adaptive content by visitor in this case.
- If you source segments from another application, for example, by using an external CRM/CDP system, then you need to create a matching segment in Prepr to reference the external segment. This segment can then be used to determine the adaptive content for these visitors. The front end can then fetch adaptive content by variant or fetch it by segment in this case.
How to fetch adaptive content
Fetch adaptive content by a variant, a visitor or a segment.
Fetch content by visitor
If visitors are maintained in Prepr, you can retrieve adaptive content using an API request that includes an HTTP header called Prepr-Customer-Id containing the ID of the web app visitor. This allows Prepr to match a web app visitor to a segment in your Prepr environment and return the matching content for this visitor based on the personalized content in the Stack field.
Note, the visitor ID in the HTTP header must correspond to the ID used when sending events to Prepr.
If the Prepr-Customer-Id header is not sent or contains no data, the API will return the variants set up on the Stack field and marked for All other users, in other words, that are not matched to any segment.
See an example query below:
If the API request includes an HTTP header Prepr-Customer-Id containing an ID for the visitor, then you’ll get adaptive content shown on the RESPONSE tab. Otherwise, general content will be returned like in the ALL OTHER USERS tab.
REQUEST
query {
Page (slug: "/") {
_id
title
_slug
content {
__typename
... on Hero {
_id
heading
sub_heading
buttons {
button_type
text
}
_context {
kind
variant_id
variant_key
segments
}
}
}
}
}Fetching restraints
- If a visitor matches two different segment lists in Prepr, the first matching segment will be used.
- Prepr will always return only one specific content variant per personalized element in the Stack field.
Fetch content by variant
A variant is the adaptive content linked to one or more segments. You can retrieve adaptive content for a specific personalized variant by passing the segments as arguments in your query. For example, use a segment that is from an external CDP/CRM system.
See an example query below:
REQUEST
query {
Page (slug: "/") {
_id
title
_slug
content (personalize_for_segments: "electric-car-buyers") {
__typename
... on Hero {
_id
heading
sub_heading
buttons {
button_type
text
}
_context {
kind
variant_id
variant_key
segments
}
}
}
}
}Fetch content by segment
If visitors are created and maintained in another CRM or CDP system, you can pass the segments as a comma-separated string using the HTTP Header Prepr-Segments. Include the segment API ID in your API request.
Sort strings in alphabetical order to guarantee cache-efficient data processing.
See an example query below:
If the API request includes an HTTP header Prepr-Segments containing the segment IDs, then you’ll get adaptive content shown on the RESPONSE tab. Otherwise, general content will be returned as the ALL OTHER USERS tab shows.
REQUEST
query {
Page (slug: "/") {
_id
title
_slug
content {
__typename
... on Hero {
_id
heading
sub_heading
buttons {
button_type
text
}
_context {
kind
variant_id
variant_key
segments
}
}
}
}
}How to pre-fetch adaptive content for static (SSG) websites
Prepr lets you pre-fetch all data for all segments so you can implement personalization for static (SSG) websites.
For that, pass the personalize: false argument in the API request. Use the _context system field to choose the variant that you want to show in your front-end.
See an example query below:
REQUEST
query {
Page (slug: "/") {
_id
title
_slug
content (personalize: false) {
__typename
... on Hero {
_id
heading
sub_heading
buttons {
button_type
text
}
_context {
kind
variant_id
variant_key
segments
}
}
}
}
}