diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx index ab05865014a..60313651ee7 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx @@ -14,6 +14,11 @@ import { mergeBaseAndUserConfigs } from '@wordpress/edit-site/build-module/compo import { unlock } from '@wordpress/edit-site/build-module/lock-unlock'; import { isEqual, noop } from 'lodash'; +/** + * Internal dependencies + */ +import { trackEvent } from '~/customize-store/tracking'; + const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); // Removes the typography settings from the styles when the user is changing @@ -100,6 +105,24 @@ export const VariationContainer = ( { variation, children } ) => { ), }; } ); + + if ( variation.settings.color?.palette ) { + trackEvent( + 'customize_your_store_assembler_hub_color_palette_item_click', + { + item: variation.title, + } + ); + } + + if ( variation.settings.typography ) { + trackEvent( + 'customize_your_store_assembler_hub_typography_item_click', + { + item: variation.title, + } + ); + } }; const selectOnEnter = ( event ) => { diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx index b1b10bab2e6..c851175894a 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx @@ -17,6 +17,7 @@ import { unlock } from '@wordpress/edit-site/build-module/lock-unlock'; import { CustomizeStoreContext } from '../'; import { SidebarNavigationScreen } from './sidebar-navigation-screen'; import { ColorPalette, ColorPanel } from './global-styles'; +import { trackEvent } from '~/customize-store/tracking'; import { FlowType } from '~/customize-store/types'; const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); @@ -27,6 +28,14 @@ const SidebarNavigationScreenColorPaletteContent = () => { const hasCreatedOwnColors = !! ( user.settings.color && user.settings.color.palette.hasCreatedOwnColors ); + + function handlePanelBodyToggle( open?: boolean ) { + trackEvent( + 'customize_your_store_assembler_hub_color_palette_create_toggle', + { open } + ); + } + // Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are // loaded. This is necessary because the Iframe component waits until // the block editor store's `__internalIsInitialized` is true before @@ -45,6 +54,7 @@ const SidebarNavigationScreenColorPaletteContent = () => { className="woocommerce-customize-store__color-panel-container" title={ __( 'or create your own', 'woocommerce' ) } initialOpen={ hasCreatedOwnColors } + onToggle={ handlePanelBodyToggle } > diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-logo.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-logo.tsx index 0a55417170d..10f4c6a5f02 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-logo.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-logo.tsx @@ -297,16 +297,26 @@ const LogoEdit = ( { ); } + function handleMediaUploadSelect( media: { id: string; url: string } ) { + onInitialSelectLogo( media ); + trackEvent( 'customize_your_store_assembler_hub_logo_select' ); + } + if ( ! logoUrl ) { return ( void } ) => (