Svelte Split Testing

Split tests (or A/B tests) allow you to display different features or variants to test their effectiveness. Unfortunately popular options are very pricey, bloated, and don't work SSR. This package attempts to remedy all of that.

This package works with Svelte and SvelteKit.

Uses Google Tag Manager by default to keep track of your analytics, but this can be replaced with other methods.

GitHub

Demo

What you are doing with your split tests is completely up to you of course. These examples show some basics of how it all works, but the sky is the limit.

You are currently being shown split test Variant B

Split tests are randomized based on a cookie or a given user identifier. You can override this by adding ?force-split-test=[Variant name] to the url. This is only meant for debugging.

Note: Forcing the variant doesn't work SSR, if you're viewing this page without Javascript you might not see a difference. Regular split tests do work during SSR.

You can include as many variants as you like.

Set up

Install using Yarn or NPM.

The component isn't quite plug-and-play, we will need to set up some details.

SvelteKit

When using SvelteKit we need to make sure the same identifier is set on the server as is set on the client.

In your (main) +layout.server.js load function import and set the identifier and pass it along.

import { serverGetSplitTestingIdentifier } from 'svelte-split-testing/splitTesting'

/** @type {import('./$types').LayoutServerLoad} */
export async function load({ cookies }) {
  const splitTestingIdentifier = serverGetSplitTestingIdentifier(cookies)

  return {
    splitTestingIdentifier,
  }
}

Important here is that you pass along the SSR cookies object.

Next, in your (main) +layout.js load function pass the identifier along again. We don't actually need to do anything with it just yet.

export async function load({ data }) {
  const { splitTestingIdentifier } = data || {}

  return {
    splitTestingIdentifier,
  }
}

This is a bit verbose, but this is assuming you have other stuff going on in the file as well. If you don't, you could simply pass it as return { ...data }.

Next, in your (main) +layout.svelte set the identifier using the Context API. Make sure to use the correct key.

<script>
  import { clientGetSplitTestingIdentifier } from 'svelte-split-testing/splitTesting'
  import { setContext } from 'svelte'

  export let data

  setContext('splitTestingIdentifier', data?.splitTestingIdentifier)
</script>

<slot />

And that's the basic set up for SvelteKit. Next up will we go in to usage.

Svelte (without Kit)

For Svelte (without Kit) we do not yet need any set up. There might be some set up depending on your needs, but we will get to that in the Usage section.

Usage