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.
 
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.

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