Add event tracking for Header, PreviewDropdown, CampaignName and SaveEmailButton components

MAILPOET-6365

packages/js/email-editor/src/components/header/campaign-name.tsx

@@ -11,6 +11,7 @@ import { chevronDown } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { useEntityProp } from '@wordpress/core-data';
 import { storeName } from '../../store';
+import { recordEvent, recordEventOnce } from '../../events';
 
 // @see https://github.com/WordPress/gutenberg/blob/5e0ffdbc36cb2e967dfa6a6b812a10a2e56a598f/packages/edit-post/src/components/header/document-actions/index.js
 
@@ -42,7 +43,13 @@ export function CampaignName() {
 				renderToggle={ ( { isOpen, onToggle } ) => (
 					<>
 						<Button
-							onClick={ onToggle }
+							onClick={ () => {
+								onToggle();
+								recordEvent(
+									'header_campaign_name_email_title_clicked',
+									{ isOpen }
+								);
+							} }
 							className="mailpoet-email-campaign-name__link"
 						>
 							<Text size="body" as="h1">
@@ -57,7 +64,13 @@ export function CampaignName() {
 							icon={ chevronDown }
 							aria-expanded={ isOpen }
 							aria-haspopup="true"
-							onClick={ onToggle }
+							onClick={ () => {
+								onToggle();
+								recordEvent(
+									'header_campaign_name_toggle_icon_clicked',
+									{ isOpen }
+								);
+							} }
 							label={ __( 'Change campaign name', 'mailpoet' ) }
 						>
 							{ showIconLabels && __( 'Rename', 'mailpoet' ) }
@@ -71,6 +84,9 @@ export function CampaignName() {
 							value={ emailTitle }
 							onChange={ ( newTitle ) => {
 								setTitle( newTitle );
+								recordEventOnce(
+									'header_campaign_name_title_updated'
+								);
 							} }
 							name="campaign_name"
 							help={ __(

packages/js/email-editor/src/components/header/header.tsx

@@ -34,6 +34,7 @@ import { CampaignName } from './campaign-name';
 import { SendButton } from './send-button';
 import { SaveAllButton } from './save-all-button';
 import { useEditorMode } from '../../hooks';
+import { recordEvent } from '../../events';
 
 // Build type for ToolbarItem contains only "as" and "children" properties but it takes all props from
 // component passed to "as" property (in this case Button). So as fix for TS errors we need to pass all props from Button to ToolbarItem.
@@ -101,15 +102,19 @@ export function Header() {
 
 	const toggleTheInserterSidebar = () => {
 		if ( isInserterSidebarOpened ) {
+			recordEvent( 'header_inserter_sidebar_closed' );
 			return setIsInserterOpened( false );
 		}
+		recordEvent( 'header_inserter_sidebar_opened' );
 		return setIsInserterOpened( true );
 	};
 
 	const toggleTheListviewSidebar = () => {
 		if ( isListviewSidebarOpened ) {
+			recordEvent( 'header_listview_sidebar_closed' );
 			return setIsListViewOpened( false );
 		}
+		recordEvent( 'header_listview_sidebar_opened' );
 		return setIsListViewOpened( true );
 	};
 
@@ -145,7 +150,10 @@ export function Header() {
 							className="editor-history__undo"
 							isPressed={ false }
 							onMouseDown={ preventDefault }
-							onClick={ undoAction }
+							onClick={ () => {
+								void undoAction();
+								recordEvent( 'header_undo_icon_clicked' );
+							} }
 							disabled={ ! hasUndo }
 							icon={ undo }
 							label={ __( 'Undo', 'mailpoet' ) }
@@ -157,7 +165,10 @@ export function Header() {
 							className="editor-history__redo"
 							isPressed={ false }
 							onMouseDown={ preventDefault }
-							onClick={ redoAction }
+							onClick={ () => {
+								void redoAction();
+								recordEvent( 'header_redo_icon_clicked' );
+							} }
 							disabled={ ! hasRedo }
 							icon={ redo }
 							label={ __( 'Redo', 'mailpoet' ) }
@@ -197,6 +208,10 @@ export function Header() {
 								setIsBlockToolsCollapsed(
 									( collapsed ) => ! collapsed
 								);
+								recordEvent(
+									'header_blocks_tool_button_clicked',
+									{ isBlockToolsCollapsed }
+								);
 							} }
 							label={
 								isBlockToolsCollapsed

packages/js/email-editor/src/components/header/save-email-button.tsx

@@ -3,6 +3,7 @@ import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { check, cloud, Icon } from '@wordpress/icons';
 import { storeName } from '../../store';
+import { recordEvent } from '../../events';
 
 export function SaveEmailButton() {
 	const { saveEditedEmail } = useDispatch( storeName );
@@ -30,7 +31,14 @@ export function SaveEmailButton() {
 		<Button
 			variant="tertiary"
 			disabled={ isDisabled }
-			onClick={ saveEditedEmail }
+			onClick={ () => {
+				void saveEditedEmail();
+				recordEvent( 'header_save_email_button_clicked', {
+					label,
+					isSaving,
+					isSaved,
+				} );
+			} }
 		>
 			{ isSaving && <Icon icon={ cloud } /> }
 			{ isSaved && <Icon icon={ check } /> }

packages/js/email-editor/src/components/preview/preview-dropdown.tsx

@@ -10,6 +10,7 @@ import { __ } from '@wordpress/i18n';
 import { Icon, external, check, mobile, desktop } from '@wordpress/icons';
 import { SendPreviewEmail } from './send-preview-email';
 import { storeName } from '../../store';
+import { recordEvent } from '../../events';
 
 export function PreviewDropdown() {
 	const [ mailpoetEmailData ] = useEntityProp(
@@ -46,13 +47,23 @@ export function PreviewDropdown() {
 				className="mailpoet-preview-dropdown"
 				label={ __( 'Preview', 'mailpoet' ) }
 				icon={ deviceIcons[ previewDeviceType.toLowerCase() ] }
+				onToggle={ ( isOpened ) =>
+					recordEvent( 'header_preview_dropdown_clicked', {
+						isOpened,
+					} )
+				}
 			>
 				{ ( { onClose } ) => (
 					<>
 						<MenuGroup>
 							<MenuItem
 								className="block-editor-post-preview__button-resize"
-								onClick={ () => changeDeviceType( 'Desktop' ) }
+								onClick={ () => {
+									changeDeviceType( 'Desktop' );
+									recordEvent(
+										'header_preview_dropdown_desktop_selected'
+									);
+								} }
 								icon={
 									previewDeviceType === 'Desktop' && check
 								}
@@ -61,7 +72,12 @@ export function PreviewDropdown() {
 							</MenuItem>
 							<MenuItem
 								className="block-editor-post-preview__button-resize"
-								onClick={ () => changeDeviceType( 'Mobile' ) }
+								onClick={ () => {
+									changeDeviceType( 'Mobile' );
+									recordEvent(
+										'header_preview_dropdown_mobile_selected'
+									);
+								} }
 								icon={ previewDeviceType === 'Mobile' && check }
 							>
 								{ __( 'Mobile', 'mailpoet' ) }
@@ -72,6 +88,9 @@ export function PreviewDropdown() {
 								className="block-editor-post-preview__button-resize"
 								onClick={ () => {
 									void togglePreviewModal( true );
+									recordEvent(
+										'header_preview_dropdown_send_test_email_selected'
+									);
 									onClose();
 								} }
 							>
@@ -84,6 +103,9 @@ export function PreviewDropdown() {
 									<Button
 										className="edit-post-header-preview__button-external components-menu-item__button"
 										onClick={ () => {
+											recordEvent(
+												'header_preview_dropdown_preview_in_new_tab_selected'
+											);
 											openInNewTab(
 												newsletterPreviewUrl
 											);