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 customers 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 customer 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 customer segment in Prepr to reference the external customer segment. This customer 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 customer segment in this case.

How to fetch adaptive content

Fetch adaptive content by a variant, a customer or a customer segment.

Fetch content by variant

A variant is the adaptive content linked to one or more customer 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:

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 customer

If customers are maintained in Prepr, you can retrieve adaptive content using an API request that includes an HTTP header called Prepr-Customer-Id containing a Customer ID or Customer Reference 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 a Customer ID, then you’ll get adaptive content shown on the RESPONSE tab. Otherwise, general content will be returned like in the ALL OTHER USERS tab.

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

Fetch content by customer segment

If customers 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 relevant Prepr Customer Segment ID or ID in your API request.

See an example query below:

If the API request includes an HTTP header Prepr-Segments containing the segment Id's, then you’ll get adaptive content shown on the RESPONSE tab. Otherwise, general content will be returned as the ALL OTHER USERS tab shows.

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:

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