From 77a78a445896ba7db738d300487d7b340c588676 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Mon, 29 Jul 2024 13:31:37 +0100
Subject: [PATCH] [visual] Add events for tracking usage of the pasted content
 menu (#19589)

GitOrigin-RevId: e38add2215b0cd49f6c7c216f141e26ee8e3a179
---
 .../paste-html/pasted-content-menu.tsx        | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/services/web/frontend/js/features/source-editor/components/paste-html/pasted-content-menu.tsx b/services/web/frontend/js/features/source-editor/components/paste-html/pasted-content-menu.tsx
index 87f7ef56c9..e524cc6c04 100644
--- a/services/web/frontend/js/features/source-editor/components/paste-html/pasted-content-menu.tsx
+++ b/services/web/frontend/js/features/source-editor/components/paste-html/pasted-content-menu.tsx
@@ -2,6 +2,7 @@ import {
   FC,
   HTMLProps,
   PropsWithChildren,
+  useCallback,
   useEffect,
   useRef,
   useState,
@@ -13,6 +14,7 @@ import { EditorView } from '@codemirror/view'
 import { PastedContent } from '../../extensions/visual/pasted-content'
 import useEventListener from '../../../../shared/hooks/use-event-listener'
 import { FeedbackBadge } from '@/shared/components/feedback-badge'
+import { sendMB } from '@/infrastructure/event-tracking'
 
 const isMac = /Mac/.test(window.navigator?.platform)
 
@@ -36,6 +38,27 @@ export const PastedContentMenu: FC<{
     shiftRef.current = event.shiftKey
   })
 
+  // track interaction events
+  const trackedEventsRef = useRef<Record<string, boolean>>({
+    'pasted-content-button-shown': false,
+    'pasted-content-button-click': false,
+  })
+
+  const trackEventOnce = useCallback((key: string) => {
+    if (!trackedEventsRef.current[key]) {
+      trackedEventsRef.current[key] = true
+      sendMB(key)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (menuOpen) {
+      trackEventOnce('pasted-content-button-click')
+    } else {
+      trackEventOnce('pasted-content-button-shown')
+    }
+  }, [menuOpen, trackEventOnce])
+
   useEffect(() => {
     if (menuOpen) {
       const abortController = new AbortController()
@@ -101,6 +124,9 @@ export const PastedContentMenu: FC<{
               <MenuItem
                 onClick={() => {
                   insertPastedContent(view, pastedContent, true)
+                  sendMB('pasted-content-menu-click', {
+                    action: 'paste-with-formatting',
+                  })
                   setMenuOpen(false)
                 }}
               >
@@ -118,6 +144,9 @@ export const PastedContentMenu: FC<{
               <MenuItem
                 onClick={() => {
                   insertPastedContent(view, pastedContent, false)
+                  sendMB('pasted-content-menu-click', {
+                    action: 'paste-without-formatting',
+                  })
                   setMenuOpen(false)
                 }}
               >
@@ -139,6 +168,9 @@ export const PastedContentMenu: FC<{
                     'https://docs.google.com/forms/d/e/1FAIpQLSc7WcHrwz9fnCkUP5hXyvkG3LkSYZiR3lVJWZ0o6uqNQYrV7Q/viewform',
                     '_blank'
                   )
+                  sendMB('pasted-content-menu-click', {
+                    action: 'give-feedback',
+                  })
                   setMenuOpen(false)
                 }}
               >