3 files changed, 35 insertions, 0 deletions
diff --git a/app/assets/javascripts/experimentation/components/experiment.vue b/app/assets/javascripts/experimentation/components/experiment.vue
new file mode 100644
index 00000000000..294dbf77991
--- /dev/null
+++ b/app/assets/javascripts/experimentation/components/experiment.vue
@@ -0,0 +1,15 @@
+<script>
+import { getExperimentVariant } from '../utils';
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  render() {
+    return this.$slots?.[getExperimentVariant(this.name)];
+  },
+};
+</script>
diff --git a/app/assets/javascripts/experimentation/constants.js b/app/assets/javascripts/experimentation/constants.js
index b7e61d43b11..76e8fdb684b 100644
--- a/app/assets/javascripts/experimentation/constants.js
+++ b/app/assets/javascripts/experimentation/constants.js
@@ -1 +1,3 @@
 export const TRACKING_CONTEXT_SCHEMA = 'iglu:com.gitlab/gitlab_experiment/jsonschema/1-0-0';
+export const DEFAULT_VARIANT = 'control';
+export const CANDIDATE_VARIANT = 'candidate';
diff --git a/app/assets/javascripts/experimentation/utils.js b/app/assets/javascripts/experimentation/utils.js
index d3e7800f643..572907f226d 100644
--- a/app/assets/javascripts/experimentation/utils.js
+++ b/app/assets/javascripts/experimentation/utils.js
@@ -1,5 +1,6 @@
 // This file only applies to use of experiments through https://gitlab.com/gitlab-org/gitlab-experiment
 import { get } from 'lodash';
+import { DEFAULT_VARIANT, CANDIDATE_VARIANT } from './constants';
 
 export function getExperimentData(experimentName) {
   return get(window, ['gon', 'experiment', experimentName]);
@@ -8,3 +9,20 @@ export function getExperimentData(experimentName) {
 export function isExperimentVariant(experimentName, variantName) {
   return getExperimentData(experimentName)?.variant === variantName;
 }
+
+export function getExperimentVariant(experimentName) {
+  return getExperimentData(experimentName)?.variant || DEFAULT_VARIANT;
+}
+
+export function experiment(experimentName, variants) {
+  const variant = getExperimentVariant(experimentName);
+
+  switch (variant) {
+    case DEFAULT_VARIANT:
+      return variants.use.call();
+    case CANDIDATE_VARIANT:
+      return variants.try.call();
+    default:
+      return variants[variant].call();
+  }
+}