How I implemented my First A/B
experiment in REACT
● Engineer at Shaadi.com
● Follow me @saaheelm
3Ws of A/B experiment
1. What is A/B experiment?
2. Why to do A/B experiment?
3. What we get by doing A/B experiment?
What is A/B experiment?
Why to do A/B experiment?
User A Cart User B Cart
What do we get doing A/B experiment?
● Improve content
● Increased Sales & Revenue
● Improve user Engagement
● Analyse Customer behavior
● Acceptance of App by customer
Traditional Approaches for A/B experiment
● Decide the buckets on server side and render respective
● Writing multiple if...else condition for experiments
● Modifying multiple ﬁles to implement the experiments
● Keep track of ﬁles and clean up once experiments are
Pros & Cons of Traditional Approach
● Server side computation
● Simple and dumb code writing
● Modify multiple ﬁles with multiple
● Less readability and accessibility
● Diﬃcult to maintain the code
● Need to plan Clean up activity
A/B experiment in REACT?
REACT being Front end you can do A/B on:-
● Simple elements like button, icons, input ﬁelds, etc
● Complete Component
● Action based on experiments
● Tracking of user action and views
● react-ab : https://github.com/olahol/react-ab
A A/B testing component for React
A vertically integrated React component
Initial Research (cont...)
● react-ab-experiment : https://www.npmjs.com/package/react-ab-experiment
Problems & Thought on Solutions
Drawbacks what I felt initially:-
● Having single file to do Variant experiment and mostly
Components level experiments possible
● No idea how to do A/B on Actions and/or with individual
Problems & Thought on Solutions (cont..)
Few things I considered when I planned to do
A/B experiment on REACT
● No duplication of code
● Cleaner code base
● High level of readability and accessibility of components
● Easy code clean up provision
Approaches I took to do AB experiment
● Fetch value for A/B experiment bucket from server once on
App launch and save in Redux which can be used in
● Create separate Variant components and render
components dynamically based on props.
● Minimal use of if...else when needed
Contact me - [email protected]
Follow me - @saaheelm