Add event tracking for template select modal

MAILPOET-6365

packages/js/email-editor/src/components/block-editor/layout.tsx

@@ -25,10 +25,10 @@ import { VisualEditor } from './visual-editor/visual-editor';
 
 import { TemplateSelection } from '../template-select';
 
-import { recordEvent } from '../../events';
+import { recordEventOnce } from '../../events';
 
 export function Layout() {
-	recordEvent( 'editor-layout-loaded' );
+	recordEventOnce( 'editor_layout_loaded' );
 
 	const {
 		isFullscreenActive,

packages/js/email-editor/src/components/template-select/select-modal.tsx

@@ -19,6 +19,7 @@ import {
 } from '../../store';
 import { TemplateList } from './template-list';
 import { TemplateCategoriesListSidebar } from './template-categories-list-sidebar';
+import { recordEvent, recordEventOnce } from '../../events';
 
 const TemplateCategories: Array< { name: TemplateCategory; label: string } > = [
 	{
@@ -40,6 +41,11 @@ function SelectTemplateBody( {
 		TemplateCategories[ 1 ].name // Show the “Basic” category by default
 	);
 
+	const handleCategorySelection = ( category: TemplateCategory ) => {
+		recordEvent( 'template_select_modal_category_change', { category } );
+		setSelectedCategory( category );
+	};
+
 	useEffect( () => {
 		setTimeout( () => {
 			if ( hasEmailPosts ) {
@@ -53,7 +59,7 @@ function SelectTemplateBody( {
 			<TemplateCategoriesListSidebar
 				templateCategories={ TemplateCategories }
 				selectedCategory={ selectedCategory }
-				onClickCategory={ setSelectedCategory }
+				onClickCategory={ handleCategorySelection }
 			/>
 
 			<TemplateList
@@ -72,6 +78,9 @@ export function SelectTemplateModal( {
 	closeCallback = null,
 	previewContent = '',
 } ) {
+	const templateSelectMode = previewContent ? 'swap' : 'new';
+	recordEventOnce( 'template_select_modal_opened', { templateSelectMode } );
+
 	const [ templates, emailPosts, hasEmailPosts ] =
 		usePreviewTemplates( previewContent );
 
@@ -82,6 +91,12 @@ export function SelectTemplateModal( {
 
 		const postContent = template.template as unknown as EmailEditorPostType;
 
+		recordEvent( 'template_select_modal_template_selected', {
+			template,
+			templateSelectMode,
+			templateIsPostContent,
+		} );
+
 		// When we provide previewContent, we don't want to reset the blocks
 		if ( ! previewContent ) {
 			void dispatch( editorStore ).resetEditorBlocks(
@@ -100,15 +115,23 @@ export function SelectTemplateModal( {
 		if ( ! template ) {
 			return;
 		} // Prevent closing when templates are not loaded
+		recordEvent(
+			'template_select_modal_handle_close_without_template_selected'
+		);
 		handleTemplateSelection( template );
 	};
 
 	return (
 		<Modal
 			title={ __( 'Start with an email preset', 'mailpoet' ) }
-			onRequestClose={ () =>
-				closeCallback ? closeCallback() : handleCloseWithoutSelection()
-			}
+			onRequestClose={ () => {
+				recordEvent( 'template_select_modal_closed', {
+					templateSelectMode,
+				} );
+				return closeCallback
+					? closeCallback()
+					: handleCloseWithoutSelection();
+			} }
 			isFullScreen
 		>
 			<MemorizedSelectTemplateBody
@@ -122,7 +145,12 @@ export function SelectTemplateModal( {
 					<Button
 						variant="tertiary"
 						className="email-editor-start_from_scratch_button"
-						onClick={ () => handleCloseWithoutSelection() }
+						onClick={ () => {
+							recordEvent(
+								'template_select_modal_start_from_scratch_clicked'
+							);
+							return handleCloseWithoutSelection();
+						} }
 						isBusy={ ! hasTemplates }
 					>
 						{ __( 'Start from scratch', 'mailpoet' ) }

packages/js/email-editor/src/events/event-pipeline.ts

@@ -15,4 +15,15 @@ const recordEvent = ( name: string, data = {} ) => {
 	);
 };
 
-export { recordEvent, EMAIL_STRING, dispatcher };
+const recordEventOnce = ( function () {
+	const cachedEventName = {};
+	return ( name: string, data = {} ) => {
+		if ( cachedEventName[ name ] ) {
+			return; // do not execute again
+		}
+		recordEvent( name, data );
+		cachedEventName[ name ] = true;
+	};
+} )();
+
+export { recordEvent, recordEventOnce, EMAIL_STRING, dispatcher };

packages/js/email-editor/src/events/index.ts

@@ -1,2 +1,2 @@
-export { recordEvent } from './event-pipeline';
+export { recordEvent, recordEventOnce } from './event-pipeline';
 export * from './event-collector';