feat: add analytics (#1188)

DhairyaMajmudar · Shurtu-gal · web-flow · commit ef86b5b25e13 · 2025-05-25T10:55:00.000+02:00
Co-authored-by: Dhairya Majmudar &lt;2022kuec2045@iiitkota.ac.in&gt;
Co-authored-by: Ashish Padhy &lt;ashishpadhy1729@gmail.com&gt;
diff --git a/.changeset/shiny-snails-cover.md b/.changeset/shiny-snails-cover.md
@@ -0,0 +1,5 @@
+---
+"@asyncapi/studio": major
+---
+
+feat: google tag manager analytics
diff --git a/apps/studio/src/app/layout.tsx b/apps/studio/src/app/layout.tsx
@@ -6,6 +6,9 @@ import 'tippy.js/animations/shift-away.css';
 import '@asyncapi/react-component/styles/default.min.css';
 import 'reactflow/dist/style.css';
 import './globals.css'
+import { GoogleTagManager, GoogleTagManagerNoScript } from '@/components/common/GoogleTagManager';
+
+const GTM_ID = process.env.NEXT_PUBLIC_ANALYTICS_ID ?? '';
 
 export default function RootLayout({
   children,
@@ -14,8 +17,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
+      <head>{GTM_ID && <GoogleTagManager gtmId={GTM_ID} />}</head>
       <body>
-        <Toolbar />
+        {GTM_ID && <GoogleTagManagerNoScript gtmId={GTM_ID} />} <Toolbar />
         <main className="flex flex-col w-full h-[calc(100vh-4rem)]">
           {children}
         </main> 
diff --git a/apps/studio/src/components/Editor/ConvertDropdown.tsx b/apps/studio/src/components/Editor/ConvertDropdown.tsx
@@ -7,6 +7,7 @@ import { ConvertModal } from '../Modals';
 import { Dropdown, Tooltip } from '../common';
 import { useServices } from '@/services';
 import { useDocumentsState, useFilesState } from '../../state';
+import { trackEvent } from '@/helpers/analytics';
 
 export const ConvertDropdown: React.FC = () => {
   const { editorSvc } = useServices();
@@ -34,6 +35,7 @@ export const ConvertDropdown: React.FC = () => {
             className="px-4 py-1 w-full text-left text-sm rounded-md focus:outline-none transition ease-in-out duration-150 disabled:cursor-not-allowed"
             title={`Convert to ${language === 'yaml' ? 'JSON' : 'YAML'}`}
             onClick={() => {
+              trackEvent('Convert', 'click', language === 'yaml' ? 'JSON' : 'YAML');
               toast.promise(
                 language === 'yaml'
                   ? editorSvc.convertToJSON()
@@ -67,7 +69,10 @@ export const ConvertDropdown: React.FC = () => {
             type="button"
             className="px-4 py-1 w-full text-left text-sm rounded-md focus:outline-none transition ease-in-out duration-150"
             title="Convert AsyncAPI document"
-            onClick={() => show(ConvertModal)}
+            onClick={() => {
+              trackEvent('Convert', 'click', 'Open convert document modal');
+              show(ConvertModal);
+            }}
           >
                 Convert document
           </button>
diff --git a/apps/studio/src/components/Editor/GenerateDropdown.tsx b/apps/studio/src/components/Editor/GenerateDropdown.tsx
@@ -7,6 +7,7 @@ import { GeneratorModal } from '../Modals';
 import { Dropdown, Tooltip } from '../common';
 import { useDocumentsState } from '../../state';
 import { useServices } from '@/services';
+import { trackEvent} from '@/helpers/analytics';
 
 export const GenerateDropdown: React.FC = () => {
   const isInvalidDocument = !useDocumentsState(state => 
@@ -33,7 +34,10 @@ export const GenerateDropdown: React.FC = () => {
             className="px-4 py-1 w-full text-left text-sm rounded-md focus:outline-none transition ease-in-out duration-150 disabled:cursor-not-allowed"
             title="Generate code/docs"
             disabled={isInvalidDocument}
-            onClick={() => show(GeneratorModal)}
+            onClick={() => {
+              trackEvent('Generate', 'click', 'Generate code/docs')
+              show(GeneratorModal)
+            }}
           >
                 Generate code/docs
           </button>
@@ -44,6 +48,7 @@ export const GenerateDropdown: React.FC = () => {
             className="px-4 py-1 w-full text-left text-sm rounded-md focus:outline-none transition ease-in-out duration-150 disabled:cursor-not-allowed"
             title='Share as Base64'
             onClick={() => {
+              trackEvent('Generate', 'click', 'Share as Base64');
               toast.promise(
                 (async function () {
                   const base64 = await editorSvc.exportAsBase64();
diff --git a/apps/studio/src/components/Editor/ImportDropdown.tsx b/apps/studio/src/components/Editor/ImportDropdown.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import toast from 'react-hot-toast';
 import { show } from '@ebay/nice-modal-react';
 import { FaFileImport } from 'react-icons/fa';
+import { trackEvent} from '@/helpers/analytics';
 
 import {
   ImportURLModal,
@@ -33,7 +34,10 @@ export const ImportDropdown: React.FC = () => {
             type="button"
             className="px-4 py-1 w-full text-left text-sm rounded-md focus:outline-none transition ease-in-out duration-150"
             title="Import from URL"
-            onClick={() => show(ImportURLModal)}
+            onClick={() => {
+              trackEvent('Import', 'click', 'Import AsyncAPI document from URL')
+              show(ImportURLModal)
+            }}
           >
                 Import from URL
           </button>
@@ -49,12 +53,13 @@ export const ImportDropdown: React.FC = () => {
               accept='.yaml, .yml, .json'
               style={{ position: 'fixed', top: '-100em' }}
               onChange={event => {
+                trackEvent('Import', 'file_upload', 'Import File');
                 toast.promise(editorSvc.importFile(event.target.files), {
                   loading: 'Importing...',
                   success: (
                     <div>
                       <span className="block text-bold">
-                      Document succesfully imported!
+                      Document successfully imported!
                       </span>
                     </div>
                   ),
@@ -77,7 +82,10 @@ export const ImportDropdown: React.FC = () => {
             type="button"
             className="px-4 py-1 w-full text-left text-sm rounded-md focus:outline-none transition ease-in-out duration-150"
             title="Import from Base64"
-            onClick={() => show(ImportBase64Modal)}
+            onClick={() => {
+              trackEvent('Import', 'click', 'Import AsyncAPI document from Base64')
+              show(ImportBase64Modal)
+            }}
           >
             Import from Base64
           </button>
@@ -88,7 +96,10 @@ export const ImportDropdown: React.FC = () => {
             type="button"
             className="px-4 py-1 w-full text-left text-sm rounded-md focus:outline-none transition ease-in-out duration-150"
             title="Import from UUID"
-            onClick={() => show(ImportUUIDModal)}
+            onClick={() => { 
+              trackEvent('Import', 'click', 'Import AsyncAPI document from UUID');
+              show(ImportUUIDModal);
+            }}
           >
             Import from UUID
           </button>
diff --git a/apps/studio/src/components/Editor/SaveDropdown.tsx b/apps/studio/src/components/Editor/SaveDropdown.tsx
@@ -5,6 +5,7 @@ import { FaSave } from 'react-icons/fa';
 import { Dropdown, Tooltip } from '../common';
 import { useServices } from '@/services';
 import { useDocumentsState, useFilesState } from '../../state';
+import { trackEvent } from '@/helpers/analytics';
 
 export const SaveDropdown: React.FC = () => {
   const { editorSvc } = useServices();
@@ -32,6 +33,11 @@ export const SaveDropdown: React.FC = () => {
             className="px-4 py-1 w-full text-left text-sm rounded-md focus:outline-none transition ease-in-out duration-150 disabled:cursor-not-allowed"
             title={`Save as ${language === 'yaml' ? 'YAML' : 'JSON'}`}
             onClick={() => {
+              trackEvent(
+                'Save',
+                'click',
+                `Save AsyncAPI document as ${language}`,
+              );
               toast.promise(
                 language === 'yaml'
                   ? editorSvc.saveAsYaml()
@@ -66,6 +72,13 @@ export const SaveDropdown: React.FC = () => {
             className="px-4 py-1 w-full text-left text-sm rounded-md focus:outline-none transition ease-in-out duration-150 disabled:cursor-not-allowed"
             title={`Convert and save as ${language === 'yaml' ? 'JSON' : 'YAML'}`}
             onClick={() => {
+              trackEvent(
+                'Save',
+                'click',
+                `Convert and save AsyncAPI document as ${
+                  language === 'yaml' ? 'JSON' : 'YAML'
+                }`,
+              );
               toast.promise(
                 language === 'yaml'
                   ? editorSvc.saveAsJSON()
diff --git a/apps/studio/src/components/Editor/ShareButton.tsx b/apps/studio/src/components/Editor/ShareButton.tsx
@@ -3,13 +3,15 @@ import { FaShareAlt } from 'react-icons/fa';
 import { useServices } from '../../services';
 import { toast } from 'react-hot-toast';
 import { Tooltip } from '../common';
+import { trackEvent } from '@/helpers/analytics';
 
 interface ShareButtonProps {}
 
 export const ShareButton: React.FunctionComponent<ShareButtonProps> = () => {
   const { editorSvc } = useServices();
 
   const handleShare = () => {
+    trackEvent('Share Button', 'click', 'Share AsyncAPI document');
     toast.promise(
       (async function () {
         const url = await editorSvc.exportAsURL();
diff --git a/apps/studio/src/components/SplitPane/Pane.tsx b/apps/studio/src/components/SplitPane/Pane.tsx
@@ -1,6 +1,8 @@
 /* eslint-disable */
 // @ts-nocheck
 
+import { trackEvent } from "@/helpers/analytics";
+
 function Pane(props) {
   const { children, className, split, style: styleProps, size, eleRef } = props;
 
@@ -23,6 +25,7 @@ function Pane(props) {
   }
 
   style = Object.assign({}, style, styleProps || {});
+  trackEvent('SplitPane', 'render', `Pane rendered with size: ${size || 'default'}`);
 
   return (
     <div ref={eleRef} className={classes.join(' ')} style={style}>
diff --git a/apps/studio/src/components/Template/TemplateSidebar.tsx b/apps/studio/src/components/Template/TemplateSidebar.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { VscRefresh } from 'react-icons/vsc';
 
 import { useSettingsState, otherState } from '../../state';
+import { trackEvent } from '@/helpers/analytics';
 
 interface TemplateSidebarProps {}
 
@@ -17,7 +18,10 @@ export const TemplateSidebar: React.FunctionComponent<TemplateSidebarProps> = ()
         <div />
       ) : (
         <div className="ml-2 text-gray-500 text-xs flex" style={{ height: '30px', lineHeight: '30px' }}>
-          <button type="button" className="text-xs" onClick={() => otherState.setState({ templateRerender: true })}>
+          <button type="button" className="text-xs" onClick={() => { 
+            trackEvent('Template', 'rerender', 'Manual template rerender');
+            otherState.setState({ templateRerender: true });
+          }}>
             <div className="inline-block">
               <VscRefresh className="w-4 h-4 mt-1" />
             </div>
diff --git a/apps/studio/src/components/Terminal/ProblemsTab.tsx b/apps/studio/src/components/Terminal/ProblemsTab.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useCallback, useMemo, useRef, useState } from 'react';
+import React, { FunctionComponent, useCallback, useMemo, useRef, useState, useEffect } from 'react';
 import { VscError, VscWarning, VscInfo, VscLightbulb, VscSearch, VscClose, VscSettingsGear } from 'react-icons/vsc';
 import { useModal } from '@ebay/nice-modal-react';
 import { DiagnosticSeverity } from '@asyncapi/parser';
@@ -11,6 +11,7 @@ import { debounce } from '../../helpers';
 import { useDocumentsState, useSettingsState } from '../../state';
 
 import type { Diagnostic } from '@asyncapi/parser';
+import { trackEvent } from '@/helpers/analytics';
 
 interface ProblemsTabProps {}
 
@@ -207,6 +208,10 @@ export const ProblemsTabContent: FunctionComponent<ProblemsTabProps> = () => {
   const [search, setSearch] = useState<string>('');
   const inputRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    trackEvent('Diagnostics', 'panel_opened', 'Problems tab opened');
+  }, []);
+
   const setActiveFn = useCallback((severity: DiagnosticSeverity) => {
     setActive(acc => {
       if (acc.some(s => s === severity)) {
@@ -236,11 +241,19 @@ export const ProblemsTabContent: FunctionComponent<ProblemsTabProps> = () => {
           <SeverityButtons active={active} setActive={setActiveFn} />
           <div className='ml-2 flex-1 flex flex-row items-center justify-center rounded-md border border-transparent shadow-xs px-2 py-1 bg-gray-700 text-xs font-medium'>
             <VscSearch />
-            <input ref={inputRef} placeholder='Filter diagnostics...' className='w-full bg-gray-700 border-transparent ml-2 focus:border-transparent focus:ring-0 focus:outline-none' onChange={debounce((e) => setSearch(e.target.value), 250)} />
+            <input ref={inputRef} placeholder='Filter diagnostics...' className='w-full bg-gray-700 border-transparent ml-2 focus:border-transparent focus:ring-0 focus:outline-none' onChange={debounce((e) => {
+              setSearch(e.target.value)
+              if (e.target.value.length > 2 || e.target.value.length === 0) {
+                trackEvent('Diagnostics', 'search', `Search term: "${e.target.value}"`);
+              }
+            }, 250)} />
             <button type='button' className={`hover:bg-gray-900 rounded-sm border border-transparent ${search ? 'opacity-100' : 'opacity-0'}`} onClick={() => {
               if (inputRef.current) {
                 inputRef.current.value = '';
               }
+              if (search) {
+                trackEvent('Diagnostics', 'search_clear', 'Search cleared');
+              }
               setSearch('');
             }}>
               <VscClose />
@@ -250,7 +263,14 @@ export const ProblemsTabContent: FunctionComponent<ProblemsTabProps> = () => {
             <button
               type="button"
               className={'justify-center border border-transparent shadow-xs px-2 py-1 ml-2 text-xs rounded-md font-medium text-white hover:bg-gray-900 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-700'}
-              onClick={() => modal.show({ activeTab: 'governance' })}
+              onClick={() => { 
+                trackEvent(
+                  'Diagnostics',
+                  'settings_open',
+                  'Opened governance settings'
+                );
+                modal.show({ activeTab: 'governance' })
+              }}
             >
               <VscSettingsGear className='w-4 h-4' />
             </button>
@@ -274,14 +294,23 @@ export const ProblemsTabContent: FunctionComponent<ProblemsTabProps> = () => {
                   <td className="px-2 py-1 text-right"><SeverityIcon severity={severity} /></td>
                   <td
                     className="px-2 py-1 cursor-pointer"
-                    onClick={() =>
+                    onClick={() => { 
+                      trackEvent('Diagnostics', 'diagnostic_click', `Clicked on diagnostic at line ${range.start.line + 1}`);
                       navigationSvc.scrollToEditorLine(
                         range.start.line + 1,
                         range.start.character + 1,
                       )
                     }
+                    }
                     onKeyDown={(e) => {
                       if (e.key === 'Enter') {
+                        trackEvent(
+                          'Diagnostics',
+                          'diagnostic_click',
+                          `Clicked on diagnostic at line ${
+                            range.start.line + 1
+                          }`
+                        );
                         navigationSvc.scrollToEditorLine(
                           range.start.line + 1,
                           range.start.character + 1,
diff --git a/apps/studio/src/components/Terminal/TerminalInfo.tsx b/apps/studio/src/components/Terminal/TerminalInfo.tsx
diff --git a/apps/studio/src/components/Terminal/TerminalTabs.tsx b/apps/studio/src/components/Terminal/TerminalTabs.tsx
diff --git a/apps/studio/src/components/common/GoogleTagManager.tsx b/apps/studio/src/components/common/GoogleTagManager.tsx
diff --git a/apps/studio/src/helpers/analytics.ts b/apps/studio/src/helpers/analytics.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@asyncapi/studio": major
 +---
++
 +feat: google tag manager analytics