search

mint-metrics / mojito-js-delivery

🧪 Source-controlled JS split testing framework for building and launching A/B tests.
https://mojito.mx/docs/js-delivery-intro
Other
16 stars 29 forks source link

Utilities to scope test CSS to the experiment / treatments only #23

Open kingo55 opened 4 years ago

kingo55 commented 4 years ago

Something I've noticed larger organisations doing is scoping their tests' CSS down to particular variants or tests.

For example, given a test with ID w123 we might apply the classes to the page like so:

<body class="w123 w123-treatment">

And then CSS classes can be written like:

.w123-treatment a.btn {
  display: none;
}

This ensures we can lock any events or CSS down to experiments / treatments. It's especially useful in the case where we might have some shared CSS that is injected into the control but it's not strictly needed.

Thoughts on this approach?

dapperdrop commented 4 years ago

I think that's a sane approach.

Your example with applying the experiment id as a class to the <body> element is something else we should think about.

E.g. it could be a good way to signpost on the markup level if a test is running.

<body class="w123-staging ..."> .w123-live-{{sampleRate}} .w123-divert-{{recipe}} etc

allmywant commented 4 years ago

@kingo55 Good idea, so we just need to add the test id and {test id}-{name of chosen recipe} classes to the body tag, right? Also, I agree with @dapperdrop , using the {test id}-{test state} might be more useful.