How I implemented my First AB experiment in REACT?

Transcript

1. How I implemented my First A/B experiment in REACT Saaheel Majethia
2. About Me • Engineer at Shaadi.com • Follow me @saaheelm
3. 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?
4. What is A/B experiment? User A User B
5. Why to do A/B experiment? User A Cart User B Cart
6. What do we get doing A/B experiment? • Improve content • Increased Sales & Revenue • Improve user Engagement • Analyse Customer behavior • Acceptance of App by customer
7. Traditional Approaches for A/B experiment • Decide the buckets on server side and render respective view • Writing multiple if...else condition for experiments • Modifying multiple files to implement the experiments • Keep track of files and clean up once experiments are done
8. Pros & Cons of Traditional Approach Pros • Server side computation • Simple and dumb code writing if...else Cons • Modify multiple files with multiple if...else conditions • Less readability and accessibility • Difficult to maintain the code • Need to plan Clean up activity
9. A/B experiment in REACT? REACT being Front end you can do A/B on:- • Simple elements like button, icons, input fields, etc • Complete Component • Action based on experiments • Tracking of user action and views
10. Initial Research • react-ab : https://github.com/olahol/react-ab <div> <Experiment onChoice={this.choice} name="tagline"> <Variant name="normal"> <h1> A A/B testing component for React </h1> </Variant> <Variant name="enterprise"> <h1> A vertically integrated React component </h1> </Variant> </Experiment> </div>
11. Initial Research (cont...) • react-ab-experiment : https://www.npmjs.com/package/react-ab-experiment <Experiment id="abc123" onEnrolment={this.handleEnrolment} cache={LocalStorageCache} <Variant name="1"> <div>Variant 1</div> </Variant> <Variant name="2"> <div>Variant 2</div> </Variant> </Experiment>
12. 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 elements
13. 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
14. 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 complete App • Create separate Variant components and render components dynamically based on props. • Minimal use of if...else when needed
15. Demo https://github.com/saaheel/basic-react-ab-demo
16. References:- • https://en.wikipedia.org/wiki/A/B_testing • https://medium.com/@Carmichaelize/dynamic-tag-names-in-react-and-jsx-17e3 66a684e9 • https://medium.com/airbnb-engineering/experiments-at-airbnb-e2db3abf39e7 • https://github.com/olahol/react-ab • https://www.npmjs.com/package/react-ab-experiment
17. Thank You Contact me - saaheelm@gmail.com Follow me - @saaheelm