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 } ) => (