Fetching an A/B test
A/B test your content, check out the A/B testing guide for a quick introduction.
How to fetch a variant
An A/B test variant is set up for any item or component in a Stack. Prepr automatically links an A or B variant to a particular customer when they visit the web app. To show one of the variants, simply pass the Prepr-Customer-Id in the header of the GraphQL API request.
If you set up your content item, for example, a Page with Stack elements and you activate an A/B test on a specific element in the stack, for example, the Page header, the query will return the appropriate version for that customer. Use the _context system field to set up reporting variables in your front-end.
# Add a HTTP-header `Prepr-Customer-Id` with
# the Customer-ID or Reference Id.
{
Page(slug: "home-page") {
_slug
stack {
... on PageHeader {
heading
text
cta_label
_context {
kind
group_id
variant_id
}
}
... on ImageAndText {
title
text
image_position
}
}
}
}
{
"data": {
"Page": {
"_slug": "home-page",
"stack": [
{
"heading": "20% off on all bread baking courses",
"text": "Join our Spring promotion and save 20% on any baking course.",
"cta_label": "Sign up today!",
"_context": {
"kind": "AB_TEST",
"group_id": "1",
"variant_id": "B"
}
},
{
"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"
},
{
"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"
}
]
}
}
}
Pre-fetching the variant
A/B test your content by pre-fetching both variants for static site rendering.
If you enabled A/B testing on your content model, 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.
{
Page(slug: "home-page") {
_slug
stack(personalize: false) {
... on PageHeader {
heading
text
cta_label
_context {
kind
group_id
variant_id
}
__typename
}
... on ImageAndText {
title
text
image_position
__typename
}
}
}
}
{
"data": {
"Page": {
"_slug": "home-page",
"stack": [
{
"heading": "Bring a friend to any baking course for free",
"text": "Sign up for any baking course in our calendar together with a friend and they can join for free!",
"cta_label": "Sign up now!",
"_context": {
"kind": "AB_TEST",
"group_id": "1",
"variant_id": "A"
},
"__typename": "PageHeader"
},
{
"heading": "20% off on all bread baking courses",
"text": "Join our Spring promotion and save 20% on any baking course.",
"cta_label": "Sign up today!",
"_context": {
"kind": "AB_TEST",
"group_id": "1",
"variant_id": "B"
},
"__typename": "PageHeader"
},
{
"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",
"__typename": "ImageAndText"
},
{
"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",
"__typename": "ImageAndText"
}
]
}
}
}