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

Adaptive content in Prepr is grouped by customer segments and country segments.

• When customers are maintained in Prepr, these visitors are grouped into customer segments and get adaptive content based on their behavior on the web app. Adaptive content can be fetched by customer in this case.
• When segments are decided by the front-end, for example, by using an external CRM/CDP system or UTM tag (such as from an ad campaign), then a customer segment needs to be created in Prepr to reference the external customer segment. This customer segment can then be used to determine the adaptive content for these visitors. Adaptive content can be fetched by variant or fetched by customer segment in this case.
• The country segment is used to show adaptive content to visitors from a specific country. By default, Prepr uses the IP address from the request to define the visitor's 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.

A combination of these segments for adaptive content in a Stack results in a personalized variant. See the table below for example variants when some Stack items and components are personalized:

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 for a combination of customer segments and country segments. Adaptive content can be retrieved by a specific personalized variant by passing segments and countries as arguments in your query. For example, use a UTM tag from an ad campaign as a matching segment, a segment that is from an external CDP/CRM system or get specific content depending on the visitor's location.

See an example query below:

query {
  Page(slug: "home-page") {
    _slug
    stack(personalize_for_segments: ["pro-bakers"],
          personalize_for_country: "NL") {
      ... on PageHeader {
        _context {
          kind
          segments
          group_id
          countries
          variant_id
        }
        heading
        text
        image {
          url(width: 1600)
        }
      }
      ... on ImageAndText {
        title
        text
        image_position
        image {
          url(width: 800)
        }
      }
    }
  }
}

Fetch content by customer

If customers are maintained in Prepr, adaptive content can be retrieved using an API request that includes 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 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 as the ALL OTHER USERS tab shows.

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

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: "home-page") {
      title
      _slug
      stack {
  ... on PageHeader {
    heading
    image {
      name
    }
    text
    cta_label
  }
  __typename
}
  }
}

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: "home-page") {
      _slug
      stack(personalize: false) {
        ... on PageHeader {
          _context {
            kind
            segments
            group_id
            countries
            variant_id
          }
          heading
          text
          image {
            url(width: 1600)
          }
        }
        ... on ImageAndText {
          title
          text
          image_position
          image {
            url(width: 800)
          }
        }
      }
    }
}