marvelapp / react-ab-test

A/B testing React components and debug tools. Isomorphic with a simple, universal interface. Well documented and lightweight. Tested in popular browsers and Node.js. Includes helpers for Mixpanel and Segment.com.
MIT License
243 stars 46 forks source link

Example for emitting events without Segment/Mixpanel #31

Open Johannes5 opened 2 years ago

Johannes5 commented 2 years ago

Thank you for releasing this tool for free! I think it's important to have a free alternative to a 30000€/y Optimizely or a Google-owned Google Optimize.

I'd like to send an event (to an analytics tool and/or my db. I'm not using segment/mixpanel) depending on which component won. But I'm not sure how to do that. I'm also unsure as to how I'm able to define "won".

I just want an event that tells me: visitor/user with this ID experienced variant B of that component. The component may have a button CTA inside it, eg if the component is an entire landing page.
That would be a "win" directly associated with the variant. Regardless of that, there are other wins further down the line of the user journey that might be influenced. So it's important to save, whether a Variant has been experienced.

It would be really helpful to see a code example (in the already very helpful Readme) of events being sent without segment/mixpanel. 1) for when a variant mounted 2) for when something in that variant happened.

skrivanos commented 2 years ago

We do this in our global init/setup code. Just implement trackEvent to do whatever you want, such as send a request to your API.

    emitter.addPlayListener((experimentName, variantName) => {
      trackEvent('Experiment Play', {
        experiment: experimentName,
        variant: variantName,
      });
    });

    emitter.addWinListener((experimentName, variantName) => {
      trackEvent('Experiment Win', {
        experiment: experimentName,
        variant: variantName,
      });
    });

Edit:

Oh and, you can simply use the normal emitWin APIs described in README.