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

More Decks by Saaheel Majethia

Other Decks in Programming


  1. 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?
  2. What do we get doing A/B experiment? • Improve content

    • Increased Sales & Revenue • Improve user Engagement • Analyse Customer behavior • Acceptance of App by customer
  3. 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
  4. 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
  5. 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
  6. 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>
  7. 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>
  8. 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
  9. 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
  10. 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