CYS: Fix Looker dashboard data (#51206)

* Track data for font and color pairings including 'Create your own' option in CYS

* Add changelog file

* Track data for logo flow

* Send the open param as part of the tracking event customize_your_store_assembler_hub_color_palette_create_toggle
This commit is contained in:
Maikel Perez 2024-09-12 12:47:23 -03:00 committed by Karol Manijak
parent 2bc9494c96
commit 8b8d19327d
4 changed files with 67 additions and 4 deletions

View File

@ -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 ) => {

View File

@ -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 }
>
<ColorPanel />
</PanelBody>

View File

@ -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 (
<MediaUploadCheck>
<MediaUpload
onSelect={ onInitialSelectLogo }
onSelect={ handleMediaUploadSelect }
allowedTypes={ ALLOWED_MEDIA_TYPES }
render={ ( { open }: { open: () => void } ) => (
<Button
variant="link"
onClick={ open }
onClick={ () => {
open();
trackEvent(
'customize_your_store_assembler_hub_logo_add_click'
);
} }
className="block-library-site-logo__inspector-upload-container"
>
<span>
@ -351,10 +361,17 @@ const LogoEdit = ( {
<>
<MediaUploadCheck>
<MediaUpload
onSelect={ onInitialSelectLogo }
onSelect={ handleMediaUploadSelect }
allowedTypes={ ALLOWED_MEDIA_TYPES }
render={ ( { open }: { open: () => void } ) =>
cloneElement( logoImg, { onClick: open } )
cloneElement( logoImg, {
onClick() {
open();
trackEvent(
'customize_your_store_assembler_hub_logo_edit_click'
);
},
} )
}
/>
</MediaUploadCheck>
@ -478,6 +495,9 @@ export const SidebarNavigationScreenLogo = ( {
media
);
onClose();
trackEvent(
'customize_your_store_assembler_hub_logo_select'
);
} }
allowedTypes={
ALLOWED_MEDIA_TYPES
@ -490,6 +510,9 @@ export const SidebarNavigationScreenLogo = ( {
<MenuItem
onClick={ () => {
open();
trackEvent(
'customize_your_store_assembler_hub_logo_replace_click'
);
} }
>
{ __(
@ -508,6 +531,9 @@ export const SidebarNavigationScreenLogo = ( {
onClick={ () => {
onClose();
onRemoveLogo();
trackEvent(
'customize_your_store_assembler_hub_logo_remove_click'
);
} }
>
{ __(

View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Track data for font and color pairings including 'Create your own' option in CYS