Merge pull request #492 from newfold-labs/enhance/sitegen-events

Sitegen: Analytics

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,
+} );

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,
+} );

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,
+} );

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 );
 		}
 	};
 

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js

@@ -26,6 +26,15 @@ 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';
+import { SITEGEN_FLOW } from '../../../data/flows/constants';
 
 // Wrapping the NewfoldInterfaceSkeleton with the HOC to make theme available
 const ThemedNewfoldInterfaceSkeleton = themeToggleHOC(
@@ -35,29 +44,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 +64,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 +159,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 +207,55 @@ 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,
+						{
+							source: SITEGEN_FLOW,
+						}
+					)
+				);
+			}
+
+			if ( currentChapter ) {
+				if ( currentData.data.chapters[ currentChapter ] ) {
+					currentData.data.chapters[
+						currentChapter
+					].completed = false;
+				}
+				trackOnboardingEvent(
+					new OnboardingEvent(
+						ACTION_ONBOARDING_CHAPTER_STARTED,
+						currentChapter,
+						{
+							source: SITEGEN_FLOW,
+						}
+					)
+				);
+			}
+
+			setActiveChapter( currentChapter );
+		}
+
+		if ( currentChapter && currentData.data.chapters[ currentChapter ] ) {
+			currentData.data.chapters[ currentChapter ].lastStep =
+				currentStep?.path ?? '';
+		}
+	};
+
+	useEffect( () => {
+		trackChapters();
+	}, [ currentStep ] );
+
 	useEffect( () => {
 		if ( initialize ) {
 			initializePlugins( pluginInstallHash );

src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js

@@ -1,3 +1,9 @@
+import { SITEGEN_FLOW } from '../../../../../../data/flows/constants';
+import {
+	OnboardingEvent,
+	trackOnboardingEvent,
+} from '../../../../../../utils/analytics/hiive';
+import { ACTION_COLORS_SELECTED } from '../../../../../../utils/analytics/hiive/constants';
 import './stylesheet.scss';
 
 const ColorPaletteIcon = ( {
@@ -16,6 +22,13 @@ const ColorPaletteIcon = ( {
 	const handleClick = () => {
 		setSelectedPalette( idx );
 		setSelectedColor( colors[ idx ] );
+		const { isDefault, ...colorsForEvent } = colors[ idx ];
+		trackOnboardingEvent(
+			new OnboardingEvent( ACTION_COLORS_SELECTED, 'generated', {
+				colors: colorsForEvent,
+				source: SITEGEN_FLOW,
+			} )
+		);
 		if ( setShowCustomColors ) {
 			setShowCustomColors( false );
 		}

src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js

@@ -11,6 +11,12 @@ 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';
+import { SITEGEN_FLOW } from '../../../../../data/flows/constants';
 
 const DesignColorsPanel = forwardRef(
 	(
@@ -150,6 +156,13 @@ const DesignColorsPanel = forwardRef(
 			setIsEditingCustomColors( false );
 			setSelectedPalette( 'custom' );
 			setCustomColors( selectedColor );
+			const { isDefault, ...colorsForEvent } = selectedColor;
+			trackOnboardingEvent(
+				new OnboardingEvent( ACTION_COLORS_SELECTED, 'custom', {
+					colors: colorsForEvent,
+					source: SITEGEN_FLOW,
+				} )
+			);
 		};
 
 		const handleEditCustomColors = () => {

src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js

@@ -6,6 +6,12 @@ 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';
+import { SITEGEN_FLOW } from '../../../../../data/flows/constants';
 
 const FontGroup = ( {
 	baseClassName,
@@ -336,6 +342,16 @@ 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,
+					source: SITEGEN_FLOW,
+				} )
+			);
 		};
 
 		const handleSelectYourOwnFonts = () => {
@@ -360,6 +376,12 @@ const DesignFontsPanel = forwardRef(
 		const handleApplyCustomFonts = () => {
 			setSelectedGroup( null );
 			setSelectedCustomFont( customFont );
+			trackOnboardingEvent(
+				new OnboardingEvent( ACTION_FONTS_SELECTED, 'custom', {
+					fonts: customFont,
+					source: SITEGEN_FLOW,
+				} )
+			);
 			setIsEditingCustomFont( false );
 			setSelectedGroup( 'custom' );
 		};