How to Integrate AB Tasty with Your Headless CMS

What is AB Tasty?

AB Tasty is a digital experience experimentation and personalization platform for web, mobile, and feature experimentation. Teams use it to run A/B tests, target audiences, roll out feature flags, and measure conversion impact without hardcoding every variant into an application. It sits in the personalization and experimentation market alongside tools such as Optimizely, VWO, and Dynamic Yield.

Why integrate AB Tasty with a headless CMS?

Experimentation gets messy when content lives in one place and test configuration lives somewhere else. A marketer edits homepage hero copy, a developer copies that text into AB Tasty, someone else updates the mobile app, and QA has to confirm three versions before a test can launch. That process works for one test. It breaks down when you're running 20 active experiments across locales, segments, and channels.

Connecting AB Tasty to a headless CMS category tool gives experiment teams a cleaner workflow. Content teams can define the copy, images, calls to action, legal text, and locale-specific variants in one structured model. AB Tasty can handle targeting, bucketing, feature flags, and measurement. With Sanity's AI Content Operating System, structured content in the Content Lake can be selected with GROQ, sent through webhooks or Functions the moment it changes, and used by AB Tasty without scraping rendered HTML or copying page blocks by hand.

The trade-off is that AB Tasty shouldn't become your long-form content source. For most teams, the better pattern is to sync small decisioning payloads, such as variant keys, labels, short copy, or content IDs, and let your frontend fetch full content from Sanity. That keeps AB Tasty focused on experimentation and keeps Sanity as the structured back end for web, mobile, AI agents, and any other channel.

Architecture overview

A typical setup starts with an experiment document in Sanity Studio. The schema includes fields such as AB Tasty campaign ID, variation keys, audience labels, headlines, CTA text, image references, locale, start date, end date, and publish status. When an editor publishes or updates that document, a Sanity webhook filtered with GROQ fires only for relevant experiment documents, for example documents where the AB Tasty campaign ID is defined. The webhook triggers a Sanity Function or your own serverless endpoint. That handler receives the mutation event, uses @sanity/client to fetch the current experiment payload from the Content Lake with a GROQ projection, and formats the result into the smaller shape AB Tasty needs. The Function then calls AB Tasty's account API with a bearer token to update campaign variation metadata, variation payloads, or a content-ID mapping used by the AB Tasty Web Experimentation tag or Feature Experimentation SDK. At runtime, AB Tasty assigns a visitor to a variation through its web tag or Feature Experimentation SDK, which is published under the Flagship package name for server-side and client-side feature experimentation. Your frontend reads the assigned variation key, renders the matching Sanity content, and sends exposure or conversion events back to AB Tasty. The end user sees the personalized experience, while editors keep changing structured content in Sanity Studio.

Common use cases

Step-by-step integration

1. 1

   Set up AB Tasty access

   Create or choose your AB Tasty account, account ID, campaign, and environment. Install the AB Tasty Web Experimentation tag for browser-based tests, or install the Feature Experimentation SDK package, @flagship.io/js-sdk, when your application needs flag-based decisions. Create an API token for account-level API calls, and keep it in server-side environment variables.

2. 2

   Model experiment content in Sanity Studio

   Create a schema for experiment content. Common fields include title, slug, AB Tasty campaign ID, variation key, audience key, headline, CTA label, image, locale, start date, end date, and status. Keep large rich text, image metadata, and translated content in Sanity, and sync only what AB Tasty needs for decisioning or display.

3. 3

   Create a GROQ-filtered trigger

   Create a Sanity webhook or Function trigger that fires on publish, update, and delete events for experiment documents. A filter such as _type == 'experiment' && defined(abTasty.campaignId) prevents unrelated content changes from calling AB Tasty.

4. 4

   Sync content through a Function or middleware

   In the handler, verify the webhook request, fetch the latest document from the Content Lake with @sanity/client, transform it into AB Tasty's expected campaign or variation payload, and call AB Tasty's API with your token. Use a retry policy for 429 and 5xx responses, and log the Sanity document ID with the AB Tasty campaign ID.

5. 5

   Connect the frontend experience

   Initialize the AB Tasty tag or @flagship.io/js-sdk in your web app. Read the assigned campaign variation or flag value, query Sanity for the matching content by variation key or content ID, render the result, and send exposure and conversion events back to AB Tasty.

6. 6

   Test before launch

   Use AB Tasty QA mode or preview links to force each variation. Confirm that Sanity preview content, published content, AB Tasty assignment, and analytics events all line up before routing production traffic into the experiment.

Code example

A minimal Sanity Function-style webhook handler that receives a publish event, fetches the current experiment document with GROQ, and sends the mapped variation payload to AB Tasty's account API. AB Tasty account API paths can vary by product and contract, so confirm the endpoint path in your AB Tasty workspace.

import { createClient } from '@sanity/client';

const sanity = createClient({
  projectId: process.env.SANITY_PROJECT_ID!,
  dataset: process.env.SANITY_DATASET!,
  apiVersion: '2025-01-01',
  token: process.env.SANITY_READ_TOKEN!,
  useCdn: false
});

export default async function handler(req: Request) {
  const event = await req.json();
  const id = event.documentId || event.ids?.updated?.[0];

  const experiment = await sanity.fetch(`
    *[_id == $id][0]{
      title,
      "campaignId": abTasty.campaignId,
      variants[]{key, headline, ctaLabel, "imageUrl": image.asset->url}
    }
  `, { id });

  if (!experiment?.campaignId) return new Response('No AB Tasty campaign');

  const res = await fetch(
    `https://api.abtasty.com/api/v1/accounts/${process.env.ABTASTY_ACCOUNT_ID}/campaigns/${experiment.campaignId}/modifications`,
    {
      method: 'PUT',
      headers: {
        Authorization: `Bearer ${process.env.ABTASTY_API_TOKEN}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        source: 'sanity',
        variations: experiment.variants.map((v: any) => ({
          key: v.key,
          payload: { headline: v.headline, ctaLabel: v.ctaLabel, imageUrl: v.imageUrl }
        }))
      })
    }
  );

  if (!res.ok) throw new Error(`AB Tasty sync failed: ${res.status}`);
  return new Response('Synced to AB Tasty');
}

How Sanity + AB Tasty works

CMS approaches to AB Tasty

Keep building

Explore related integrations to complete your content stack.