Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How I implemented my First AB experiment in REACT?

How I implemented my First AB experiment in REACT?


Saaheel Majethia

May 08, 2018


  1. How I implemented my First A/B experiment in REACT Saaheel

  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

  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