A/B testing data models

[steve]

You can A/B test any type of content in Builder, including data models. A good use case for A/B testing with data models is for content not managed in Builder.io’s Visual Editor, but you still want to run an A/B test on.

To do this, first create a data model in Builder. For example, maybe you want to make a data model just for a “buy button CTA” test. So you can make this model and give it one custom field for the text (e.g. name "text’ and type “text”).

To do this, go to builder.io/models and create a new data model

Then give it a name, e.g. “buy-button-cta”

And add one custom field called “text” of type “text”

Then, editors can make new “buy button CTA” entries, e.g. to run an A/B test or to use targeting and scheduling to test personalizing this data.

Then, to use it in your app, you can use the JS SDK to fetch this data. The SDK will automatically handle finding the best CTA match (based on targeting and scheduling) as well as the correct A/B test (based on A/B test percentages and a cookie set to ensure once in a test group the same visitor remains in this group) and cache this response so the content is not re-fetched if you access this text in multiple places in your app during a visit.

For instance

import { builder } from '@builder.io/sdk';

builder.init(YOUR_API_KEY);

// Optional custom targeting
builder.setUserAttributes({
  userIsLoggedIn: true,
  whateverKey: 'whatever value',
});

builder
  .get('buy-button-cta'
  .promise()
  .then(content => {
      // Track an impression of this test group content
      builder.trackImpression(content.id, content.testVariationId)
      alert(`The buy CTA is ${content.data.text}!`)

      // Optionally, track this to other analytics providers
      amplitude.track('builderImpression', {.  
         contentId: content.id,
         contentName: content.name,
         testVariationId: content.testVariationId,
         testVariationName: content.testVariationName
      })
  });

Next, make sure you have setup conversion tracking to use conversion data to find winning test groups.

// E.g. when a purchase occurs for $99.99
builder.trackConversion(99.99);

And to get engagement data, you can also use builder.trackEngagement, e.g.

  <button
    onClick={() => {
      builder.trackInteraction(content.id, content.testVariationId);
    }}
  >
    {ctaText}
  </button>

If you use our React SDK, you can simply this a bit by doing the below, which automatically pulls the right data and tracks impressions and interactions:

import { BuilderContent } from '@builder.io/react'

export function MyComponent() {
  return (
    <BuilderContent modelName="buy-button-cta">
      {(variant, loading, content) =>
        variant ? (
          <button>{variant.ctaText}</button>
        ) : (
          <Spinner />
        )
      }
    </BuilderContent>
  );
}