By definition, A/B testing compares two versions of an app or webpage to identify the better performer. It’s a method that helps you make decisions based on real data rather than just guessing. It compares options to learn what customers prefer.
In simple words, as the term goes A/B, where A stands for one version of the app/webpage and B stands for another version of the app/webpage. If we are confused about whether the A or B version/component/feature is working at its best for the user, then A/B testing is the perfect thing. Here the testing is based on the number of hits being done by the user(real-user), whether it is A/B. It helps us to figure out with statistical data which one to choose between the two.
So now let’s understand this with an example.
If we want to make decision about whether to put
A: <p> to be green
B: <p> to be red
We can make a ratio, let’s take 1:1. Then according to the testing some users will get A and some B, depending on the greater number of hits on a version based on the statistical data makes one of the versions the winner.
How to implement A/B testing?
For a few days, I was going through blogs and posts on how to implement this.
I have gone through Firebase A/B testing too but I could not use it because I had my testing for Webapp and Firebase does not support A/B testing for web. Before we could use it with remote-config using Optimize tool but it’s being sunsetted now.
Reference: https://groups.google.com/g/firebase-talk/c/PizmSOf1Mv4?pli=1
So I got an awesome tool which helped me to solve the issue with great community support named Statsig.
A/B testing implementation using Statsig
I have used Feature-Flag of Statsig to have A/B testing based on UserID.
In the project, I was using NextJs with TypeScript.
Reference:https://www.statsig.com/
Step 1: We first need to signup/login into Statsig.
Step 2: Create your project.
Step 3: Move to the feature-flag section.
Step 4: Create your own feature-flag which you want to have the versions to be selected.
Step 5: Integrate in your code.
Packages:
yarn add statsig-react
yarn add statsig-node
Change .env variables as mentioned.
Page router is used
/_app.tsx
import { StatsigProvider, StatsigSynchronousProvider } from “statsig-react”;
export default function App({ Component, pageProps }: AppProps) {
//user for statsig, which can dynamically fetched
const user = { userID: “1267” };
return (
{pageProps.initializeValues ? (
<StatsigSynchronousProvider
sdkKey={process.env.NEXT_PUBLIC_STATSIG_CLIENT_KEY!}
initializeValues={pageProps.initializeValues}
user={user}
>
<Component {…pageProps} />
</StatsigSynchronousProvider>
) : (
<StatsigProvider
sdkKey={process.env.NEXT_PUBLIC_STATSIG_CLIENT_KEY!}
waitForInitialization={true}
user={user}
>
<Component {…pageProps} />
</StatsigProvider>
)}
)
/componentName.tsx
export default function ComponentName() {
//name of the gate should be passed which is being made
const { value } = useGate(“feature”);
const discoverTextClass = cn({
“text-green-400”: value,
“text-red-400”: !value,
});
return(
<p className={discoverTextClass}>Hello World</p>
)
}
Explanation
In the above example, we are solving the problem as mentioned in the first part of the blog using Statsig.
A: <p>Hello World </p> to be green [True – flag]
B: <p>Hello World </p> to be red [False – flag]
Note:
There was an issue while using Statsig with Jio Telecom service, as it was blocked by the service, as soon as switched to Airtel it worked perfectly fine. I have mentioned the issue in the community they are working on it, rest of the community support and statsig itself are awesome.
The awesome part is that we can even use it as SSR (server-side-rendering) for optimized feedbacks.
Thank you!! Happy hacking!!
Source: hashnode.com