feat(core): track template doc events (#9775)

close AF-2076

packages/frontend/core/src/components/blocksuite/block-suite-editor/starter-bar.tsx

@@ -4,6 +4,7 @@ import { FeatureFlagService } from '@affine/core/modules/feature-flag';
 import { TemplateDocService } from '@affine/core/modules/template-doc';
 import { TemplateListMenu } from '@affine/core/modules/template-doc/view/template-list-menu';
 import { useI18n } from '@affine/i18n';
+import track from '@affine/track';
 import type { Store } from '@blocksuite/affine/store';
 import {
   AiIcon,
@@ -68,6 +69,7 @@ const StarterBarNotEmpty = ({ doc }: { doc: Store }) => {
   const handleSelectTemplate = useAsyncCallback(
     async (templateId: string) => {
       await docsService.duplicateFromTemplate(templateId, doc.id);
+      track.doc.editor.starterBar.quickStart({ with: 'template' });
     },
     [doc.id, docsService]
   );
@@ -78,6 +80,11 @@ const StarterBarNotEmpty = ({ doc }: { doc: Store }) => {
     editorService.editor.setMode('edgeless');
   }, [doc.id, docsService.list, editorService.editor]);
 
+  const onTemplateMenuOpenChange = useCallback((open: boolean) => {
+    if (open) track.doc.editor.starterBar.openTemplateListMenu();
+    setTemplateMenuOpen(open);
+  }, []);
+
   const showAI = false;
   const showTemplate = !isTemplate && enableTemplateDoc;
 
@@ -101,7 +108,7 @@ const StarterBarNotEmpty = ({ doc }: { doc: Store }) => {
             onSelect={handleSelectTemplate}
             rootOptions={{
               open: templateMenuOpen,
-              onOpenChange: setTemplateMenuOpen,
+              onOpenChange: onTemplateMenuOpenChange,
             }}
           >
             <Badge

packages/frontend/core/src/components/doc-properties/types/template.tsx

@@ -4,8 +4,11 @@ import { useLiveData, useService } from '@toeverything/infra';
 import { type ChangeEvent, useCallback } from 'react';
 
 import * as styles from './template.css';
+import type { PropertyValueProps } from './types';
 
-export const TemplateValue = () => {
+export const TemplateValue = ({
+  onChange: propOnChange,
+}: PropertyValueProps) => {
   const docService = useService(DocService);
 
   const isTemplate = useLiveData(
@@ -16,8 +19,9 @@ export const TemplateValue = () => {
     (e: ChangeEvent<HTMLInputElement>) => {
       const value = e.target.checked;
       docService.doc.record.setProperty('isTemplate', value);
+      propOnChange?.(value, true);
     },
-    [docService.doc.record]
+    [docService.doc.record, propOnChange]
   );
 
   const toggle = useCallback(() => {

packages/frontend/core/src/components/root-app-sidebar/template-doc-entrance.tsx

@@ -6,6 +6,7 @@ import { TemplateListMenuContentScrollable } from '@affine/core/modules/template
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import { inferOpenMode } from '@affine/core/utils';
 import { useI18n } from '@affine/i18n';
+import track from '@affine/track';
 import { TemplateIcon, TemplateOutlineIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useState } from 'react';
@@ -20,6 +21,11 @@ export const TemplateDocEntrance = () => {
     setMenuOpen(prev => !prev);
   }, []);
 
+  const onMenuOpenChange = useCallback((open: boolean) => {
+    if (open) track.$.sidebar.template.openTemplateListMenu();
+    setMenuOpen(open);
+  }, []);
+
   if (!enabled) {
     return null;
   }
@@ -31,7 +37,7 @@ export const TemplateDocEntrance = () => {
       onClick={toggleMenu}
     >
       <Menu
-        rootOptions={{ open: menuOpen, onOpenChange: setMenuOpen }}
+        rootOptions={{ open: menuOpen, onOpenChange: onMenuOpenChange }}
         contentOptions={{
           side: 'right',
           align: 'end',