Skip to content

Commit 72759ed

Browse files
wpscholarwpscholar
authored
Merge pull request #660 from newfold-labs/enhance/ab-test-remove-diy
Remove DIY from Fork
2 parents 5cc28b5 + e83f663 commit 72759ed

File tree

6 files changed

+208
-86
lines changed

6 files changed

+208
-86
lines changed

‎src/OnboardingSPA/components/StartOptions/index.js

Lines changed: 111 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// WordPress
2-
import { memo } from '@wordpress/element';
2+
import { useState, useEffect, memo } from '@wordpress/element';
33
import { useSelect, useDispatch } from '@wordpress/data';
44

55
// Classes and functions
@@ -14,16 +14,32 @@ import { stepTheFork } from '../../steps/TheFork/step';
1414
// Misc
1515
import {
1616
OnboardingEvent,
17+
sendOnboardingEvent,
1718
trackOnboardingEvent,
1819
} from '../../utils/analytics/hiive';
1920
import { SITEGEN_FLOW } from '../../data/flows/constants';
2021
import { store as nfdOnboardingStore } from '../../store';
2122
import { ACTION_SITEGEN_FORK_OPTION_SELECTED } from '../../utils/analytics/hiive/constants';
2223
import OrbAnimation from '../OrbAnimation';
24+
import { pluginDashboardPage } from '../../../constants';
2325

