PERSONALIZATION

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

Segmentation

Personalized 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 personalized content based on their behavior on the web app. Personalized 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 personalized content for these visitors. Personalized content can be fetched by variant or fetched by customer segment in this case.
  • The country segment is used to show personalized 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 personalized content in a Stack results in a personalized variant. See the table below for example variants when some Stack items and components are personalized:

Variant
Personalized elementsCustomer segmentsCountries
PRO-BAKERSPage header, CTApro-bakersNone
PRO-BAKERS_NL-USImage and text blockpro-bakersNL, US
ALL-OTHER-USERSPage header, CTA, Image and text blockNoneNone

How to fetch personalized content

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

Fetch content by variant

A variant is the personalized content for a combination of customer segments and country segments. Personalized 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)
          }
        }
      }
    }
}

{
  "data": {
    "Page": {
      "_slug": "home-page",
      "stack": [
        {
          "_context": {
            "kind": "PERSONALIZATION",
            "segments": [
              "41ba4617-8b62-4504-9ec1-8fbbef95b9bc",
              "pro-bakers"
            ],
            "group_id": "0fe39800-9a74-42fb-af02-1b6efb6124e8",
            "countries": "NL",
            "variant_id": "PRO-BAKERS_NL"
          },
          "heading": "Welcome chef!",
          "text": "Kick it up a notch with our advanced workshops and get the latest state of the art kitchen equipment.",
          "image": [
            {
              "url": "https://demo-site-patterns.stream.prepr.io/w_1600/wvg5jx38xbn-pexels-elevate-1267320.jpg"
            }
          ]
        },
        {
          "title": "The best way to crack an egg",
          "text": "Everyone has their own way to crack an egg. Maybe they learnt it from a parent or from watching cooking videos. The truth is there is no \"best\" way. Practice makes perfect. Start with the back of a knife or fork and try not to get any shell pieces into your egg.",
          "image_position": "Left",
          "image": [
            {
              "url": "https://demo-site-patterns.stream.prepr.io/w_800/11yyf3iocp7d-pexels-klaus-nielsen-6294143.jpg"
            }
          ]
        },
        {
          "title": "Brunch, the most fulfilling way to bring people together",
          "text": "What better way to bring all your loved ones together than by inviting your friends and family over for brunch with homemade breads, pastries and quiches. No need to go overboard with preparations. Brunch is so much easier to prepare than dinner and you don't have to fuss too much about preferences by having both sweet and savory treats at hand.",
          "image_position": "Right",
          "image": [
            {
              "url": "https://demo-site-patterns.stream.prepr.io/w_800/1k9uvcbql61a-pexels-monica-silvestre-803897.jpg"
            }
          ]
        },
        {},
        {},
        {}
      ]
    }
  }
}

{
  "data": {
    "Page": {
      "_slug": "home-page",
      "stack": [
        {
          "_context": {
            "kind": "PERSONALIZATION",
            "segments": null,
            "group_id": "0fe39800-9a74-42fb-af02-1b6efb6124e8",
            "countries": null,
            "variant_id": "ALL_OTHER_USERS"
          },
          "heading": "Welcome to our baking community",
          "text": "Learn some basic steps to get started or kick your skills up a notch with our handy tips, recipes and products.",
          "image": [
            {
              "url": "https://demo-site-patterns.stream.prepr.io/w_1600/5thj9sim662o-pexels-igor-ovsyannykov-205961.jpg"
            }
          ]
        },
        {
          "title": "The best way to crack an egg",
          "text": "Everyone has their own way to crack an egg. Maybe they learnt it from a parent or from watching cooking videos. The truth is there is no \"best\" way. Practice makes perfect. Start with the back of a knife or fork and try not to get any shell pieces into your egg.",
          "image_position": "Left",
          "image": [
            {
              "url": "https://demo-site-patterns.stream.prepr.io/w_800/11yyf3iocp7d-pexels-klaus-nielsen-6294143.jpg"
            }
          ]
        },
        {
          "title": "Brunch, the most fulfilling way to bring people together",
          "text": "What better way to bring all your loved ones together than by inviting your friends and family over for brunch with homemade breads, pastries and quiches. No need to go overboard with preparations. Brunch is so much easier to prepare than dinner and you don't have to fuss too much about preferences by having both sweet and savory treats at hand.",
          "image_position": "Right",
          "image": [
            {
              "url": "https://demo-site-patterns.stream.prepr.io/w_800/1k9uvcbql61a-pexels-monica-silvestre-803897.jpg"
            }
          ]
        },
        {},
        {},
        {}
      ]
    }
  }
}

