Experiment Tracking Tool (A/B Testing)
npm install decentraland-experimentsš Experiment Tracking Tool (A/B Testing)
- Installation
- Usage
- Vanilla JS
- React
- React+Context
- Testing
``bash`
npm install -s decentraland-experiments
Instantiate all experiments
`typescript
import { Experiments, Experiment, Variant } from 'decentraland-experiments';
const experiments = new Experiments({ avatar_signup_test: ... }, localStorage, analytics)
`
Retrieve and use the test value
`typescriptavatar_signup_test
// if there are any test for it will be activate`
const value = experiments.getCurrentValueFor('avatar_signup_test', 'Sing Up')
Track segments events
`typescript`
analytics.track(SIGNUP_EVENT)
Instantiate all experiments
`typescript
import { Experiments, Experiment, Variant } from 'decentraland-experiments';
const experiments = new Experiments({ avatar_signup_test: ... }, localStorage, analytics)
`
Retrieve and use the test value
`jsx
import { experiments } from 'path/to/experiments'
export default class SignUpButton extends React.PureComponent
render() {
const text = experiments.getCurrentValueFor('avatar_signup_test', 'avatars.form.signup')
}
}
`
Track segments events
`jsx
import { experiments } from 'path/to/experiments'
export default class SignUpButton extends React.PureComponent
handleClick = (event: React.MouseEvent
// ...
analytics.track(SIGNUP_EVENT)
}
render() {
const text = experiments.getCurrentValueFor('avatar_signup_test', 'avatars.form.signup')
}
}
`
Create the new Context without experiments
`typescript
import { Experiments } from 'decentraland-experiments'
const ExperimentsContext = React.createContext(new Experiments({}))
`
Instantiate all experiments
`typescript
import { Experiments, Experiment, Variant } from 'decentraland-experiments';
const experiments = new Experiments({ avatar_signup_test: ... }, localStorage, analytics)
`
Add Context.Provider to initial render and set the experiments instance as value property
`jsx
import ExperimentsContext from 'path/to/context'
ReactDOM.render(
{/ ... /}
document.getElementById('root')
)
`
Add Context to the testing element and retrieve the test value
`jsx
import ExperimentsContext from 'path/to/context';
export default class SignUpButton extends React.PureComponent
static contextType = ExperimentsContext
render() {
const text = this.context.getCurrentValueFor('avatar_signup_test', 'avatars.form.signup')
}
}
`
Track segments events
`jsx
import ExperimentsContext from 'path/to/context';
export default class SignUpButton extends React.PureComponent
handleClick = (event: React.MouseEvent
// ...
analytics.track(SIGNUP_EVENT)
}
render() {
const text = this.context.getCurrentValueFor('avatar_signup_test', 'avatars.form.signup')
}
}
`
Retrieve all values and ensure its types
`typescript
import { experiments } from 'path/to/experiments'
test(all experiment value for avatar_signup_test are not empty strings, () => {``
for (const value of experiments.getAllValuesFor('avatar_signup_test')) {
expect(typeof value).toBe('string')
expect(value.length).toBeGreaterThanOrEqual(5)
}
})