Added utm params in logic flow and integrated mixpanel to trace user activity

Author: Almoizs-1310

src/analytics/analytics.ts

@@ -0,0 +1,63 @@
+import httpClient from './httpClient';
+class Analytics {
+
+  public sendEvent(eventName: string, eventID:string, errorMessage?: string, diagramType?:string, userLoginState: boolean = true) {
+    const analyticsID = getAnalyticsID();
+    const pluginID= "google-docs-plugin";
+    const pluginSource = 'googledocs';
+    const payload = {
+      analyticsID,
+      pluginID,
+      eventName,
+      eventID,
+      userLoginState,
+      pluginSource,
+      errorMessage,
+      diagramType
+    };
+
+    httpClient.post('/rest-api/plugins/pulse', payload).catch(error => {
+      if (error.code !== 'ERR_NETWORK') {
+        console.error('Failed to send analytics event:', error);
+      }
+    });
+  }
+
+
+  public trackLogin() {
+    this.sendEvent('Google Docs Plugin Logged In','GOOGLE_DOCS_PLUGIN_LOGIN');
+  }
+
+  public trackLogout() {
+    this.sendEvent('Google Docs Logged Out','GOOGLE_DOCS_PLUGIN_LOGOUT', undefined, undefined, false);
+  }
+
+  public trackBrowseDiagram() {
+    this.sendEvent('Google Docs Browse Diagram','GOOGLE_DOCS_PLUGIN_BROWSE_DIAGRAM');
+  }
+  
+  public trackNewDiagram() {
+    this.sendEvent('Google Docs New Diagram', 'GOOGLE_DOCS_PLUGIN_NEW_DIAGRAM');
+  }
+
+  public trackEditDiagram() {
+    this.sendEvent('Google Docs Edit Diagram', 'GOOGLE_DOCS_PLUGIN_EDIT_DIAGRAM');
+  }
+
+  public trackUpdateAllDiagrams() {
+    this.sendEvent('Google Docs Update All Diagrams', 'GOOGLE_DOCS_PLUGIN_UPDATE_ALL_DIAGRAMS');
+  }
+}
+
+function getAnalyticsID() {
+  const STORAGE_KEY = 'MERMAIDCHART_ANALYTICS_ID';
+
+  let id = localStorage.getItem(STORAGE_KEY);
+  if (!id) {
+    id = crypto.randomUUID();
+    localStorage.setItem(STORAGE_KEY, id);
+  }
+  return id;
+}
+
+export default new Analytics(); 

src/analytics/httpClient.ts

@@ -0,0 +1,26 @@
+import axios, { AxiosInstance, AxiosResponse, AxiosError } from 'axios';
+import { prodUrl } from '../config/urls';
+
+const ANALYTICS_BASE_URL = prodUrl;
+
+const httpClient: AxiosInstance = axios.create({
+  baseURL: ANALYTICS_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  timeout: 10000, // 10 second timeout
+});
+
+httpClient.interceptors.response.use(
+  (response: AxiosResponse) => response,
+  (error: AxiosError) => {
+    if (error.code === 'ERR_NETWORK') {
+      console.warn('Analytics endpoint unreachable - continuing without tracking');
+      return Promise.resolve({ data: null, status: 200, statusText: 'OK', headers: {}, config: error.config });
+    }
+    console.error('HTTP Client error:', error);
+    return Promise.reject(error);
+  }
+);
+
+export default httpClient; 

src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx

@@ -31,7 +31,7 @@ const EditDiagramDialog = () => {
         const minor = params.get('minor');
         if (projectID && documentID && major && minor) {
           const iframeUrl = buildUrl(
-            `/app/projects/${projectID}/diagrams/${documentID}/version/v.${major}.${minor}/edit`,
+            `/app/projects/${projectID}/diagrams/${documentID}/version/v${major}.${minor}/edit?pluginSource=googledocs`,
             authState.token
           );
           setDiagramsUrl(iframeUrl);

src/client/hooks/useAuth.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { serverFunctions } from '../utils/serverFunctions';
 import { baseURL } from '../../config/urls';
+import analytics from '../../analytics/analytics';
 
 type Status = 'idle' | 'loading' | 'success' | 'error';
 
@@ -37,6 +38,7 @@ const useAuth = () => {
   }, [getAuth]);
 
   const signOut = async () => {
+    analytics.trackLogout();
     try {
       await serverFunctions.resetOAuth();
       setTimeout(getAuth, 500);

src/client/sidebar/components/Sidebar.tsx

@@ -14,6 +14,7 @@ import { buildUrl } from '../../utils/helpers';
 import useAuth from '../../hooks/useAuth';
 import Button from '../../components/button';
 import { showAlertDialog } from '../../utils/alert';
+import analytics from '../../../analytics/analytics';
 
 interface ChartImage {
   altDescription: string;
@@ -137,6 +138,7 @@ const Sidebar = () => {
     options += ',left=' + left;
 
     try {
+       analytics.trackLogin();
       const authUrl = await serverFunctions.getOAuthURL();
       const windowObjectReference = window.open(
         authUrl,
@@ -152,6 +154,7 @@ const Sidebar = () => {
   };
 
   const handleDiagramsUpdate = async () => {
+    analytics.trackUpdateAllDiagrams();
     try {
       setUpdateDiagramsState('loading');
       await serverFunctions.syncImages();
@@ -164,6 +167,7 @@ const Sidebar = () => {
   };
 
   const handleSelectDiagram = async () => {
+    analytics.trackBrowseDiagram();
     try {
       setSelectDiagramState('loading');
       await serverFunctions.openSelectDiagramDialog();
@@ -176,6 +180,7 @@ const Sidebar = () => {
   };
 
   const handleCreateDiagram = async () => {
+    analytics.trackNewDiagram();
     try {
       setCreateDiagramState('loading');
       await serverFunctions.openCreateDiagramDialog();
@@ -196,6 +201,7 @@ const Sidebar = () => {
   };
 
   const handleEditDiagram = async (altDescription: string) => {
+    analytics.trackEditDiagram();
     try {
       await serverFunctions.selectChartImage(altDescription);
       await serverFunctions.openEditDiagramDialog();

src/server/ui.js

@@ -188,7 +188,10 @@ function getOAuthService() {
     })
     .setParam('response_type', 'code')
     .setParam('code_challenge_method', 'S256')
-    .setParam('code_challenge', userProps.getProperty('code_challenge') ?? '');
+    .setParam('code_challenge', userProps.getProperty('code_challenge') ?? '')
+    .setParam('utm_source', 'google_addon')
+    .setParam('utm_medium', 'docs')
+    .setParam('utm_campaign', 'plugin_usage');
 }
 
 export function getOAuthURL() {