24-
const StartOptions = ( { questionnaire, oldFlow, largeOption, smallOptions } ) => {
26+
const StartOptions = ( {
27+
questionnaire,
28+
oldFlow,
29+
largeOption,
30+
smallOptions,
31+
experimentVersion,
32+
} ) => {
2533
const navigate = useNavigate();
26-
const { brandConfig, hireProUrl, currentData, migrationUrl, canMigrateSite, allSteps } = useSelect( ( select ) => {
34+
const [ forkOptions, setForkOptions ] = useState( [] );
35+
const {
36+
brandConfig,
37+
hireProUrl,
38+
currentData,
39+
migrationUrl,
40+
canMigrateSite,
41+
allSteps,
42+
} = useSelect( ( select ) => {
2743
return {
2844
brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(),
2945
hireProUrl:
@@ -44,6 +60,18 @@ const StartOptions = ( { questionnaire, oldFlow, largeOption, smallOptions } ) =
4460
setCurrentOnboardingData,
4561
} = useDispatch( nfdOnboardingStore );
4662

63+
useEffect( () => {
64+
if ( experimentVersion && experimentVersion === 1 ) {
65+
// Remove Tutorial from Small Options incase of control
66+
smallOptions.pop();
67+
} else {
68+
// Remove DIY from Small Options incase of hidden
69+
smallOptions.shift();
70+
}
71+
72+
setForkOptions( smallOptions );
73+
}, [ experimentVersion ] );
74+
4775
const switchFlow = ( newFlow ) => {
4876
if ( ! validateFlow( brandConfig, newFlow ) ) {
4977
return false;
@@ -105,6 +133,15 @@ const StartOptions = ( { questionnaire, oldFlow, largeOption, smallOptions } ) =
105133
flowForEvent = 'MIGRATE';
106134
handleMigration();
107135
break;
136+
case 'tutorial':
137+
sendOnboardingEvent(
138+
new OnboardingEvent(
139+
ACTION_SITEGEN_FORK_OPTION_SELECTED,
140+
'TUTORIAL'
141+
)
142+
);
143+
window.location.replace( pluginDashboardPage );
144+
return;
108145
}
109146

110147
if ( flowForEvent ) {
@@ -117,74 +154,79 @@ const StartOptions = ( { questionnaire, oldFlow, largeOption, smallOptions } ) =
117154
}
118155
};
119156
return (
120-
<>
121-
<p className="nfd-onboarding-sitegen-options__questionnaire">
122-
{ questionnaire }
123-
</p>
124-
<div className="nfd-onboarding-sitegen-options__option nfd-onboarding-sitegen-options__option--large"
125-
role="button"
126-
tabIndex={ 0 }
127-
onClick={ () => {
128-
selectFlow( largeOption.flow );
129-
} }
130-
onKeyDown={ () => {
131-
{
132-
selectFlow( largeOption.flow );
133-
}
134-
} }
135-
data-flow={ largeOption.flow }>
136-
<h3 className="nfd-onboarding-sitegen-options__option__heading__title nfd-onboarding-sitegen-options__option__heading__title--large">
137-
<OrbAnimation height={ `80px` } />
138-
{ largeOption.span && (
139-
<span className="nfd-onboarding-sitegen-options__option__span">
140-
{ largeOption.span }
141-
</span>
142-
) }
143-
{ largeOption.title }
144-
</h3>
145-
<p className="nfd-onboarding-sitegen-options__option__heading__subtitle nfd-onboarding-sitegen-options__option__heading__subtitle--large">
146-
{ largeOption.text1 }
147-
</p>
148-
<p className="nfd-onboarding-sitegen-options__option__heading__subtitle nfd-onboarding-sitegen-options__option__heading__subtitle--large">
149-
{ largeOption.text2 }
157+
experimentVersion &&
158+
forkOptions && (
159+
<>
160+
<p className="nfd-onboarding-sitegen-options__questionnaire">
161+
{ questionnaire }
150162
</p>
151-
152-
</div>
153-
<div className="nfd-onboarding-sitegen-options__container">
154-
155-
{ smallOptions.map( ( tab, idx ) => {
156-
return tab.show ? (
157-
<div
158-
className="nfd-onboarding-sitegen-options__option"
159-
key={ idx }
160-
role="button"
161-
tabIndex={ 0 }
162-
onClick={ () => {
163-
selectFlow( tab.flow );
164-
} }
165-
onKeyDown={ () => {
166-
{
163+
<div
164+
className="nfd-onboarding-sitegen-options__option nfd-onboarding-sitegen-options__option--large"
165+
role="button"
166+
tabIndex={ 0 }
167+
onClick={ () => {
168+
selectFlow( largeOption.flow );
169+
} }
170+
onKeyDown={ () => {
171+
{
172+
selectFlow( largeOption.flow );
173+
}
174+
} }
175+
data-flow={ largeOption.flow }
176+
>
177+
<h3 className="nfd-onboarding-sitegen-options__option__heading__title nfd-onboarding-sitegen-options__option__heading__title--large">
178+
<OrbAnimation height={ `80px` } />
179+
{ largeOption.span && (
180+
<span className="nfd-onboarding-sitegen-options__option__span">
181+
{ largeOption.span }
182+
</span>
183+
) }
184+
{ largeOption.title }
185+
</h3>
186+
<p className="nfd-onboarding-sitegen-options__option__heading__subtitle nfd-onboarding-sitegen-options__option__heading__subtitle--large">
187+
{ largeOption.text1 }
188+
</p>
189+
<p className="nfd-onboarding-sitegen-options__option__heading__subtitle nfd-onboarding-sitegen-options__option__heading__subtitle--large">
190+
{ largeOption.text2 }
191+
</p>
192+
</div>
193+
<div className="nfd-onboarding-sitegen-options__container">
194+
{ forkOptions.map( ( tab, idx ) => {
195+
return tab.show ? (
196+
<div
197+
className="nfd-onboarding-sitegen-options__option"
198+
key={ idx }
199+
role="button"
200+
tabIndex={ 0 }
201+
onClick={ () => {
167202
selectFlow( tab.flow );
168-
}
169-
} }
170-
data-flow={ tab.flow }
171-
>
172-
<h3 className="nfd-onboarding-sitegen-options__option__heading__title">
173-
{ tab.span && (
174-
<span className="nfd-onboarding-sitegen-options__option__span">
175-
{ tab.span }
176-
</span>
177-
) }
178-
{ tab.title }
179-
</h3>
180-
<p className="nfd-onboarding-sitegen-options__option__heading__subtitle">
181-
{ tab.subtitle }
182-
</p>
183-
</div>
184-
) : <></>;
185-
} ) }
186-
</div>
187-
</>
203+
} }
204+
onKeyDown={ () => {
205+
{
206+
selectFlow( tab.flow );
207+
}
208+
} }
209+
data-flow={ tab.flow }
210+
>
211+
<h3 className="nfd-onboarding-sitegen-options__option__heading__title">
212+
{ tab.span && (
213+
<span className="nfd-onboarding-sitegen-options__option__span">
214+
{ tab.span }
215+
</span>
216+
) }
217+
{ tab.title }
218+
</h3>
219+
<p className="nfd-onboarding-sitegen-options__option__heading__subtitle">
220+
{ tab.subtitle }
221+
</p>
222+
</div>
223+
) : (
224+
<></>
225+
);
226+
} ) }
227+
</div>
228+
</>
229+
)
188230
);
189231
};
190232

‎src/OnboardingSPA/steps/TheFork/contents.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ const getContents = ( canMigrateSite, migrationUrl ) => {
1010
),
1111
largerOption: {
1212
title: __( 'Site Creator', 'wp-module-onboarding' ),
13-
text1: __( 'Get a site created in seconds!', 'wp-module-onboarding' ),
13+
text1: __(
14+
'Get a site created in seconds!',
15+
'wp-module-onboarding'
16+
),
1417
text2: __(
1518
'Content & design generated by AI, customizable by you.',
1619
'wp-module-onboarding'
@@ -37,6 +40,15 @@ const getContents = ( canMigrateSite, migrationUrl ) => {
3740
flow: 'migration',
3841
show: canMigrateSite || migrationUrl,
3942
},
43+
{
44+
title: __( 'I’m following a tutorial', 'wp-module-onboarding' ),
45+
subtitle: __(
46+
'Take me to the WP Admin Dashboard',
47+
'wp-module-onboarding'
48+
),
49+
flow: 'tutorial',
50+
show: canMigrateSite || migrationUrl,
51+
},
4052
],
4153
importtext: __(
4254
'Already have a WordPress site you want to import?',

‎src/OnboardingSPA/steps/TheFork/index.js

Lines changed: 61 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
// WordPress
2-
import { useEffect } from '@wordpress/element';
2+
import { useEffect, useState } from '@wordpress/element';
33
import { useSelect, useDispatch } from '@wordpress/data';
44

55
// Classes and functions
66
import getContents from './contents';
7+
import { setFlow } from '../../utils/api/flow';
78
import { init as initializePlugins } from '../../utils/api/plugins';
89

910
// Components
@@ -22,25 +23,29 @@ import {
2223
sendOnboardingEvent,
2324
} from '../../utils/analytics/hiive';
2425
import {
26+
ACTION_SITEGEN_FORK_AI_EXPERIMENT,
2527
ACTION_SITEGEN_FORK_OPTION_SELECTED,
28+
CATEGORY_EXPERIMENT,
2629
ACTION_ONBOARDING_RESTARTED,
2730
} from '../../utils/analytics/hiive/constants';
2831
import { store as nfdOnboardingStore } from '../../store';
2932
import { DEFAULT_FLOW } from '../../data/flows/constants';
3033

3134
const TheFork = () => {
32-
const { migrationUrl, canMigrateSite, pluginInstallHash } = useSelect(
33-
( select ) => {
35+
const [ experimentVersion, setExperimentVersion ] = useState();
36+
const { currentData, migrationUrl, canMigrateSite, pluginInstallHash } =
37+
useSelect( ( select ) => {
3438
return {
39+
currentData:
40+
select( nfdOnboardingStore ).getCurrentOnboardingData(),
3541
migrationUrl: select( nfdOnboardingStore ).getMigrationUrl(),
3642
canMigrateSite: select( nfdOnboardingStore ).canMigrateSite(),
3743
currentStep: select( nfdOnboardingStore ).getCurrentStep(),
3844
routes: select( nfdOnboardingStore ).getRoutes(),
3945
pluginInstallHash:
4046
select( nfdOnboardingStore ).getPluginInstallHash(),
4147
};
42-
}
43-
);
48+
} );
4449
const {
4550
setIsHeaderEnabled,
4651
setSidebarActiveView,
@@ -49,6 +54,7 @@ const TheFork = () => {
4954
setIsHeaderNavigationEnabled,
5055
setFooterActiveView,
5156
setHideFooterNav,
57+
setCurrentOnboardingData,
5258
} = useDispatch( nfdOnboardingStore );
5359

5460
useEffect( () => {
@@ -60,8 +66,46 @@ const TheFork = () => {
6066
setDrawerActiveView( false );
6167
setFooterActiveView( FOOTER_SITEGEN );
6268
initializePlugins( pluginInstallHash );
69+
handleExperimentVersion();
6370
} );
6471

72+
const handleExperimentVersion = async () => {
73+
let theForkExperimentVersion = 0;
74+
if ( currentData.sitegen.theForkExperimentVersion !== 0 ) {
75+
// Use an existing experiment version if it exists
76+
setExperimentVersion(
77+
currentData.sitegen.theForkExperimentVersion
78+
);
79+
theForkExperimentVersion =
80+
currentData.sitegen.theForkExperimentVersion;
81+
} else {
82+
// Generate a random experiment version either 1 or 2
83+
theForkExperimentVersion = Math.floor( Math.random() * 2 ) + 1;
84+
setExperimentVersion( theForkExperimentVersion );
85+
86+
// Sync that to the store and DB for same version on refresh
87+
currentData.sitegen.theForkExperimentVersion =
88+
theForkExperimentVersion;
89+
setCurrentOnboardingData( currentData );
90+
await setFlow( currentData );
91+
const experimentVersionNames = {
92+
1: 'control',
93+
2: 'hidden',
94+
};
95+
96+
// Send an event for the experiment version shown to the user.
97+
sendOnboardingEvent(
98+
new OnboardingEvent(
99+
ACTION_SITEGEN_FORK_AI_EXPERIMENT,
100+
experimentVersionNames[ theForkExperimentVersion ],
101+
null,
102+
null,
103+
CATEGORY_EXPERIMENT
104+
)
105+
);
106+
}
107+
};
108+
65109
useEffect( () => {
66110
const url = new URL( window.location );
67111
const restartParam = url.searchParams.get( 'restart' );
@@ -109,16 +153,19 @@ const TheFork = () => {
109153
oldFlow={ oldFlow }
110154
largeOption={ content.largerOption }
111155
smallOptions={ content.smallerOptions }
156+
experimentVersion={ experimentVersion }
112157
/>
113-
<span
114-
role="button"
115-
tabIndex={ 0 }
116-
className="nfd-onboarding-step--site-gen__fork__exit"
117-
onClick={ () => handleForkExit() }
118-
onKeyDown={ () => handleForkExit() }
119-
>
120-
{ content.exitToWordPress }
121-
</span>
158+
{ experimentVersion === 1 && (
159+
<span
160+
role="button"
161+
tabIndex={ 0 }
162+
className="nfd-onboarding-step--site-gen__fork__exit"
163+
onClick={ () => handleForkExit() }
164+
onKeyDown={ () => handleForkExit() }
165+
>
166+
{ content.exitToWordPress }
167+
</span>
168+
) }
122169
</CommonLayout>
123170
);
124171
};

‎src/OnboardingSPA/utils/analytics/hiive/constants.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export const ACTION_SOCIAL_ADDED = 'social_added';
2424
export const ACTION_MIGRATION_INITIATED = 'migration_initiated';
2525
export const ACTION_MFE_MIGRATION_INITIATED = 'mfe_migration_initiated';
2626

27+
export const ACTION_SITEGEN_FORK_AI_EXPERIMENT = 'exp_fork_diy_mar25';
2728
export const ACTION_SITEGEN_FORK_OPTION_SELECTED = 'fork_option_selected';
2829
export const ACTION_SITEGEN_SITE_DETAILS_PROMPT_SET = 'site_details_prompt_set';
2930
export const ACTION_SITEGEN_SOCIAL_CONNECTED = 'social_connected';
@@ -71,4 +72,5 @@ export const ACTION_TO_LABEL_KEY_MAP = {
7172
[ ACTION_MFE_MIGRATION_INITIATED ]: 'path',
7273
[ ACTION_SITEGEN_ERROR_STATE_TRIGGERED ]: 'identifier',
7374
[ ACTION_ONBOARDING_RESTARTED ]: 'location',
75+
[ ACTION_SITEGEN_FORK_AI_EXPERIMENT ]: 'value',
7476
};

0 commit comments

Comments
 (0)