feat(blocks): add event tracking for linked doc

toeverything · Dec 6, 2024 · c1a45ef · c1a45ef
1 parent d123c1d
commit c1a45ef
Show file tree

Hide file tree

Showing 8 changed files with 283 additions and 127 deletions.
diff --git a/...es/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-popup.ts b/...es/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-popup.ts
@@ -261,7 +261,7 @@ export class ReferencePopup extends WithDisposable(LitElement) {
     this.abortController.abort();
   }
 
-  private _viewToggleMenu() {
+  private _viewSelector() {
     // synced doc entry controlled by awareness flag
     const isSyncedDocEnabled = this.doc.awarenessStore.getFlag(
       'enable_synced_doc_block'
@@ -389,7 +389,7 @@ export class ReferencePopup extends WithDisposable(LitElement) {
         </editor-icon-button>
       `,
 
-      this._viewToggleMenu(),
+      this._viewSelector(),
 
       html`
         <editor-menu-button

diff --git a/packages/affine/components/src/toolbar/menu-button.ts b/packages/affine/components/src/toolbar/menu-button.ts
@@ -29,11 +29,12 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
       this._trigger,
       this._content,
       ({ display }) => {
-        this._trigger.showTooltip = display === 'hidden';
+        const opened = display === 'show';
+        this._trigger.showTooltip = !opened;
 
         this.dispatchEvent(
           new CustomEvent('toggle', {
-            detail: display,
+            detail: opened,
             bubbles: false,
             cancelable: false,
             composed: true,

diff --git a/packages/affine/shared/src/services/telemetry-service/link.ts b/packages/affine/shared/src/services/telemetry-service/link.ts
@@ -0,0 +1,14 @@
+import type { TelemetryEvent } from './types.js';
+
+export type LinkEventType =
+  | 'CopiedLink'
+  | 'OpenedAliasPopup'
+  | 'SavedAlias'
+  | 'ResetedAlias'
+  | 'OpenedViewSelector'
+  | 'SelectedView'
+  | 'OpenedCaptionEditor'
+  | 'OpenedCardStyleSelector'
+  | 'SelectedCardStyle';
+
+export type LinkToolbarEvents = Record<LinkEventType, TelemetryEvent>;
diff --git a/packages/affine/shared/src/services/telemetry-service/telemetry-service.ts b/packages/affine/shared/src/services/telemetry-service/telemetry-service.ts
@@ -1,18 +1,20 @@
 import { createIdentifier } from '@blocksuite/global/di';
 
 import type { OutDatabaseAllEvents } from './database.js';
+import type { LinkToolbarEvents } from './link.js';
 import type {
   DocCreatedEvent,
   ElementCreationEvent,
   TelemetryEvent,
 } from './types.js';
 
-export type TelemetryEventMap = OutDatabaseAllEvents & {
-  DocCreated: DocCreatedEvent;
-  LinkedDocCreated: TelemetryEvent;
-  SplitNote: TelemetryEvent;
-  CanvasElementAdded: ElementCreationEvent;
-};
+export type TelemetryEventMap = OutDatabaseAllEvents &
+  LinkToolbarEvents & {
+    DocCreated: DocCreatedEvent;
+    LinkedDocCreated: TelemetryEvent;
+    SplitNote: TelemetryEvent;
+    CanvasElementAdded: ElementCreationEvent;
+  };
 
 export interface TelemetryService {
   track<T extends keyof TelemetryEventMap>(

diff --git a/packages/blocks/src/_common/components/embed-card/modal/embed-card-edit-modal.ts b/packages/blocks/src/_common/components/embed-card/modal/embed-card-edit-modal.ts
@@ -14,6 +14,7 @@ import {
   EmbedLinkedDocModel,
   EmbedSyncedDocModel,
 } from '@blocksuite/affine-model';
+import { TelemetryProvider } from '@blocksuite/affine-shared/services';
 import { FONT_SM, FONT_XS } from '@blocksuite/affine-shared/styles';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import {
@@ -150,52 +151,81 @@ export class EmbedCardEditModal extends SignalWatcher(
   };
 
   private _onReset = () => {
+    const blockComponent = this._blockComponent;
+
+    if (!blockComponent) {
+      this.remove();
+      return;
+    }
+
+    const std = blockComponent.std;
+
     this.model.doc.updateBlock(this.model, { title: null, description: null });
 
-    const blockComponent = this._blockComponent;
     if (
       this.isEmbedLinkedDocModel &&
       blockComponent instanceof EmbedLinkedDocBlockComponent
     ) {
-      const std = blockComponent.std;
-
       blockComponent.refreshData();
 
       notifyLinkedDocClearedAliases(std);
     }
-    blockComponent?.requestUpdate();
+    blockComponent.requestUpdate();
+
+    std.getOptional(TelemetryProvider)?.track('ResetedAlias', {
+      control: 'reset',
+      segment: 'toolbar',
+      page: 'doc editor',
+      module: 'embed card edit modal',
+      type: `${this.viewType} view`,
+      category: isInternalEmbedModel(this.model) ? 'linked doc' : 'link',
+    });
 
     this.remove();
   };
 
   private _onSave = () => {
+    const blockComponent = this._blockComponent;
+
+    if (!blockComponent) {
+      this.remove();
+      return;
+    }
+
     const title = this.title$.value.trim();
     if (title.length === 0) {
       toast(this.host, 'Title can not be empty');
       return;
     }
 
+    const std = blockComponent.std;
+
     const description = this.description$.value.trim();
 
     const props: AliasInfo = { title };
     if (description) props.description = description;
 
-    const blockComponent = this._blockComponent;
-
     if (
       this.isEmbedSyncedDocModel &&
       blockComponent instanceof EmbedSyncedDocBlockComponent
     ) {
-      const std = blockComponent.std;
-
       blockComponent.convertToCard(props);
 
       notifyLinkedDocSwitchedToCard(std);
     } else {
       this.model.doc.updateBlock(this.model, props);
-      blockComponent?.requestUpdate();
+      blockComponent.requestUpdate();
     }
 
+    std.getOptional(TelemetryProvider)?.track('SavedAlias', {
+      control: 'save',
+      segment: 'toolbar',
+      page: 'doc editor',
+      module: 'embed card edit modal',
+      type: `${this.viewType} view`,
+      category: isInternalEmbedModel(this.model) ? 'linked doc' : 'link',
+    });
+
     this.remove();
   };
 
@@ -380,18 +410,23 @@ export class EmbedCardEditModal extends SignalWatcher(
 
   @query('.input.title')
   accessor titleInput!: HTMLInputElement;
+
+  @property({ attribute: false })
+  accessor viewType!: string;
 }
 
 export function toggleEmbedCardEditModal(
   host: EditorHost,
   embedCardModel: LinkableEmbedModel,
+  viewType: string,
   originalDocInfo?: AliasInfo
 ) {
   document.body.querySelector('embed-card-edit-modal')?.remove();
 
   const embedCardEditModal = new EmbedCardEditModal();
   embedCardEditModal.model = embedCardModel;
   embedCardEditModal.host = host;
+  embedCardEditModal.viewType = viewType;
   embedCardEditModal.originalDocInfo = originalDocInfo;
   document.body.append(embedCardEditModal);
 }

diff --git a/packages/blocks/src/root-block/edgeless/components/color-picker/button.ts b/packages/blocks/src/root-block/edgeless/components/color-picker/button.ts
@@ -63,8 +63,8 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
 
   override firstUpdated() {
     this.disposables.addFromEvent(this.menuButton, 'toggle', (e: Event) => {
-      const newState = (e as CustomEvent).detail;
-      if (newState === 'hidden' && this.tabType !== 'normal') {
+      const opened = (e as CustomEvent<boolean>).detail;
+      if (!opened && this.tabType !== 'normal') {
         this.tabType = 'normal';
       }
     });

diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/change-embed-card-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-embed-card-button.ts
@@ -660,7 +660,12 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
 
                 const originalDocInfo = this._originalDocInfo;
 
-                toggleEmbedCardEditModal(this.std.host, model, originalDocInfo);
+                toggleEmbedCardEditModal(
+                  this.std.host,
+                  model,
+                  this._viewType,
+                  originalDocInfo
+                );
               }}
             >
               ${EditIcon}