PERSONALIZATION

Fetching personalized content

Prepr lets you generate fully customized experiences to boost engagement and conversion rates in a web app. This involves event data collection, customer segmentation, and personalized content creation. Check out the Personalization guide to set up personalization for your web application.

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 create specific content per customer segments and/or country.

How to fetch personalized content

To fetch the right content on the front end, consider the following rules.

Personalized content based on customer segments

A segment can be created in Prepr or in an external CRM/CDP system.

Segments in Prepr

If segments are created in Prepr, an API request must include an HTTP header called Prepr-Customer-Id containing a Customer ID or Customer Reference ID of a target visitor. This allows Prepr to match a web app visitor to a segment in your Prepr environment and generate the right content for this visitor based on personalizations 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 fallback page. This page is the variant set up on the Stack field and marked for All other users which are not matched to any segment.

What's the difference between the Customer ID and the Reference ID?
The Customer ID is the internal Prepr ID for customers. The Reference ID is an ID that the front-end application can send along. Prepr automatically creates a Reference ID if you use the Prepr tracking code to capture events. This Reference ID is available in the front end in a cookie called __prepr_uid.

Segments from external CRM/CDP system

If segments 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 Segment ID or Reference ID’s in your API request.

Tip

Sort strings in alphabetical order to guarantee cache-efficient data processing.

Note

Make sure not to pass both the Prepr-Segments and Prepr-Customer-Id headers at the same time.

Personalized content based on countries

By default, Prepr uses the IP address from the request to define visitor geolocation.

For web apps using server-side rendering (SSR), you can pass a visitor’s IP using the HTTP Header Prepr-Visitor-IP. This will override the request IP.

General rules

  • If a visitor matches two different customer segment lists in Prepr, the first matching customer segment will be used.
  • Prepr will always return only one specific content variant per personalized element in the Stack field.
  • A combination of a customer segement and a country parameter has a higher priority over the segment or country parameters alone.

Example query

Please see an example query for fetching personalized content below.

If the API request includes an HTTP header Prepr-Customer-Id containing a Customer ID, then you’ll get personalized content shown on the Response tab. Otherwise, general content will be returned as the Fallback tab shows.

query{
 Page (slug: "home-page") {
     title
     _slug
     stack {
 ... on PageHeader {
   heading
   image {
     name
   }
   text
   cta_label
 }
 __typename
}
 }
}

{
  "data": {
      "Page": {
          "title": "Home page",
          "_slug": "home-page",
          "stack": [
              {
                  "heading": "Welcome beginner baker!",
                  "image": [
                      {
                          "name": "welcome beginner"
                      }
                  ],
                  "text": "Get started with our easy to follow recipes, our basic kitchen tips and kitchen gadgets that every beginner needs.",
                  "cta_label": "Let's start our baking journey!",
                  "__typename": "PageHeader"
              },
              {
                  "__typename": "ImageAndText"
              },
              {
                  "__typename": "ImageAndText"
              },
              {
                  "__typename": "ArticleCollection"
              },
              {
                  "__typename": "ProductCollection"
              },
              {
                  "__typename": "CallToAction"
              }
          ]
      }
  }
}


{
  "data": {
      "Page": {
          "title": "Home page",
          "_slug": "home-page",
          "stack": [
              {
                  "heading": "Welcome to the bake shop",
                  "image": [
                      {
                          "name": "welcome"
                      }
                  ],
                  "text": "Learn some basic steps to get started or kick your skills up a notch with our handy tips, recipes and products.",
                  "cta_label": "Let's get baking!",
                  "__typename": "PageHeader"
              },
              {
                  "__typename": "ImageAndText"
              },
              {
                  "__typename": "ImageAndText"
              },
              {
                  "__typename": "ArticleCollection"
              },
              {
                  "__typename": "ProductCollection"
              },
              {
                  "__typename": "CallToAction"
              }
          ]
      }
  }
}

How to pre-fetch personalized 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 segment:false parameter in the API request. Two additional fields, _countries _segments and _personalization, will become available to set up personalization in the front end.