A/B Test with SvelteKit - Client side & server side

[RykGitProjects]

Hi!

I am working on A/B testing my site. Found solution to make it client side

Code below seems to work (haven't tested yet on production).

I have a couple of questions:
1)What do you think about this solution ?

2)How to make it server-side?
It would be great to have the test server side (managed by +page.server.js in which I am connecting to database data), I don't know how to handle user so that specific user has specific version for whole experience with page, even if he exits it and revisit in some time. For client-side it's preety easy - just use cookie with some expiriation date. But on server side I do not have cookies

import { browser } from '$app/environment';
import { GA4 } from '../../measurement/GA4.svelte'

const nameOfCookiesaTest='krs_raportHistoryczny'; // info about test - name of test
let testVersion='0'; // version - '1','2','3','4'
const testLengthDays=30; // number of days for testing

function setCookie(cname, cvalue, exdays) {
        const d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        let expires = "expires="+ d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(name) {
    //Function from: https://stackoverflow.com/questions/5639346/what-is-the-shortest-function-for-reading-a-cookie-by-name-in-javascript
return document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || ''
}

function randTestVariant(numberOfVersions) {
    return (Math.floor(Math.random() * numberOfVersions) + 1).toString()
}

//Test if browser
if (browser) {
    let cookieValue=getCookie(nameOfCookiesaTest)
    //Test if cookie exists
    if (cookieValue=="") {
        //If it does not exist (=="") then rand value from 1 to X, integers
        testVersion=randTestVariant(2)
        //And create a cookies with this value
        setCookie(nameOfCookiesaTest, testVersion, testLengthDays)
    } else {
        //If cookie exists - just read it's value
        testVersion=cookieValue
    }
//Send information to your analytics tool to get information which version user received
    GA4(nameOfCookiesaTest, testVersion)
}

</script>

<!-- Test if it has not yet get proper test Version. Then put something general (part which is the same between versions) or spinner
This way there won't be flicker effect
This version (plug) will be visible for users without js. So it should have some information - for example for SEO.
-->
{#if testVersion==='0' | typeof testVersion === "undefined" | testVersion===null}

Plug, so there will not be flicker effect :)

{:else if testVersion==='1'}
Test version 1
{:else if testVersion==='2'}
Test version 2
<!-- It can have more variants. If it is so change number in function randTestVariant(X) to match number of variants you want -->
{/if}

[jhwheeler]

This is a little late to the discussion, but my colleague @Mitcheljager at my previous company, PlayPilot, developed this split testing library for Svelte: https://github.com/Playpilot/svelte-split-testing