positioning the debugger

[VinSpee]

Hi!

I really love what you guys are doing with this tool. I'd love to see something similar to the customizability of gaearon/redux-devtools-dock-monitor. Initially, something like toggling visibility with a shortcut and moving the panel around, later on possible something like theming.

Would you be open to a PR around this type of feature?

[wehriam]

Thanks!

Absolutely open to a PR. The modules are designed to be reasonably extensible, so if it turns out that you want an external module for a more sophisticated debugger I'm happy to contribute to that project as well.

Can you describe what you mean by "toggling visibility with a shortcut" in more depth?

[wehriam]

Also, I'm very interested in feature requests. Please don't hesitate to ask if there's something you'd like to see.

[VinSpee]

@wehriam re: visibility toggling:

visit this page:

http://erikras.github.io/redux-form/#/examples

and press Ctrl-h then, try pressing Ctrl-q a few times.

I'm also interested in creating a middleware that can be used with redux - I have a crude one implemented now that basically fires an action on SHOW_EXPERIMENT and WIN_EXPERIMENT, which then fires some omniture-specific code that we use for tracking. That way, rather than using:

emitter.addPlayListener(function(experimentName, variantName){
  mixpanel.track("Start Experiment", {name: experimentName, variant: variantName});
});

you would just do something like this:

emitter.addPlayListener((experimentName, variantName) => {
  dispatch(startExperiement({name: experimentName, variant: variantName});
});

that way, you can handle all of your analytics outside of the component, which is a pattern we're following already and has really cleaned up our components.

We will be using this lib heavily over the next few months, and on highly trafficked pages - I'll be sure to let you know how it goes and if we see a need for anything!

Thanks again!

[wehriam]

Great. I've created two enhancement request issues:

• User can reposition the debugger
• User can hide the debugger with a keyboard shortcut

Please feel free to suggest implementation changes, but wanted to get the threads in place. If you start working on one or both please let me know, until then they'll be in my development queue.

[wehriam]

you can handle all of your analytics outside of the component

Keep in mind the emitter is a singleton used by the components to coordinate, and which can be imported elsewhere. With that said, I see the benefits of routing play/win events as Redux actions and don't think it will be difficult to implement.

[VinSpee]

in that case, is the emitter for orchestrating "if this test wins, then show this test" kind of behavior?

[wehriam]

The emitter was largely designed to coordinate tests, for example if you had header and subheader components in the same experiment with corresponding variants, but in different parts of the page. You can see this in action in the Coordinate Multiple Components usage section or on JSFiddle

While I am unaware of a use case for the "if this test wins, then show this test" behavior, you could do something like:

emitter.defineVariants("Experiment Step 1", ["A", "B", "C"]);
emitter.defineVariants("Experiment Step 2", ["1", "2", "3"]);
emitter.addWinListener("Experiment Step 1", function(experimentName, variantName){
  if(variantName === "B") {
    emitter.setActiveVariant("Experiment Step 2", "2");
  } 
});

As long as no "Experiment Step 2" components had mounted when the callback is executed (and thus already have an active variant), variant "2" of "Experiment Step 2" will be displayed.

[wehriam]

As a side note, emitter may no longer the best name as it also can be used to set active variants, etc.

[pke]

Just stumbled over this component after trying react-ab which does not give me programmatic access to the current variant of an experiment (to choose different styles and code paths for instance).

I also like the experiment debugger and would like to integrate it into redux-devtools. I will check how that would be possible. Should be pretty straight-forward. That would probably a separate project though.