Simple A/B testing abstraction used on Sanity.io

route.js

export default {
  name: 'route',
  type: 'document',
  title: 'Route',
  fields: [
    {
      name: 'title',
      type: 'string',
      description: 'This title populates meta-tags on the webpage'
    },
    {
      title: 'Short title',
      name: 'shortTitle',
      type: 'string',
      description: 'May be used for preview cards etc.',
    },
    {
      name: 'description',
      type: 'text',
      description: 'This description populates meta-tags on the webpage'
    },
    {
      name: 'slug',
      type: 'slug',
    },
    {
      name: 'queries',
      type: 'array',
      description: 'Search queries to match',
      of: [
        {
          type: 'string'
        }
      ]
    },
    {
      name: 'campaign',
      type: 'string',
      title: 'Campaign',
      description: 'UTM for campaings'
    },
    {
      name: 'page',
      type: 'reference',
      to: [
        {
          type: 'page'
        }
      ]
    },
    {
      title: 'Open graph',
      name: 'openGraph',
      type: 'openGraph'
    },
    {
      name: 'experiment',
      type: 'object',
      fields: [
        {
          name: 'active',
          type: 'boolean',
          title: 'Experiment',
          description: '(De)activate this as a experiment'
        },
        {
          name: 'id',
          type: 'string',
          title: 'Google Experiment ID'
        },
        {
          name: 'variations',
          type: 'array',
          of: [
            { type: 'variation' }
          ],
          validation: Rule => Rule.custom(value => {
            if (!value) {
              return true
            }
            let sum = 0
            value.forEach(variation => {
              sum += variation.percentage
            })

            return sum > 100 ? 'Total percentage cannot exceed 100%' : true
          })
        }
      ]
    },
    {
      title: 'Include in sitemap',
      description: 'For search engines. Will be generateed to /sitemap.xml',
      name: 'includeInSitemap',
      type: 'boolean',
      fieldset: 'visibility'
    },
    {
      title: 'Disallow in robots.txt',
      description: 'Hide this route for search engines like google',
      name: 'disallowRobots',
      type: 'boolean',
      fieldset: 'visibility'
    },
  ],
  preview: {
    select: {
      title: 'title',
      subtitle: 'slug.current',
      variations: 'experiment.variations'
    },
    prepare({title, subtitle, variations}) {
      return {
        title,
        subtitle: variations && variations.length ? `/${subtitle} (${variations.length} experiments)` : `/${subtitle}`
      }
    }
  }
}

variation.js

export default {
  name: 'variation',
  type: 'object',
  title: 'Variation',
  fields: [
    {
      name: 'variationId',
      type: 'string',
      validation: Rule => Rule.required()
    },
    {
      name: 'percentage',
      type: 'number',
      title: 'Traffic percentange',
      validation: Rule => Rule.required()
    },
    {
      name: 'page',
      type: 'reference',
      to: [
        {
          type: 'page'
        }
      ]
    }
  ],
  preview: {
    select: {
      variationId: 'variationId',
      percentage:  'percentage',
      page: 'page.title'
    },
    prepare({percentage, page, variationId}) {
      return {
        title: `${variationId || 'Missing id'} / ${percentage}%`,
        subtitle: page
      }
    }
  }
}