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.
REQUEST
# Add a HTTP-header `Prepr-Customer-Id` with
# the Customer ID or Reference ID.
query {
Page (slug: "electric-lease") {
_id
title
_slug
content {
__typename
... on Hero {
_id
heading
sub_heading
buttons {
button_type
text
}
_context {
kind
variant_id
variant_key
}
}
}
}
}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.
REQUEST
query {
Page (slug: "electric-lease") {
_id
title
_slug
content (personalize: false) {
__typename
... on Hero {
_id
heading
sub_heading
buttons {
button_type
text
}
_context {
kind
variant_id
variant_key
}
}
}
}
}