Fetch content by customer

If customers are maintained in Prepr, personalized 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.

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.

See an example query 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 ALL OTHER USERS 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"
                }
            ]
        }
    }
}

{
    "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"
                }
            ]
        }
    }
}

Note

  • 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 segment and a country parameter has a higher priority over the segment or country parameters alone.

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.

Tip

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 Id's, then you’ll get personalized 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
 }
   }
}
{
    "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"
                }
            ]
        }
    }
}

{
    "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"
                }
            ]
        }
    }
}

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

{
"data": {
  "Page": {
    "_slug": "home-page",
    "stack": [
      {
        "_context": {
          "kind": "PERSONALIZATION",
          "segments": null,
          "group_id": "0fe39800-9a74-42fb-af02-1b6efb6124e8",
          "countries": null,
          "variant_id": "ALL_OTHER_USERS"
        },
        "heading": "Welcome to our baking community",
        "text": "Learn some basic steps to get started or kick your skills up a notch with our handy tips, recipes and products.",
        "image": [
          {
            "url": "https://demo-site-patterns.stream.prepr.io/w_1600/5thj9sim662o-pexels-igor-ovsyannykov-205961.jpg"
          }
        ]
      },
      {
        "_context": {
          "kind": "PERSONALIZATION",
          "segments": [
            "b992c776-1f5f-4ee9-9eb7-4df0a412182e",
            "beginner-bakers"
          ],
          "group_id": "0fe39800-9a74-42fb-af02-1b6efb6124e8",
          "countries": null,
          "variant_id": "BEGINNER-BAKERS"
        },
        "heading": "Welcome beginner baker!",
        "text": "Get started with our easy to follow recipes, our basic kitchen tips and kitchen gadgets that every beginner needs.",
        "image": [
          {
            "url": "https://demo-site-patterns.stream.prepr.io/w_1600/30y3uh60wd5a-pexels-olia-danilevich-5471928.jpg"
          }
        ]
      },
      {
        "_context": {
          "kind": "PERSONALIZATION",
          "segments": [
            "41ba4617-8b62-4504-9ec1-8fbbef95b9bc",
            "pro-bakers"
          ],
          "group_id": "0fe39800-9a74-42fb-af02-1b6efb6124e8",
          "countries": null,
          "variant_id": "PRO-BAKERS"
        },
        "heading": "Welcome chef!",
        "text": "Kick it up a notch with our advanced workshops and get the latest state of the art kitchen equipment.",
        "image": [
          {
            "url": "https://demo-site-patterns.stream.prepr.io/w_1600/wvg5jx38xbn-pexels-elevate-1267320.jpg"
          }
        ]
      },
      {
        "title": "The best way to crack an egg",
        "text": "Everyone has their own way to crack an egg. Maybe they learnt it from a parent or from watching cooking videos. The truth is there is no \"best\" way. Practice makes perfect. Start with the back of a knife or fork and try not to get any shell pieces into your egg.",
        "image_position": "Left",
        "image": [
          {
            "url": "https://demo-site-patterns.stream.prepr.io/w_800/11yyf3iocp7d-pexels-klaus-nielsen-6294143.jpg"
          }
        ]
      },
      {
        "title": "Brunch, the most fulfilling way to bring people together",
        "text": "What better way to bring all your loved ones together than by inviting your friends and family over for brunch with homemade breads, pastries and quiches. No need to go overboard with preparations. Brunch is so much easier to prepare than dinner and you don't have to fuss too much about preferences by having both sweet and savory treats at hand.",
        "image_position": "Right",
        "image": [
          {
            "url": "https://demo-site-patterns.stream.prepr.io/w_800/1k9uvcbql61a-pexels-monica-silvestre-803897.jpg"
          }
        ]
      },
      {},
      {},
      {},
      {},
      {}
    ]
  }
}
}