From 97480fd6ffb7f203d327e79f9dd9dbc1f42ba6e7 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Tue, 27 Feb 2024 21:58:25 +0530 Subject: [PATCH 1/4] Sitegen: Analytics --- src/OnboardingSPA/chapters/siteGen/core.js | 19 ++++ src/OnboardingSPA/chapters/siteGen/design.js | 14 +++ .../chapters/siteGen/features.js | 14 +++ src/OnboardingSPA/chapters/sitegen.js | 28 ----- .../SiteGenPreviewSelectableCard/index.js | 7 +- .../NewfoldInterfaceSkeleton/SiteGen/index.js | 100 ++++++++++++++---- .../ColorPaletteIcon/index.js | 11 ++ .../Customize/DesignColorsPanel/index.js | 11 ++ .../Customize/DesignFontsPanel/index.js | 19 ++++ .../SitegenEditorPatterns/Sidebar.js | 82 ++++++++++---- .../components/StartOptions/index.js | 27 ++++- .../TextInput/TextInputSiteGen/index.js | 2 + src/OnboardingSPA/data/flows/sitegen.js | 11 +- .../steps/SiteGen/Editor/Header/index.js | 59 ++++++++++- .../steps/SiteGen/Experience/index.js | 26 +++++ .../steps/SiteGen/Preview/index.js | 49 ++++++++- .../steps/SiteGen/SiteDetails/index.js | 36 +++++++ .../steps/SiteGen/SiteLogo/index.js | 12 +++ .../steps/SiteGen/SocialMedia/index.js | 19 ++++ src/OnboardingSPA/steps/TheFork/index.js | 26 ++++- .../steps/TheFork/stylesheet.scss | 1 + .../utils/analytics/hiive/constants.js | 21 ++++ src/constants.js | 3 + 23 files changed, 510 insertions(+), 87 deletions(-) create mode 100644 src/OnboardingSPA/chapters/siteGen/core.js create mode 100644 src/OnboardingSPA/chapters/siteGen/design.js create mode 100644 src/OnboardingSPA/chapters/siteGen/features.js delete mode 100644 src/OnboardingSPA/chapters/sitegen.js diff --git a/src/OnboardingSPA/chapters/siteGen/core.js b/src/OnboardingSPA/chapters/siteGen/core.js new file mode 100644 index 000000000..5352d8c96 --- /dev/null +++ b/src/OnboardingSPA/chapters/siteGen/core.js @@ -0,0 +1,19 @@ +import { __ } from '@wordpress/i18n'; + +import { CHAPTER_SITEGEN_CORE } from '../../../constants'; +import { Chapter } from '../../data/models/Chapter'; +import { stepSiteGenSiteDetails } from '../../steps/SiteGen/SiteDetails/step'; +import { stepSiteGenSiteLogo } from '../../steps/SiteGen/SiteLogo/step'; +import { stepSiteGenSocialMedia } from '../../steps/SiteGen/SocialMedia/step'; + +const steps = [ + stepSiteGenSiteDetails, + stepSiteGenSocialMedia, + stepSiteGenSiteLogo, +]; + +export const siteGenCore = new Chapter( { + id: CHAPTER_SITEGEN_CORE, + name: __( 'Sitegen Core', 'wp-module-onboarding' ), + steps, +} ); diff --git a/src/OnboardingSPA/chapters/siteGen/design.js b/src/OnboardingSPA/chapters/siteGen/design.js new file mode 100644 index 000000000..92873fd92 --- /dev/null +++ b/src/OnboardingSPA/chapters/siteGen/design.js @@ -0,0 +1,14 @@ +import { __ } from '@wordpress/i18n'; + +import { CHAPTER_SITEGEN_DESIGN } from '../../../constants'; +import { Chapter } from '../../data/models/Chapter'; +import { stepSiteGenEditor } from '../../steps/SiteGen/Editor/step'; +import { stepSiteGenPreview } from '../../steps/SiteGen/Preview/step'; + +const steps = [ stepSiteGenPreview, stepSiteGenEditor ]; + +export const siteGenDesign = new Chapter( { + id: CHAPTER_SITEGEN_DESIGN, + name: __( 'Sitegen Design', 'wp-module-onboarding' ), + steps, +} ); diff --git a/src/OnboardingSPA/chapters/siteGen/features.js b/src/OnboardingSPA/chapters/siteGen/features.js new file mode 100644 index 000000000..118f82766 --- /dev/null +++ b/src/OnboardingSPA/chapters/siteGen/features.js @@ -0,0 +1,14 @@ +import { __ } from '@wordpress/i18n'; + +import { CHAPTER_SITEGEN_FEATURES } from '../../../constants'; +import { Chapter } from '../../data/models/Chapter'; +import { stepSiteGenBuilding } from '../../steps/SiteGen/Building/step'; +import { stepSiteGenExperience } from '../../steps/SiteGen/Experience/step'; + +const steps = [ stepSiteGenExperience, stepSiteGenBuilding ]; + +export const siteGenFeatures = new Chapter( { + id: CHAPTER_SITEGEN_FEATURES, + name: __( 'Sitegen Features', 'wp-module-onboarding' ), + steps, +} ); diff --git a/src/OnboardingSPA/chapters/sitegen.js b/src/OnboardingSPA/chapters/sitegen.js deleted file mode 100644 index faaf53ad6..000000000 --- a/src/OnboardingSPA/chapters/sitegen.js +++ /dev/null @@ -1,28 +0,0 @@ -import { CHAPTER_SITEGEN } from '../../constants'; -import { Chapter } from '../data/models/Chapter'; -import { __ } from '@wordpress/i18n'; -import { stepSiteGenWelcome } from '../steps/SiteGen/Welcome/step'; -import { stepSiteGenSiteDetails } from '../steps/SiteGen/SiteDetails/step'; -import { stepSiteGenSiteLogo } from '../steps/SiteGen/SiteLogo/step'; -import { stepSiteGenSocialMedia } from '../steps/SiteGen/SocialMedia/step'; -import { stepSiteGenExperience } from '../steps/SiteGen/Experience/step'; -import { stepSiteGenBuilding } from '../steps/SiteGen/Building/step'; -import { stepSiteGenPreview } from '../steps/SiteGen/Preview/step'; -import { stepSiteGenEditor } from '../steps/SiteGen/Editor/step'; - -const steps = [ - stepSiteGenWelcome, - stepSiteGenSiteDetails, - stepSiteGenSocialMedia, - stepSiteGenSiteLogo, - stepSiteGenExperience, - stepSiteGenBuilding, - stepSiteGenPreview, - stepSiteGenEditor, -]; - -export const sitegen = new Chapter( { - id: CHAPTER_SITEGEN, - name: __( 'Site Generation', 'wp-module-onboarding' ), - steps, -} ); diff --git a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/index.js b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/index.js index ea686bdb7..003149088 100644 --- a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/index.js +++ b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/index.js @@ -16,6 +16,7 @@ const SiteGenPreviewSelectableCard = ( { overlay = false, skeletonLoadingTime = 2500, slug, + position, title, isFavorite, palette, @@ -28,19 +29,19 @@ const SiteGenPreviewSelectableCard = ( { const onPreview = () => { if ( typeof handlePreview === 'function' ) { - return handlePreview( slug ); + return handlePreview( slug, position ); } }; const onRegenerate = () => { if ( typeof handleRegenerate === 'function' ) { - return handleRegenerate( slug, palette, isFavorite ); + return handleRegenerate( slug, palette, isFavorite, position ); } }; const onFavorite = () => { if ( typeof handleFavorite === 'function' ) { - return handleFavorite( slug ); + return handleFavorite( slug, position ); } }; diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js index d7c2917c5..422726214 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js @@ -26,6 +26,14 @@ import { SKIP_FLOW_ERROR_CODE_DATABASE, SKIP_FLOW_ERROR_CODE_20, } from '../../../../constants'; +import { + OnboardingEvent, + trackOnboardingEvent, +} from '../../../utils/analytics/hiive'; +import { + ACTION_ONBOARDING_CHAPTER_COMPLETE, + ACTION_ONBOARDING_CHAPTER_STARTED, +} from '../../../utils/analytics/hiive/constants'; // Wrapping the NewfoldInterfaceSkeleton with the HOC to make theme available const ThemedNewfoldInterfaceSkeleton = themeToggleHOC( @@ -35,29 +43,15 @@ const ThemedNewfoldInterfaceSkeleton = themeToggleHOC( ); const SiteGen = () => { - const { newfoldBrand } = useSelect( ( select ) => { - return { - newfoldBrand: select( nfdOnboardingStore ).getNewfoldBrand(), - }; - }, [] ); - - // Update Title and Tagline on the site. - const { editEntityRecord } = useDispatch( coreStore ); - const { getEditedEntityRecord } = useSelect( ( select ) => { - return select( coreStore ); - }, [] ); - - useEffect( () => { - document.body.classList.add( `nfd-brand-${ newfoldBrand }` ); - }, [ newfoldBrand ] ); - const location = useLocation(); - const { currentData, initialize, pluginInstallHash, siteGenErrorStatus, interactionDisabled, + newfoldBrand, + currentStep, + lastChapter, } = useSelect( ( select ) => { return { currentData: @@ -69,11 +63,28 @@ const SiteGen = () => { select( nfdOnboardingStore ).getSiteGenErrorStatus(), interactionDisabled: select( nfdOnboardingStore ).getInteractionDisabled(), + newfoldBrand: select( nfdOnboardingStore ).getNewfoldBrand(), + currentStep: select( nfdOnboardingStore ).getCurrentStep(), + lastChapter: select( nfdOnboardingStore ).getCurrentChapter(), }; } ); - const { setCurrentOnboardingData, updateSiteGenErrorStatus } = - useDispatch( nfdOnboardingStore ); + const { + setCurrentOnboardingData, + updateSiteGenErrorStatus, + setActiveChapter, + } = useDispatch( nfdOnboardingStore ); + + // Update Title and Tagline on the site. + const { editEntityRecord } = useDispatch( coreStore ); + const { getEditedEntityRecord } = useSelect( ( select ) => { + return select( coreStore ); + }, [] ); + + useEffect( () => { + document.body.classList.add( `nfd-brand-${ newfoldBrand }` ); + }, [ newfoldBrand ] ); + const location = useLocation(); const prevSiteGenErrorStatus = useRef(); @@ -147,6 +158,14 @@ const SiteGen = () => { ) { return; } + + if ( ! window.nfdOnboarding?.siteGenTimerInterval ) { + window.nfdOnboarding.siteGenTime = 0; + window.nfdOnboarding.siteGenTimerInterval = setInterval( () => { + window.nfdOnboarding.siteGenTime += 1; + }, 1000 ); + } + let identifiers = await getSiteGenIdentifiers(); identifiers = identifiers.body; @@ -187,6 +206,49 @@ const SiteGen = () => { }; }; + const trackChapters = () => { + const currentChapter = currentStep?.chapter; + + if ( lastChapter !== currentChapter ) { + if ( lastChapter ) { + if ( currentData.data.chapters[ lastChapter ] ) { + currentData.data.chapters[ lastChapter ].completed = true; + } + trackOnboardingEvent( + new OnboardingEvent( + ACTION_ONBOARDING_CHAPTER_COMPLETE, + lastChapter + ) + ); + } + + if ( currentChapter ) { + if ( currentData.data.chapters[ currentChapter ] ) { + currentData.data.chapters[ + currentChapter + ].completed = false; + } + trackOnboardingEvent( + new OnboardingEvent( + ACTION_ONBOARDING_CHAPTER_STARTED, + currentChapter + ) + ); + } + + setActiveChapter( currentChapter ); + } + + if ( currentChapter && currentData.data.chapters[ currentChapter ] ) { + currentData.data.chapters[ currentChapter ].lastStep = + currentStep?.path ?? ''; + } + }; + + useEffect( () => { + trackChapters(); + }, [ currentStep ] ); + useEffect( () => { if ( initialize ) { initializePlugins( pluginInstallHash ); diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js index c48dc5175..229c5fa3e 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js @@ -1,3 +1,8 @@ +import { + OnboardingEvent, + trackOnboardingEvent, +} from '../../../../../../utils/analytics/hiive'; +import { ACTION_COLORS_SELECTED } from '../../../../../../utils/analytics/hiive/constants'; import './stylesheet.scss'; const ColorPaletteIcon = ( { @@ -16,6 +21,12 @@ const ColorPaletteIcon = ( { const handleClick = () => { setSelectedPalette( idx ); setSelectedColor( colors[ idx ] ); + const { isDefault, ...colorsForEvent } = colors[ idx ]; + trackOnboardingEvent( + new OnboardingEvent( ACTION_COLORS_SELECTED, 'generated', { + colors: colorsForEvent, + } ) + ); if ( setShowCustomColors ) { setShowCustomColors( false ); } diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js index f4d57b6e7..c287281eb 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js @@ -11,6 +11,11 @@ import { store as nfdOnboardingStore } from '../../../../../store'; import { __ } from '@wordpress/i18n'; // eslint-disable-next-line import/no-extraneous-dependencies import { cloneDeep } from 'lodash'; +import { + OnboardingEvent, + trackOnboardingEvent, +} from '../../../../../utils/analytics/hiive'; +import { ACTION_COLORS_SELECTED } from '../../../../../utils/analytics/hiive/constants'; const DesignColorsPanel = forwardRef( ( @@ -150,6 +155,12 @@ const DesignColorsPanel = forwardRef( setIsEditingCustomColors( false ); setSelectedPalette( 'custom' ); setCustomColors( selectedColor ); + const { isDefault, ...colorsForEvent } = selectedColor; + trackOnboardingEvent( + new OnboardingEvent( ACTION_COLORS_SELECTED, 'custom', { + colors: colorsForEvent, + } ) + ); }; const handleEditCustomColors = () => { diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js index 5c9f21429..7f4e3c1f8 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js @@ -6,6 +6,11 @@ import { PanelBody, PanelRow, Button } from '@wordpress/components'; import './stylesheet.scss'; import { store as nfdOnboardingStore } from '../../../../../store'; import { __ } from '@wordpress/i18n'; +import { + OnboardingEvent, + trackOnboardingEvent, +} from '../../../../../utils/analytics/hiive'; +import { ACTION_FONTS_SELECTED } from '../../../../../utils/analytics/hiive/constants'; const FontGroup = ( { baseClassName, @@ -336,6 +341,15 @@ const DesignFontsPanel = forwardRef( setShowCustomFonts( false ); } setSelectedGroup( groupId ); + const eventFonts = { + headings: fontGroups[ groupId ].headings, + body: fontGroups[ groupId ].body, + }; + trackOnboardingEvent( + new OnboardingEvent( ACTION_FONTS_SELECTED, 'generated', { + fonts: eventFonts, + } ) + ); }; const handleSelectYourOwnFonts = () => { @@ -360,6 +374,11 @@ const DesignFontsPanel = forwardRef( const handleApplyCustomFonts = () => { setSelectedGroup( null ); setSelectedCustomFont( customFont ); + trackOnboardingEvent( + new OnboardingEvent( ACTION_FONTS_SELECTED, 'custom', { + fonts: customFont, + } ) + ); setIsEditingCustomFont( false ); setSelectedGroup( 'custom' ); }; diff --git a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js index 9c96c9c08..0dc0b3c5a 100644 --- a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js +++ b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js @@ -21,6 +21,15 @@ import TabPanelHover from '../../../TabPanelHover'; import { cloneDeep } from 'lodash'; import { getGlobalStyles } from '../../../../utils/api/themes'; import { LivePreview } from '../../../LivePreview'; +import { + OnboardingEvent, + trackOnboardingEvent, +} from '../../../../utils/analytics/hiive'; +import { + ACTION_SITEGEN_HOMEPAGE_FAVORITED, + ACTION_SITEGEN_HOMEPAGE_SELECTED, + ACTION_SITEGEN_SIDEBAR_OPENED, +} from '../../../../utils/analytics/hiive/constants'; const SitegenEditorPatternsSidebar = () => { const [ homepages, setHomepages ] = useState(); @@ -45,17 +54,29 @@ const SitegenEditorPatternsSidebar = () => { setIsSidebarOpened( false ); }; - const handlePreview = ( slug ) => { + const handleTabSwitch = ( tab ) => { + trackOnboardingEvent( + new OnboardingEvent( ACTION_SITEGEN_SIDEBAR_OPENED, tab.name ) + ); + setActiveTab( tab ); + }; + + const handlePreview = ( slug, position ) => { if ( ! ( slug in homepages ) ) { return false; } - currentData.sitegen.homepages.active = homepages[ slug ]; + currentData.sitegen.homepages.active = homepages[ slug ]; setActiveHomepage( homepages[ slug ] ); setCurrentOnboardingData( currentData ); + trackOnboardingEvent( + new OnboardingEvent( ACTION_SITEGEN_HOMEPAGE_SELECTED, slug, { + position: position + 1, + } ) + ); }; - const handleFavorite = ( slug ) => { + const handleFavorite = ( slug, position ) => { if ( ! ( slug in homepages ) ) { return; } @@ -69,6 +90,14 @@ const SitegenEditorPatternsSidebar = () => { setHomepages( homepagesCopy ); setCurrentOnboardingData( currentData ); + + trackOnboardingEvent( + new OnboardingEvent( ACTION_SITEGEN_HOMEPAGE_FAVORITED, slug, { + favorite: isFavorite, + position: position + 1, + placement: 'editor_sidebar', + } ) + ); }; const loadData = async () => { @@ -95,7 +124,7 @@ const SitegenEditorPatternsSidebar = () => { useEffect( () => { setActiveTab( { - name: __( 'All Versions', 'wp-module-onboarding' ), + name: 'all_versions', title: (

{ __( 'All Versions', 'wp-module-onboarding' ) }

@@ -105,7 +134,7 @@ const SitegenEditorPatternsSidebar = () => { homepages && activeHomepage && globalStyles && - Object.keys( homepages ).map( ( homepage ) => { + Object.keys( homepages ).map( ( homepage, idx ) => { const data = homepages[ homepage ]; const newPreviewSettings = cloneDeep( globalStyles[ 0 ] ); newPreviewSettings.settings.color.palette = @@ -123,10 +152,14 @@ const SitegenEditorPatternsSidebar = () => { >
handlePreview( data.slug ) } + onClick={ () => + handlePreview( data.slug, idx ) + } role="button" tabIndex={ 0 } - onKeyDown={ () => handlePreview( data.slug ) } + onKeyDown={ () => + handlePreview( data.slug, idx ) + } > { role="button" tabIndex={ 0 } onClick={ () => - handleFavorite( data.slug ) + handleFavorite( data.slug, idx ) } onKeyDown={ () => - handleFavorite( data.slug ) + handleFavorite( data.slug, idx ) } >

@@ -183,10 +216,7 @@ const SitegenEditorPatternsSidebar = () => { } tabs={ [ { - name: __( - 'All Versions', - 'wp-module-onboarding' - ), + name: 'all_versions', title: (

@@ -203,7 +233,7 @@ const SitegenEditorPatternsSidebar = () => { activeHomepage && globalStyles && Object.keys( homepages ).map( - ( homepage ) => { + ( homepage, idx ) => { const data = homepages[ homepage ]; const newPreviewSettings = @@ -231,12 +261,14 @@ const SitegenEditorPatternsSidebar = () => { tabIndex={ 0 } onKeyDown={ () => handlePreview( - data.slug + data.slug, + idx ) } onClick={ () => handlePreview( - data.slug + data.slug, + idx ) } > @@ -272,12 +304,14 @@ const SitegenEditorPatternsSidebar = () => { } onKeyDown={ () => handleFavorite( - data.slug + data.slug, + idx ) } onClick={ () => handleFavorite( - data.slug + data.slug, + idx ) } >

@@ -293,7 +327,7 @@ const SitegenEditorPatternsSidebar = () => { ), }, { - name: 'Favorites', + name: 'favorites', title: (
@@ -311,7 +345,7 @@ const SitegenEditorPatternsSidebar = () => { activeHomepage && globalStyles && Object.keys( homepages ).map( - ( homepage ) => { + ( homepage, idx ) => { const data = homepages[ homepage ]; if ( ! data.isFavorite ) { @@ -342,12 +376,14 @@ const SitegenEditorPatternsSidebar = () => { tabIndex={ 0 } onKeyDown={ () => handlePreview( - data.slug + data.slug, + idx ) } onClick={ () => handlePreview( - data.slug + data.slug, + idx ) } > @@ -380,7 +416,7 @@ const SitegenEditorPatternsSidebar = () => { ), }, ] } - callback={ setActiveTab } + callback={ handleTabSwitch } triggerEvent="click" >
diff --git a/src/OnboardingSPA/components/StartOptions/index.js b/src/OnboardingSPA/components/StartOptions/index.js index 6dbb43305..80b1c3716 100644 --- a/src/OnboardingSPA/components/StartOptions/index.js +++ b/src/OnboardingSPA/components/StartOptions/index.js @@ -5,6 +5,11 @@ import { validateFlow } from '../../data/flows/utils'; import { useNavigate } from 'react-router-dom'; import { memo } from '@wordpress/element'; import { store as nfdOnboardingStore } from '../../store'; +import { + OnboardingEvent, + trackOnboardingEvent, +} from '../../utils/analytics/hiive'; +import { ACTION_SITEGEN_FORK_OPTION_SELECTED } from '../../utils/analytics/hiive/constants'; const StartOptions = ( { questionnaire, oldFlow, options } ) => { const navigate = useNavigate(); @@ -50,13 +55,29 @@ const StartOptions = ( { questionnaire, oldFlow, options } ) => { navigate( data.steps[ 1 ].path ); }; const selectFlow = ( flow ) => { + let flowForEvent = false; switch ( flow ) { case 'sitebuild': - return switchFlow( oldFlow ); + flowForEvent = 'DIY'; + switchFlow( oldFlow ); + break; case 'sitegen': - return switchFlow( SITEGEN_FLOW ); + flowForEvent = 'AI'; + switchFlow( SITEGEN_FLOW ); + break; case 'hirepro': - return window.open( hireProUrl, '_blank' ); + flowForEvent = 'PRO'; + window.open( hireProUrl, '_blank' ); + break; + } + + if ( flowForEvent ) { + trackOnboardingEvent( + new OnboardingEvent( + ACTION_SITEGEN_FORK_OPTION_SELECTED, + flowForEvent + ) + ); } }; return ( diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js index 4675e6a9d..122876aa8 100644 --- a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js +++ b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js @@ -10,6 +10,7 @@ const TextInputSiteGen = ( { customerInput, setIsValidInput, setCustomerInput, + setCustomerInputStrength, customChildren = false, } ) => { const textareaRef = useRef( null ); @@ -22,6 +23,7 @@ const TextInputSiteGen = ( { textareaRef.current.style.height = scrollHeight + 'px'; const analysisResult = calculateAnalysisScore( customerInput?.trim() ); setAnalysisScore( analysisResult ); + setCustomerInputStrength( analysisResult ); setIsValidInput( analysisResult >= 2 ); }, [ customerInput ] ); diff --git a/src/OnboardingSPA/data/flows/sitegen.js b/src/OnboardingSPA/data/flows/sitegen.js index c0a078b3e..525ddc303 100644 --- a/src/OnboardingSPA/data/flows/sitegen.js +++ b/src/OnboardingSPA/data/flows/sitegen.js @@ -1,15 +1,18 @@ -import { sitegen } from '../../chapters/sitegen'; +import { siteGenDesign } from '../../chapters/siteGen/design'; +import { siteGenFeatures } from '../../chapters/siteGen/features'; +import { siteGenCore } from '../../chapters/siteGen/core'; import { errorPage } from '../../pages/ErrorPage/page'; import { indexPage } from '../../pages/IndexPage/page'; +import { stepSiteGenWelcome } from '../../steps/SiteGen/Welcome/step'; import { stepTheFork } from '../../steps/TheFork/step'; export const pages = [ indexPage, errorPage ]; -export const initialChapters = [ sitegen ]; +export const initialChapters = [ siteGenCore, siteGenFeatures, siteGenDesign ]; export const getSteps = ( chapters = initialChapters ) => { let steps = []; - steps.push( stepTheFork ); + steps.push( stepTheFork, stepSiteGenWelcome ); chapters.forEach( ( chapter ) => { steps = steps.concat( [ ...chapter.steps, @@ -21,7 +24,7 @@ export const getSteps = ( chapters = initialChapters ) => { export const getRoutes = ( chapters = initialChapters ) => { let routes = [ ...pages ]; - routes.push( stepTheFork ); + routes.push( stepTheFork, stepSiteGenWelcome ); chapters.forEach( ( chapter ) => { routes = routes.concat( [ ...chapter.steps, diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js index 996c77bcb..9f3f4cfe2 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js @@ -23,6 +23,17 @@ import StepEditorHeaderCenter from './center'; import { getGlobalStyles } from '../../../../utils/api/themes'; import { LivePreview } from '../../../../components/LivePreview'; import { blockRenderScreenshot } from '../../../../utils/api/blockRender'; +import { + OnboardingEvent, + sendOnboardingEvent, + trackOnboardingEvent, +} from '../../../../utils/analytics/hiive'; +import { + ACTION_ONBOARDING_COMPLETE, + ACTION_SITEGEN_HOMEPAGE_FAVORITED, + ACTION_SITEGEN_HOMEPAGE_RENAMED, + ACTION_SITEGEN_SIDEBAR_OPENED, +} from '../../../../utils/analytics/hiive/constants'; const StepSiteGenEditorHeader = () => { const [ homepage, setHomepage ] = useState(); @@ -63,6 +74,16 @@ const StepSiteGenEditorHeader = () => { currentData.sitegen.homepages.data[ homepage.slug ] = homepage; currentData.sitegen.homepages.active = homepage; setCurrentOnboardingData( currentData ); + trackOnboardingEvent( + new OnboardingEvent( + ACTION_SITEGEN_HOMEPAGE_FAVORITED, + homepage.slug, + { + favorite: isFavorite, + placement: 'editor_toolbar', + } + ) + ); }; const handleRegenerate = async () => { @@ -112,8 +133,18 @@ const StepSiteGenEditorHeader = () => { }; const handleViewAll = () => { + if ( + isSidebarOpened && + sideBarView === SIDEBAR_SITEGEN_EDITOR_PATTERNS + ) { + return; + } + setSidebarActiveView( SIDEBAR_SITEGEN_EDITOR_PATTERNS ); setIsSidebarOpened( true ); + trackOnboardingEvent( + new OnboardingEvent( ACTION_SITEGEN_SIDEBAR_OPENED, 'all_versions' ) + ); }; const handleCustomize = async () => { @@ -121,6 +152,16 @@ const StepSiteGenEditorHeader = () => { sideBarView === 'Customize' ? ! isSidebarOpened : isSidebarOpened; setSidebarActiveView( 'Customize' ); setIsSidebarOpened( isSidebarOpenedNew ); + + if ( isSidebarOpenedNew === true ) { + trackOnboardingEvent( + new OnboardingEvent( + ACTION_SITEGEN_SIDEBAR_OPENED, + 'customize' + ) + ); + } + const globalStylesResponse = await getGlobalStyles(); setGlobalStyles( globalStylesResponse.body ); }; @@ -130,6 +171,15 @@ const StepSiteGenEditorHeader = () => { currentData.sitegen.homepages.data[ homepage.slug ] = homepage; currentData.sitegen.homepages.active = homepage; setCurrentOnboardingData( currentData ); + trackOnboardingEvent( + new OnboardingEvent( + ACTION_SITEGEN_HOMEPAGE_RENAMED, + homepage.slug, + { + name: title, + } + ) + ); }; const buildPreviewsForScreenshot = ( homepages, activeHomepage ) => { @@ -218,6 +268,9 @@ const StepSiteGenEditorHeader = () => { } await setFlow( currentData ); await completeFlow(); + sendOnboardingEvent( + new OnboardingEvent( ACTION_ONBOARDING_COMPLETE ) + ); window.location.replace( pluginDashboardPage ); }; @@ -320,9 +373,9 @@ const StepSiteGenEditorHeader = () => { > { isLargeViewport ? __( - 'Save & Continue', - 'wp-module-onboarding' - ) + 'Save & Continue', + 'wp-module-onboarding' + ) : __( 'Next', 'wp-module-onboarding' ) }
{ isSaving ? ( diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/index.js b/src/OnboardingSPA/steps/SiteGen/Experience/index.js index 2f26d02ce..4dd3ffec2 100644 --- a/src/OnboardingSPA/steps/SiteGen/Experience/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Experience/index.js @@ -8,6 +8,11 @@ import CommonLayout from '../../../components/Layouts/Common'; import CardWithOptions from '../../../components/CardWithOptions'; import SiteGenLoader from '../../../components/Loaders/SiteGenLoader'; import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi'; +import { + OnboardingEvent, + trackOnboardingEvent, +} from '../../../utils/analytics/hiive'; +import { ACTION_EXPERIENCE_LEVEL_SET } from '../../../utils/analytics/hiive/constants'; const SiteGenExperience = () => { const content = getContents(); @@ -51,6 +56,27 @@ const SiteGenExperience = () => { setSelection( idx ); currentData.sitegen.experience.level = idx; setCurrentOnboardingData( currentData ); + let experienceForEvent = false; + switch ( idx ) { + case 1: + experienceForEvent = 'novice'; + break; + case 2: + experienceForEvent = 'intermediate'; + break; + case 3: + experienceForEvent = 'expert'; + break; + } + + if ( experienceForEvent ) { + trackOnboardingEvent( + new OnboardingEvent( + ACTION_EXPERIENCE_LEVEL_SET, + experienceForEvent + ) + ); + } }; return ( diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js index 65a3b3d92..0913d5e3c 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Preview/index.js @@ -15,6 +15,16 @@ import { getHomepages, regenerateHomepage } from '../../../utils/api/siteGen'; import { getGlobalStyles } from '../../../utils/api/themes'; import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi'; import Animate from '../../../components/Animate'; +import { + OnboardingEvent, + trackOnboardingEvent, +} from '../../../utils/analytics/hiive'; +import { + ACTION_SITEGEN_HOMEPAGE_FAVORITED, + ACTION_SITEGEN_HOMEPAGE_REGENERATED, + ACTION_SITEGEN_HOMEPAGE_SELECTED, + ACTION_SITEGEN_SITE_GENERATION_TIME, +} from '../../../utils/analytics/hiive/constants'; const SiteGenPreview = () => { const navigate = useNavigate(); @@ -75,6 +85,7 @@ const SiteGenPreview = () => { if ( ! isEmpty( currentData.sitegen.homepages.data ) ) { setHomepages( currentData.sitegen.homepages.data ); setIsPreviewLoading( false ); + trackSiteGenerationTime(); return; } if ( currentData.sitegen.siteDetails?.prompt === '' ) { @@ -96,6 +107,19 @@ const SiteGenPreview = () => { setHomepages( response.body ); setCurrentOnboardingData( currentData ); setIsPreviewLoading( false ); + trackSiteGenerationTime(); + }; + + const trackSiteGenerationTime = () => { + if ( window.nfdOnboarding.siteGenTimerInterval ) { + clearInterval( window.nfdOnboarding.siteGenTimerInterval ); + trackOnboardingEvent( + new OnboardingEvent( + ACTION_SITEGEN_SITE_GENERATION_TIME, + window.nfdOnboarding.siteGenTime + ) + ); + } }; const loadGlobalStyles = async () => { @@ -112,13 +136,18 @@ const SiteGenPreview = () => { loadGlobalStyles(); }, [] ); - const handlePreview = ( slug ) => { + const handlePreview = ( slug, position ) => { if ( ! ( slug in homepages ) ) { return false; } currentData.sitegen.homepages.active = homepages[ slug ]; currentData.sitegen.skipCache = false; setCurrentOnboardingData( currentData ); + trackOnboardingEvent( + new OnboardingEvent( ACTION_SITEGEN_HOMEPAGE_SELECTED, slug, { + position, + } ) + ); navigate( nextStep.path ); }; @@ -139,7 +168,7 @@ const SiteGenPreview = () => { } }; - const handleFavorite = ( slug ) => { + const handleFavorite = ( slug, position ) => { if ( ! ( slug in homepages ) ) { return; } @@ -148,9 +177,17 @@ const SiteGenPreview = () => { currentData.sitegen.homepages.data = homepages; setHomepages( homepages ); setCurrentOnboardingData( currentData ); + + trackOnboardingEvent( + new OnboardingEvent( ACTION_SITEGEN_HOMEPAGE_FAVORITED, slug, { + favorite: isFavorite, + placement: 'preview_grid', + position, + } ) + ); }; - const handleRegenerate = async ( slug, palette, isFavorite ) => { + const handleRegenerate = async ( slug, palette, isFavorite, position ) => { scrollSelectionIntoView(); setIsRegenerating( true ); if ( ! ( slug in homepages ) ) { @@ -181,6 +218,11 @@ const SiteGenPreview = () => { setHomepages( homepages ); setCurrentOnboardingData( currentData ); setIsRegenerating( false ); + trackOnboardingEvent( + new OnboardingEvent( ACTION_SITEGEN_HOMEPAGE_REGENERATED, slug, { + position, + } ) + ); }; const buildPreviews = () => { @@ -222,6 +264,7 @@ const SiteGenPreview = () => { blockGrammar={ blockGrammar } previewSettings={ newPreviewSettings } slug={ slug } + position={ idx + 1 } title={ data.title } isFavorite={ data.isFavorite } palette={ data.color } diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js index 3de09121d..d9bae6509 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js @@ -11,11 +11,17 @@ import CommonLayout from '../../../components/Layouts/Common'; import TextInputSiteGen from '../../../components/TextInput/TextInputSiteGen'; import NextButtonSiteGen from '../../../components/Button/NextButtonSiteGen'; import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi'; +import { + OnboardingEvent, + trackOnboardingEvent, +} from '../../../utils/analytics/hiive'; +import { ACTION_SITEGEN_SITE_DETAILS_PROMPT_SET } from '../../../utils/analytics/hiive/constants'; const SiteGenSiteDetails = () => { const content = getContents(); const isLargeViewport = useViewportMatch( 'small' ); const [ customerInput, setCustomerInput ] = useState(); + const [ customerInputStrength, setCustomerInputStrength ] = useState( 0 ); const [ isValidInput, setIsValidInput ] = useState( false ); const { currentData } = useSelect( ( select ) => { return { @@ -50,6 +56,30 @@ const SiteGenSiteDetails = () => { setIsFooterNavAllowed( false ); }, [] ); + const trackPromptSetEvent = () => { + let customerInputStrengthForEvent = false; + switch ( customerInputStrength ) { + case 2: + customerInputStrengthForEvent = 'MEDIUM'; + break; + case 3: + customerInputStrengthForEvent = 'HIGH'; + break; + } + + if ( customerInputStrengthForEvent ) { + trackOnboardingEvent( + new OnboardingEvent( + ACTION_SITEGEN_SITE_DETAILS_PROMPT_SET, + customerInput, + { + strength: customerInputStrengthForEvent, + } + ) + ); + } + }; + useEffect( () => { if ( customerInput !== undefined && @@ -80,6 +110,9 @@ const SiteGenSiteDetails = () => { customerInput={ customerInput } setIsValidInput={ setIsValidInput } setCustomerInput={ setCustomerInput } + setCustomerInputStrength={ + setCustomerInputStrength + } customChildren={ true } > { isLargeViewport && ( @@ -88,6 +121,9 @@ const SiteGenSiteDetails = () => { className={ 'nfd-sg-site-details--next-btn' } + callback={ () => { + trackPromptSetEvent(); + } } text={ content.buttonText } disabled={ ! isValidInput } /> diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js index 22cac2402..ee394270e 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js @@ -12,6 +12,14 @@ import CommonLayout from '../../../components/Layouts/Common'; import NextButtonSiteGen from '../../../components/Button/NextButtonSiteGen'; import ImageUploaderWithText from '../../../components/ImageUploader/components/ImageUploaderWithText'; import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi'; +import { + OnboardingEvent, + trackOnboardingEvent, +} from '../../../utils/analytics/hiive'; +import { + ACTION_LOGO_ADDED, + ACTION_SITEGEN_LOGO_SKIPPED, +} from '../../../utils/analytics/hiive/constants'; const SiteGenSiteLogo = () => { const [ siteLogo, setSiteLogo ] = useState(); @@ -52,6 +60,9 @@ const SiteGenSiteLogo = () => { setCurrentOnboardingData( currentDataCopy ); setSiteLogo( undefined ); setIsFooterNavAllowed( false ); + trackOnboardingEvent( + new OnboardingEvent( ACTION_SITEGEN_LOGO_SKIPPED ) + ); }; useEffect( () => { @@ -81,6 +92,7 @@ const SiteGenSiteLogo = () => { site_logo: siteLogoNew.id, } ); setSiteLogo( siteLogoNew ); + trackOnboardingEvent( new OnboardingEvent( ACTION_LOGO_ADDED ) ); }; const content = getContents(); diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js b/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js index 7032e013a..3253a8e65 100644 --- a/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js @@ -12,6 +12,14 @@ import NextButtonSiteGen from '../../../components/Button/NextButtonSiteGen'; import { FacebookConnectButton } from '@newfold-labs/wp-module-facebook'; import { useNavigate } from 'react-router-dom'; import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi'; +import { + OnboardingEvent, + trackOnboardingEvent, +} from '../../../utils/analytics/hiive'; +import { + ACTION_SITEGEN_SOCIAL_CONNECTED, + ACTION_SITEGEN_SOCIAL_CONNECT_SKIPPED, +} from '../../../utils/analytics/hiive/constants'; const SiteGenSiteSocialMedia = () => { const isLargeViewport = useViewportMatch( 'small' ); @@ -44,6 +52,10 @@ const SiteGenSiteSocialMedia = () => { } ); const handleConnect = () => { + trackOnboardingEvent( + new OnboardingEvent( ACTION_SITEGEN_SOCIAL_CONNECTED, 'facebook' ) + ); + setConnected( true ); }; @@ -51,6 +63,12 @@ const SiteGenSiteSocialMedia = () => { updateSiteGenErrorStatus( true ); }; + const trackSkipEvent = () => { + trackOnboardingEvent( + new OnboardingEvent( ACTION_SITEGEN_SOCIAL_CONNECT_SKIPPED ) + ); + }; + useEffect( () => { setIsFooterNavAllowed( connected ); if ( interacted && connected ) { @@ -85,6 +103,7 @@ const SiteGenSiteSocialMedia = () => {
diff --git a/src/OnboardingSPA/steps/TheFork/index.js b/src/OnboardingSPA/steps/TheFork/index.js index 1ee659af7..b48d75570 100644 --- a/src/OnboardingSPA/steps/TheFork/index.js +++ b/src/OnboardingSPA/steps/TheFork/index.js @@ -15,6 +15,12 @@ import HeadingWithSubHeading from '../../components/HeadingWithSubHeading/SiteGe import StartOptions from '../../components/StartOptions'; import getContents from './contents'; import SitegenAiStateHandler from '../../components/StateHandlers/SitegenAi'; +import { + OnboardingEvent, + sendOnboardingEvent, + trackOnboardingEvent, +} from '../../utils/analytics/hiive'; +import { ACTION_SITEGEN_FORK_OPTION_SELECTED } from '../../utils/analytics/hiive/constants'; const TheFork = () => { const { migrationUrl } = useSelect( ( select ) => { @@ -47,6 +53,16 @@ const TheFork = () => { ? window.nfdOnboarding.oldFlow : DEFAULT_FLOW; + const handleForkExit = () => { + sendOnboardingEvent( + new OnboardingEvent( + ACTION_SITEGEN_FORK_OPTION_SELECTED, + 'TUTORIAL' + ) + ); + + window.location.replace( pluginDashboardPage ); + }; const content = getContents(); return ( @@ -71,13 +87,21 @@ const TheFork = () => { href={ migrationUrl } target={ '_blank' } rel={ 'noreferrer' } + onClick={ () => + trackOnboardingEvent( + new OnboardingEvent( + ACTION_SITEGEN_FORK_OPTION_SELECTED, + 'MIGRATE' + ) + ) + } > { content.importtext } ) } handleForkExit() } > { content.exitToWordPress } diff --git a/src/OnboardingSPA/steps/TheFork/stylesheet.scss b/src/OnboardingSPA/steps/TheFork/stylesheet.scss index 4cdef6647..4ba6f7aae 100644 --- a/src/OnboardingSPA/steps/TheFork/stylesheet.scss +++ b/src/OnboardingSPA/steps/TheFork/stylesheet.scss @@ -55,6 +55,7 @@ &__exit { cursor: pointer; + text-decoration: underline; font-weight: 510; line-height: 20px; text-align: center; diff --git a/src/OnboardingSPA/utils/analytics/hiive/constants.js b/src/OnboardingSPA/utils/analytics/hiive/constants.js index 99766b533..4c8ef4f0e 100644 --- a/src/OnboardingSPA/utils/analytics/hiive/constants.js +++ b/src/OnboardingSPA/utils/analytics/hiive/constants.js @@ -20,6 +20,18 @@ export const ACTION_ONBOARDING_EXITED = 'onboarding_exited'; export const ACTION_ONBOARDING_CHAPTER_STARTED = 'onboarding_chapter_started'; export const ACTION_ONBOARDING_CHAPTER_COMPLETE = 'onboarding_chapter_complete'; export const ACTION_SOCIAL_ADDED = 'social_added'; + +export const ACTION_SITEGEN_FORK_OPTION_SELECTED = 'fork_option_selected'; +export const ACTION_SITEGEN_SITE_DETAILS_PROMPT_SET = 'site_details_prompt_set'; +export const ACTION_SITEGEN_SOCIAL_CONNECTED = 'social_connected'; +export const ACTION_SITEGEN_SOCIAL_CONNECT_SKIPPED = 'social_connect_skipped'; +export const ACTION_SITEGEN_LOGO_SKIPPED = 'logo_skipped'; +export const ACTION_SITEGEN_HOMEPAGE_SELECTED = 'homepage_selected'; +export const ACTION_SITEGEN_HOMEPAGE_REGENERATED = 'homepage_regenerated'; +export const ACTION_SITEGEN_HOMEPAGE_FAVORITED = 'homepage_favorited'; +export const ACTION_SITEGEN_HOMEPAGE_RENAMED = 'homepage_renamed'; +export const ACTION_SITEGEN_SIDEBAR_OPENED = 'sidebar_opened'; +export const ACTION_SITEGEN_SITE_GENERATION_TIME = 'site_generation_time'; export const CATEGORY = 'wonder_start'; export const ACTION_TO_LABEL_KEY_MAP = { @@ -41,4 +53,13 @@ export const ACTION_TO_LABEL_KEY_MAP = { [ ACTION_ONBOARDING_CHAPTER_STARTED ]: 'chapter', [ ACTION_ONBOARDING_CHAPTER_COMPLETE ]: 'chapter', [ ACTION_SOCIAL_ADDED ]: 'platform', + [ ACTION_SITEGEN_FORK_OPTION_SELECTED ]: 'flow', + [ ACTION_SITEGEN_SITE_DETAILS_PROMPT_SET ]: 'prompt', + [ ACTION_SITEGEN_SOCIAL_CONNECTED ]: 'platform', + [ ACTION_SITEGEN_HOMEPAGE_SELECTED ]: 'version', + [ ACTION_SITEGEN_HOMEPAGE_REGENERATED ]: 'version', + [ ACTION_SITEGEN_HOMEPAGE_FAVORITED ]: 'version', + [ ACTION_SITEGEN_SIDEBAR_OPENED ]: 'type', + [ ACTION_SITEGEN_HOMEPAGE_RENAMED ]: 'version', + [ ACTION_SITEGEN_SITE_GENERATION_TIME ]: 'time', }; diff --git a/src/constants.js b/src/constants.js index 0418b18ae..125041109 100644 --- a/src/constants.js +++ b/src/constants.js @@ -73,6 +73,9 @@ export const CHAPTER_DESIGN = 'design'; export const CHAPTER_LAYOUT_AND_CONTENT = 'layout_and_content'; export const CHAPTER_FEATURES = 'features'; export const CHAPTER_SITEGEN = 'sitegen'; +export const CHAPTER_SITEGEN_CORE = 'core'; +export const CHAPTER_SITEGEN_DESIGN = 'design'; +export const CHAPTER_SITEGEN_FEATURES = 'features'; export const THEME_DARK = 'dark'; export const THEME_LIGHT = 'light'; From 683ee30eb0f3683762ad03295f746ccbfe3b530e Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Tue, 27 Feb 2024 22:12:14 +0530 Subject: [PATCH 2/4] Add source --- .../DesignColorsPanel/ColorPaletteIcon/index.js | 2 ++ .../Customize/DesignColorsPanel/index.js | 2 ++ .../Customize/DesignFontsPanel/index.js | 3 +++ .../components/SitegenEditorPatterns/Sidebar.js | 7 ++++++- .../steps/SiteGen/Editor/Header/index.js | 15 +++++++++++++-- .../steps/SiteGen/Experience/index.js | 6 +++++- src/OnboardingSPA/steps/SiteGen/Preview/index.js | 9 ++++++++- .../steps/SiteGen/SiteDetails/index.js | 2 ++ src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js | 5 ++++- .../steps/SiteGen/SocialMedia/index.js | 9 +++++++-- 10 files changed, 52 insertions(+), 8 deletions(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js index 229c5fa3e..ac3ea39da 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js @@ -1,3 +1,4 @@ +import { SITEGEN_FLOW } from '../../../../../../data/flows/constants'; import { OnboardingEvent, trackOnboardingEvent, @@ -25,6 +26,7 @@ const ColorPaletteIcon = ( { trackOnboardingEvent( new OnboardingEvent( ACTION_COLORS_SELECTED, 'generated', { colors: colorsForEvent, + source: SITEGEN_FLOW, } ) ); if ( setShowCustomColors ) { diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js index c287281eb..a9f2d7872 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js @@ -16,6 +16,7 @@ import { trackOnboardingEvent, } from '../../../../../utils/analytics/hiive'; import { ACTION_COLORS_SELECTED } from '../../../../../utils/analytics/hiive/constants'; +import { SITEGEN_FLOW } from '../../../../../data/flows/constants'; const DesignColorsPanel = forwardRef( ( @@ -159,6 +160,7 @@ const DesignColorsPanel = forwardRef( trackOnboardingEvent( new OnboardingEvent( ACTION_COLORS_SELECTED, 'custom', { colors: colorsForEvent, + source: SITEGEN_FLOW, } ) ); }; diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js index 7f4e3c1f8..0aebb3367 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js @@ -11,6 +11,7 @@ import { trackOnboardingEvent, } from '../../../../../utils/analytics/hiive'; import { ACTION_FONTS_SELECTED } from '../../../../../utils/analytics/hiive/constants'; +import { SITEGEN_FLOW } from '../../../../../data/flows/constants'; const FontGroup = ( { baseClassName, @@ -348,6 +349,7 @@ const DesignFontsPanel = forwardRef( trackOnboardingEvent( new OnboardingEvent( ACTION_FONTS_SELECTED, 'generated', { fonts: eventFonts, + source: SITEGEN_FLOW, } ) ); }; @@ -377,6 +379,7 @@ const DesignFontsPanel = forwardRef( trackOnboardingEvent( new OnboardingEvent( ACTION_FONTS_SELECTED, 'custom', { fonts: customFont, + source: SITEGEN_FLOW, } ) ); setIsEditingCustomFont( false ); diff --git a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js index 0dc0b3c5a..237b793b8 100644 --- a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js +++ b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js @@ -30,6 +30,7 @@ import { ACTION_SITEGEN_HOMEPAGE_SELECTED, ACTION_SITEGEN_SIDEBAR_OPENED, } from '../../../../utils/analytics/hiive/constants'; +import { SITEGEN_FLOW } from '../../../../data/flows/constants'; const SitegenEditorPatternsSidebar = () => { const [ homepages, setHomepages ] = useState(); @@ -56,7 +57,9 @@ const SitegenEditorPatternsSidebar = () => { const handleTabSwitch = ( tab ) => { trackOnboardingEvent( - new OnboardingEvent( ACTION_SITEGEN_SIDEBAR_OPENED, tab.name ) + new OnboardingEvent( ACTION_SITEGEN_SIDEBAR_OPENED, tab.name, { + source: SITEGEN_FLOW, + } ) ); setActiveTab( tab ); }; @@ -72,6 +75,7 @@ const SitegenEditorPatternsSidebar = () => { trackOnboardingEvent( new OnboardingEvent( ACTION_SITEGEN_HOMEPAGE_SELECTED, slug, { position: position + 1, + source: SITEGEN_FLOW, } ) ); }; @@ -96,6 +100,7 @@ const SitegenEditorPatternsSidebar = () => { favorite: isFavorite, position: position + 1, placement: 'editor_sidebar', + source: SITEGEN_FLOW, } ) ); }; diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js index 9f3f4cfe2..c6665dca1 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js @@ -34,6 +34,7 @@ import { ACTION_SITEGEN_HOMEPAGE_RENAMED, ACTION_SITEGEN_SIDEBAR_OPENED, } from '../../../../utils/analytics/hiive/constants'; +import { SITEGEN_FLOW } from '../../../../data/flows/constants'; const StepSiteGenEditorHeader = () => { const [ homepage, setHomepage ] = useState(); @@ -81,6 +82,7 @@ const StepSiteGenEditorHeader = () => { { favorite: isFavorite, placement: 'editor_toolbar', + source: SITEGEN_FLOW, } ) ); @@ -143,7 +145,13 @@ const StepSiteGenEditorHeader = () => { setSidebarActiveView( SIDEBAR_SITEGEN_EDITOR_PATTERNS ); setIsSidebarOpened( true ); trackOnboardingEvent( - new OnboardingEvent( ACTION_SITEGEN_SIDEBAR_OPENED, 'all_versions' ) + new OnboardingEvent( + ACTION_SITEGEN_SIDEBAR_OPENED, + 'all_versions', + { + source: SITEGEN_FLOW, + } + ) ); }; @@ -177,6 +185,7 @@ const StepSiteGenEditorHeader = () => { homepage.slug, { name: title, + source: SITEGEN_FLOW, } ) ); @@ -269,7 +278,9 @@ const StepSiteGenEditorHeader = () => { await setFlow( currentData ); await completeFlow(); sendOnboardingEvent( - new OnboardingEvent( ACTION_ONBOARDING_COMPLETE ) + new OnboardingEvent( ACTION_ONBOARDING_COMPLETE, { + source: SITEGEN_FLOW, + } ) ); window.location.replace( pluginDashboardPage ); }; diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/index.js b/src/OnboardingSPA/steps/SiteGen/Experience/index.js index 4dd3ffec2..dc268d267 100644 --- a/src/OnboardingSPA/steps/SiteGen/Experience/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Experience/index.js @@ -13,6 +13,7 @@ import { trackOnboardingEvent, } from '../../../utils/analytics/hiive'; import { ACTION_EXPERIENCE_LEVEL_SET } from '../../../utils/analytics/hiive/constants'; +import { SITEGEN_FLOW } from '../../../data/flows/constants'; const SiteGenExperience = () => { const content = getContents(); @@ -73,7 +74,10 @@ const SiteGenExperience = () => { trackOnboardingEvent( new OnboardingEvent( ACTION_EXPERIENCE_LEVEL_SET, - experienceForEvent + experienceForEvent, + { + source: SITEGEN_FLOW, + } ) ); } diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js index 0913d5e3c..0cdb1911b 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Preview/index.js @@ -25,6 +25,7 @@ import { ACTION_SITEGEN_HOMEPAGE_SELECTED, ACTION_SITEGEN_SITE_GENERATION_TIME, } from '../../../utils/analytics/hiive/constants'; +import { SITEGEN_FLOW } from '../../../data/flows/constants'; const SiteGenPreview = () => { const navigate = useNavigate(); @@ -116,7 +117,10 @@ const SiteGenPreview = () => { trackOnboardingEvent( new OnboardingEvent( ACTION_SITEGEN_SITE_GENERATION_TIME, - window.nfdOnboarding.siteGenTime + window.nfdOnboarding.siteGenTime, + { + source: SITEGEN_FLOW, + } ) ); } @@ -146,6 +150,7 @@ const SiteGenPreview = () => { trackOnboardingEvent( new OnboardingEvent( ACTION_SITEGEN_HOMEPAGE_SELECTED, slug, { position, + source: SITEGEN_FLOW, } ) ); navigate( nextStep.path ); @@ -183,6 +188,7 @@ const SiteGenPreview = () => { favorite: isFavorite, placement: 'preview_grid', position, + source: SITEGEN_FLOW, } ) ); }; @@ -221,6 +227,7 @@ const SiteGenPreview = () => { trackOnboardingEvent( new OnboardingEvent( ACTION_SITEGEN_HOMEPAGE_REGENERATED, slug, { position, + source: SITEGEN_FLOW, } ) ); }; diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js index d9bae6509..de6343386 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js @@ -16,6 +16,7 @@ import { trackOnboardingEvent, } from '../../../utils/analytics/hiive'; import { ACTION_SITEGEN_SITE_DETAILS_PROMPT_SET } from '../../../utils/analytics/hiive/constants'; +import { SITEGEN_FLOW } from '../../../data/flows/constants'; const SiteGenSiteDetails = () => { const content = getContents(); @@ -74,6 +75,7 @@ const SiteGenSiteDetails = () => { customerInput, { strength: customerInputStrengthForEvent, + source: SITEGEN_FLOW, } ) ); diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js index ee394270e..d02f4b27c 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js @@ -20,6 +20,7 @@ import { ACTION_LOGO_ADDED, ACTION_SITEGEN_LOGO_SKIPPED, } from '../../../utils/analytics/hiive/constants'; +import { SITEGEN_FLOW } from '../../../data/flows/constants'; const SiteGenSiteLogo = () => { const [ siteLogo, setSiteLogo ] = useState(); @@ -61,7 +62,9 @@ const SiteGenSiteLogo = () => { setSiteLogo( undefined ); setIsFooterNavAllowed( false ); trackOnboardingEvent( - new OnboardingEvent( ACTION_SITEGEN_LOGO_SKIPPED ) + new OnboardingEvent( ACTION_SITEGEN_LOGO_SKIPPED, { + source: SITEGEN_FLOW, + } ) ); }; diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js b/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js index 3253a8e65..57b8a547d 100644 --- a/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js @@ -20,6 +20,7 @@ import { ACTION_SITEGEN_SOCIAL_CONNECTED, ACTION_SITEGEN_SOCIAL_CONNECT_SKIPPED, } from '../../../utils/analytics/hiive/constants'; +import { SITEGEN_FLOW } from '../../../data/flows/constants'; const SiteGenSiteSocialMedia = () => { const isLargeViewport = useViewportMatch( 'small' ); @@ -53,7 +54,9 @@ const SiteGenSiteSocialMedia = () => { const handleConnect = () => { trackOnboardingEvent( - new OnboardingEvent( ACTION_SITEGEN_SOCIAL_CONNECTED, 'facebook' ) + new OnboardingEvent( ACTION_SITEGEN_SOCIAL_CONNECTED, 'facebook', { + source: SITEGEN_FLOW, + } ) ); setConnected( true ); @@ -65,7 +68,9 @@ const SiteGenSiteSocialMedia = () => { const trackSkipEvent = () => { trackOnboardingEvent( - new OnboardingEvent( ACTION_SITEGEN_SOCIAL_CONNECT_SKIPPED ) + new OnboardingEvent( ACTION_SITEGEN_SOCIAL_CONNECT_SKIPPED, { + source: SITEGEN_FLOW, + } ) ); }; From 7cf9309861615bb4926bae4c79391e708753e4d3 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Tue, 27 Feb 2024 22:32:55 +0530 Subject: [PATCH 3/4] Add source 2 --- .../NewfoldInterfaceSkeleton/SiteGen/index.js | 11 +++++++++-- src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js | 4 +++- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js index 422726214..69ea1625f 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js @@ -34,6 +34,7 @@ import { ACTION_ONBOARDING_CHAPTER_COMPLETE, ACTION_ONBOARDING_CHAPTER_STARTED, } from '../../../utils/analytics/hiive/constants'; +import { SITEGEN_FLOW } from '../../../data/flows/constants'; // Wrapping the NewfoldInterfaceSkeleton with the HOC to make theme available const ThemedNewfoldInterfaceSkeleton = themeToggleHOC( @@ -217,7 +218,10 @@ const SiteGen = () => { trackOnboardingEvent( new OnboardingEvent( ACTION_ONBOARDING_CHAPTER_COMPLETE, - lastChapter + lastChapter, + { + source: SITEGEN_FLOW, + } ) ); } @@ -231,7 +235,10 @@ const SiteGen = () => { trackOnboardingEvent( new OnboardingEvent( ACTION_ONBOARDING_CHAPTER_STARTED, - currentChapter + currentChapter, + { + source: SITEGEN_FLOW, + } ) ); } diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js index d02f4b27c..44c57900c 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js @@ -95,7 +95,9 @@ const SiteGenSiteLogo = () => { site_logo: siteLogoNew.id, } ); setSiteLogo( siteLogoNew ); - trackOnboardingEvent( new OnboardingEvent( ACTION_LOGO_ADDED ) ); + trackOnboardingEvent( new OnboardingEvent( ACTION_LOGO_ADDED ), { + source: SITEGEN_FLOW, + } ); }; const content = getContents(); From b39e6eb74812e9355125652ead16e72619d61acc Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Wed, 28 Feb 2024 15:10:12 +0530 Subject: [PATCH 4/4] Editor regen event and site logo event on Next --- .../steps/SiteGen/Editor/Header/index.js | 7 +++++++ src/OnboardingSPA/steps/SiteGen/Preview/index.js | 1 + src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js | 15 ++++++++++++--- src/OnboardingSPA/steps/TheFork/index.js | 7 +++++-- src/OnboardingSPA/steps/TheFork/stylesheet.scss | 4 ++++ src/OnboardingSPA/styles/_branding.scss | 1 + 6 files changed, 30 insertions(+), 5 deletions(-) diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js index c6665dca1..2fbfd5129 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js @@ -31,6 +31,7 @@ import { import { ACTION_ONBOARDING_COMPLETE, ACTION_SITEGEN_HOMEPAGE_FAVORITED, + ACTION_SITEGEN_HOMEPAGE_REGENERATED, ACTION_SITEGEN_HOMEPAGE_RENAMED, ACTION_SITEGEN_SIDEBAR_OPENED, } from '../../../../utils/analytics/hiive/constants'; @@ -132,6 +133,12 @@ const StepSiteGenEditorHeader = () => { currentData.sitegen.homepages.active = regeneratedHomepage; setCurrentOnboardingData( currentData ); setIsRegenerating( false ); + trackOnboardingEvent( + new OnboardingEvent( ACTION_SITEGEN_HOMEPAGE_REGENERATED, slug, { + source: SITEGEN_FLOW, + placement: 'editor_toolbar', + } ) + ); }; const handleViewAll = () => { diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js index 0cdb1911b..0b058df29 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Preview/index.js @@ -228,6 +228,7 @@ const SiteGenPreview = () => { new OnboardingEvent( ACTION_SITEGEN_HOMEPAGE_REGENERATED, slug, { position, source: SITEGEN_FLOW, + placement: 'preview_grid', } ) ); }; diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js index 44c57900c..6db16a86f 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js @@ -95,9 +95,6 @@ const SiteGenSiteLogo = () => { site_logo: siteLogoNew.id, } ); setSiteLogo( siteLogoNew ); - trackOnboardingEvent( new OnboardingEvent( ACTION_LOGO_ADDED ), { - source: SITEGEN_FLOW, - } ); }; const content = getContents(); @@ -121,6 +118,18 @@ const SiteGenSiteLogo = () => { /> { isLargeViewport && ( { + if ( siteLogo ) { + trackOnboardingEvent( + new OnboardingEvent( + ACTION_LOGO_ADDED + ), + { + source: SITEGEN_FLOW, + } + ); + } + } } text={ content.buttons.next } disabled={ siteLogo === undefined || siteLogo?.id === 0 diff --git a/src/OnboardingSPA/steps/TheFork/index.js b/src/OnboardingSPA/steps/TheFork/index.js index b48d75570..81dcfbc8b 100644 --- a/src/OnboardingSPA/steps/TheFork/index.js +++ b/src/OnboardingSPA/steps/TheFork/index.js @@ -99,12 +99,15 @@ const TheFork = () => { { content.importtext } ) } - handleForkExit() } + onKeyDown={ () => handleForkExit() } > { content.exitToWordPress } - + ); diff --git a/src/OnboardingSPA/steps/TheFork/stylesheet.scss b/src/OnboardingSPA/steps/TheFork/stylesheet.scss index 4ba6f7aae..32cdfc1e0 100644 --- a/src/OnboardingSPA/steps/TheFork/stylesheet.scss +++ b/src/OnboardingSPA/steps/TheFork/stylesheet.scss @@ -60,6 +60,10 @@ line-height: 20px; text-align: center; color: var(--nfd-onboarding-primary); + + &:hover { + color: var(--nfd-onboarding-sitegen-link-color); + } } } } diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index e8d40dd83..4e279a3e4 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -374,5 +374,6 @@ body { --nfd-onboarding-facebook-connect-button-background: #1877f2; --nfd-onboarding-facebook-connect-button-background-hover: #0065ea; --nfd-onboarding-facebook-connected-button-background: #3bb143; + --nfd-onboarding-sitegen-link-color: #2271b1; } }