diff options
Diffstat (limited to 'doc/development/experiment_guide/gitlab_experiment.md')
-rw-r--r-- | doc/development/experiment_guide/gitlab_experiment.md | 75 |
1 files changed, 69 insertions, 6 deletions
diff --git a/doc/development/experiment_guide/gitlab_experiment.md b/doc/development/experiment_guide/gitlab_experiment.md index 6b15449b812..4b93105ea50 100644 --- a/doc/development/experiment_guide/gitlab_experiment.md +++ b/doc/development/experiment_guide/gitlab_experiment.md @@ -17,8 +17,8 @@ You're strongly encouraged to read and understand the [Feature flags in development of GitLab](../feature_flags/index.md) portion of the documentation before considering running experiments. Experiments add additional concepts which may seem confusing or advanced without understanding the underpinnings -of how GitLab uses feature flags in development. One concept: GLEX supports multivariate -experiments, which are sometimes referred to as A/B/n tests. +of how GitLab uses feature flags in development. One concept: GLEX supports +experiments with multiple variants, which are sometimes referred to as A/B/n tests. The [`gitlab-experiment` project](https://gitlab.com/gitlab-org/gitlab-experiment) exists in a separate repository, so it can be shared across any GitLab property that uses @@ -49,7 +49,7 @@ graph TD Running? -->|No| Excluded[Control / No Tracking] Cached? -->|No| Excluded? Cached? -->|Yes| Cached[Cached Value] - Excluded? -->|Yes / Cached| Excluded + Excluded? -->|Yes| Excluded Excluded? -->|No| Segmented? Segmented? -->|Yes / Cached| VariantA Segmented? -->|No| Included?[Experiment Group?] @@ -92,7 +92,7 @@ end ``` When this code executes, the experiment is run, a variant is assigned, and (if within a -controller or view) a `window.gon.experiment.pillColor` object will be available in the +controller or view) a `window.gon.experiment.pill_color` object will be available in the client layer, with details like: - The assigned variant. @@ -367,7 +367,7 @@ about contexts now. We can assume we run the experiment in one or a few places, but track events potentially in many places. The tracking call remains the same, with the arguments you would normally use when -[tracking events using snowplow](../snowplow.md). The easiest example +[tracking events using snowplow](../snowplow/index.md). The easiest example of tracking an event in Ruby would be: ```ruby @@ -501,6 +501,69 @@ Any experiment that's been run in the request lifecycle surfaces in `window.gon. and matches [this schema](https://gitlab.com/gitlab-org/iglu/-/blob/master/public/schemas/com.gitlab/gitlab_experiment/jsonschema/1-0-0) so you can use it when resolving some concepts around experimentation in the client layer. +### Use experiments in Vue + +With the `experiment` component, you can define slots that match the name of the +variants pushed to `window.gon.experiment`. For example, if we alter the `pill_color` +experiment to just use the default variants of `control` and `candidate` like so: + +```ruby +def show + experiment(:pill_color) do |e| + e.use { } # control + e.try { } # candidate + end.run +end +``` + +We can make use of the named slots `control` and `candidate` in the Vue component: + +```vue +<script> +import Experiment from '~/experimentation/components/experiment.vue'; + +export default { + components: { Experiment } +} +</script> + +<template> + <experiment name="pill_color"> + <template #control> + <button class="bg-default">Click default button</button> + </template> + + <template #candidate> + <button class="bg-red">Click red button</button> + </template> + </experiment> +</template> +``` + +When you're coding for an experiment with multiple variants, you can use the variant names. +For example, the Vue component for the previously-defined `pill_color` experiment with `red` and `blue` variants would look like this: + +```vue +<template> + <experiment name="pill_color"> + <template #control> + <button class="bg-default">Click default button</button> + </template> + + <template #red> + <button class="bg-red">Click red button</button> + </template> + + <template #blue> + <button class="bg-blue">Click blue button</button> + </template> + </experiment> +</template> +``` + +NOTE: +When there is no experiment data in the `window.gon.experiment` object for the given experiment name, the `control` slot will be used, if it exists. + ## Notes on feature flags NOTE: @@ -525,7 +588,7 @@ Conditional means that it returns `true` in some situations, but not all situati When a feature flag is disabled (meaning the state is `off`), the experiment is considered _inactive_. You can visualize this in the [decision tree diagram](#how-it-works) -as reaching the first [Running?] node, and traversing the negative path. +as reaching the first `Running?` node, and traversing the negative path. When a feature flag is rolled out to a `percentage_of_actors` or similar (meaning the state is `conditional`) the experiment is considered to be _running_ |