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: "home-page") {
      _slug
      stack {
        ... on PageHeader {
          heading
          text
          cta_label
          _context {
            kind
            group_id
            variant_id
          }
        }
        ... on ImageAndText {
          title
          text
          image_position
          }
      }
  }
}
 

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