Skip to content

Commit

Permalink
feat(Experiments): Create New web experiment from dotcom UI (#26009)
Browse files Browse the repository at this point in the history
Create Web Experiment from the New Experiment page.

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Juraj Majerik <[email protected]>
Co-authored-by: Ross <[email protected]>
  • Loading branch information
4 people authored Nov 7, 2024
1 parent 3e79b33 commit c393da5
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 3 deletions.
47 changes: 45 additions & 2 deletions frontend/src/scenes/experiments/ExperimentForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { LemonRadio } from 'lib/lemon-ui/LemonRadio'
import { LemonSelect } from 'lib/lemon-ui/LemonSelect'
import { capitalizeFirstLetter } from 'lib/utils'
import { useEffect } from 'react'
import { experimentsLogic } from 'scenes/experiments/experimentsLogic'
import { insightDataLogic } from 'scenes/insights/insightDataLogic'
import { insightLogic } from 'scenes/insights/insightLogic'

Expand All @@ -25,8 +26,9 @@ import { ExperimentInsightCreator } from './MetricSelector'

const StepInfo = (): JSX.Element => {
const { experiment, featureFlags } = useValues(experimentLogic)
const { addExperimentGroup, removeExperimentGroup, moveToNextFormStep } = useActions(experimentLogic)

const { addExperimentGroup, removeExperimentGroup, moveToNextFormStep, setExperimentType } =
useActions(experimentLogic)
const { webExperimentsAvailable } = useValues(experimentsLogic)
return (
<div>
<div className="space-y-8">
Expand All @@ -48,6 +50,47 @@ const StepInfo = (): JSX.Element => {
/>
</LemonField>
</div>
{webExperimentsAvailable && (
<div className="mt-10">
<h3 className="mb-1">Experiment type</h3>
<div className="text-xs text-muted font-medium tracking-normal">
Select your experiment setup, this cannot be changed once saved.
</div>
<LemonDivider />
<LemonRadio
value={experiment.type}
className="space-y-2 -mt-2"
onChange={(type) => {
setExperimentType(type)
}}
options={[
{
value: 'product',
label: (
<div className="translate-y-2">
<div>Product experiment</div>
<div className="text-xs text-muted">
Use custom code to manage how variants modify your product.
</div>
</div>
),
},
{
value: 'web',
label: (
<div className="translate-y-2">
<div>No-code web experiment</div>
<div className="text-xs text-muted">
Define variants on your website using the PostHog toolbar, no coding
required.
</div>
</div>
),
},
]}
/>
</div>
)}
<div className="mt-10">
<h3 className="mb-1">Variants</h3>
<div className="text-xs text-muted">Add up to 9 variants to test against your control.</div>
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/scenes/experiments/experimentLogic.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ import { getMinimumDetectableEffect, transformFiltersForWinningVariant } from '.
const NEW_EXPERIMENT: Experiment = {
id: 'new',
name: '',
type: 'product',
feature_flag_key: '',
filters: {},
metrics: [],
Expand Down Expand Up @@ -159,6 +160,7 @@ export const experimentLogic = kea<experimentLogicType>([
setExperiment: (experiment: Partial<Experiment>) => ({ experiment }),
createExperiment: (draft?: boolean) => ({ draft }),
setNewExperimentInsight: (filters?: Partial<FilterType>) => ({ filters }),
setExperimentType: (type?: string) => ({ type }),
setExperimentExposureInsight: (filters?: Partial<FilterType>) => ({ filters }),
removeExperimentGroup: (idx: number) => ({ idx }),
setEditExperiment: (editing: boolean) => ({ editing }),
Expand Down Expand Up @@ -422,6 +424,9 @@ export const experimentLogic = kea<experimentLogicType>([
})
}
},
setExperimentType: async ({ type }) => {
actions.setExperiment({ type: type })
},
setNewExperimentInsight: async ({ filters }) => {
let newInsightFilters
const aggregationGroupTypeIndex = values.experiment.parameters?.aggregation_group_type_index
Expand Down
7 changes: 6 additions & 1 deletion frontend/src/scenes/experiments/experimentsLogic.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ import Fuse from 'fuse.js'
import { actions, connect, events, kea, path, reducers, selectors } from 'kea'
import { loaders } from 'kea-loaders'
import api from 'lib/api'
import { FEATURE_FLAGS } from 'lib/constants'
import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { featureFlagLogic, FeatureFlagsSet } from 'lib/logic/featureFlagLogic'
import { teamLogic } from 'scenes/teamLogic'
import { userLogic } from 'scenes/userLogic'

Expand Down Expand Up @@ -142,6 +143,10 @@ export const experimentsLogic = kea<experimentsLogicType>([
return experiments.length === 0 && !experimentsLoading && !values.searchTerm && !values.searchStatus
},
],
webExperimentsAvailable: [
() => [featureFlagLogic.selectors.featureFlags],
(featureFlags: FeatureFlagsSet) => featureFlags[FEATURE_FLAGS.WEB_EXPERIMENTS],
],
})),
events(({ actions }) => ({
afterMount: () => {
Expand Down

0 comments on commit c393da5

Please sign in to comment.