more GA instrumentation

frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx

@@ -37,6 +37,8 @@ import {
 } from "~/pages/PageEnigma/Editor/editor";
 // import { usePricingModalStore } from "@storyteller/ui-pricing-modal"; - Uncomment for pricing modal - BFlat
 import toast from "react-hot-toast";
+import { gtagEvent } from "@storyteller/google-analytics";
+
 interface Props {
   pageName: string;
   loginSignUpPressed: () => void;
@@ -84,6 +86,7 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
   const handleOpenGalleryModal = () => {
     galleryModalVisibleViewMode.value = true;
     galleryModalVisibleDuringDrag.value = true;
+    gtagEvent("open_gallery_modal", { "tab": tabStore.activeTabId });
   };
 
   const tabStore = useTabStore();
@@ -138,6 +141,8 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
               activeMenu={tabStore.activeTabId}
               disabled={disableTabSwitcher()}
               onMenuChange={(tabId) => {
+                gtagEvent("switch_tab", { "tab": tabId });
+
                 // Prevent a second input if the switcher is throttled.
                 if (switcherThrottle.current) {
                   return;
@@ -193,7 +198,10 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
                   variant="secondary"
                   icon={faGear}
                   className="h-[38px] w-[38px]"
-                  onClick={() => setIsSettingsModalOpen(true)}
+                  onClick={() => {
+                    setIsSettingsModalOpen(true);
+                    gtagEvent("open_settings_modal");
+                  }}
                 />
               </Tooltip>
               <Button

frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx

@@ -8,6 +8,7 @@ import {
 } from "@storyteller/tauri-api";
 import { LoadingSpinner } from "@storyteller/ui-loading-spinner";
 import React from "react";
+import { gtagEvent } from "@storyteller/google-analytics";
 
 interface LightboxModalProps {
   isOpen: boolean;
@@ -131,6 +132,7 @@ export function LightboxModal({
             <div className="mt-15 mb-15 flex justify-end gap-2">
               <Button
                 onClick={async (e) => {
+                  gtagEvent("image_to_3d_clicked");
                   //let _result = await FalHunyuanImageTo3d({
                   //  image_media_token: mediaId,
                   //  //base64_image: downloadUrl,
@@ -152,6 +154,7 @@ export function LightboxModal({
                 <Button
                   onClick={async (e) => {
                     e.stopPropagation();
+                    gtagEvent("add_to_scene_clicked");
                     await onAddToSceneClicked(downloadUrl, mediaId);
                     onClose(); // close the lightbox
                     onCloseGallery(); // close the gallery
@@ -167,6 +170,7 @@ export function LightboxModal({
                     icon={faDownToLine}
                     onClick={async (e) => {
                       e.stopPropagation();
+                      gtagEvent("download_clicked");
                       await onDownloadClicked(downloadUrl, mediaClass);
                     }}
                   >
@@ -176,7 +180,10 @@ export function LightboxModal({
                   <a
                     href={downloadUrl}
                     download
-                    onClick={(e) => e.stopPropagation()}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      gtagEvent("download_clicked");
+                    }}
                     className="no-underline"
                   >
                     <Button icon={faDownToLine}>Download</Button>

frontend/libs/components/lightbox-modal/tsconfig.json

@@ -8,6 +8,9 @@
     {
       "path": "../../tauri-api"
     },
+    {
+      "path": "../../analytics/google-analytics"
+    },
     {
       "path": "../button"
     },

frontend/libs/components/lightbox-modal/tsconfig.lib.json

@@ -49,6 +49,9 @@
     {
       "path": "../../tauri-api/tsconfig.lib.json"
     },
+    {
+      "path": "../../analytics/google-analytics/tsconfig.lib.json"
+    },
     {
       "path": "../button/tsconfig.lib.json"
     },

frontend/libs/components/promptbox/src/lib/PromptBoxImage.tsx

@@ -29,6 +29,7 @@ import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { GalleryItem, GalleryModal } from "@storyteller/ui-gallery-modal";
 import { ModelInfo } from "@storyteller/model-list";
 import { usePromptImageStore, RefImage } from "./promptStore";
+import { gtagEvent } from "@storyteller/google-analytics";
 
 interface PromptBoxImageProps {
   useJobContext: () => JobContextType;
@@ -198,6 +199,8 @@ export const PromptBoxImage = ({
 
     console.log("PromptBoxImage - Prompting with model", modelInfo);
 
+    gtagEvent("enqueue_image");
+
     setTimeout(() => {
       // TODO(bt,2025-05-08): This is a hack so we don't accidentally wind up with a permanently disabled prompt box if
       // the backend hangs on a given request.

frontend/libs/components/promptbox/src/lib/PromptBoxVideo.tsx

@@ -23,6 +23,7 @@ import { IsDesktopApp } from "@storyteller/tauri-utils";
 import { GalleryItem, GalleryModal } from "@storyteller/ui-gallery-modal";
 import { ModelInfo } from "@storyteller/model-list";
 import { usePromptVideoStore, RefImage } from "./promptStore";
+import { gtagEvent } from "@storyteller/google-analytics";
 
 interface PromptBoxVideoProps {
   useJobContext: () => JobContextType;
@@ -187,6 +188,8 @@ export const PromptBoxVideo = ({
 
     console.log("PromptBoxVideo - Prompting with model", modelInfo);
 
+    gtagEvent("enqueue_video");
+
     setTimeout(() => {
       // TODO(bt,2025-05-08): This is a hack so we don't accidentally wind up with a permanently disabled prompt box if
       // the backend hangs on a given request.

frontend/libs/components/promptbox/tsconfig.json

@@ -38,6 +38,9 @@
     {
       "path": "../toaster"
     },
+    {
+      "path": "../../analytics/google-analytics"
+    },
     {
       "path": "./tsconfig.lib.json"
     },

frontend/libs/components/promptbox/tsconfig.lib.json

@@ -76,6 +76,9 @@
     {
       "path": "../../common/tsconfig.lib.json"
     },
+    {
+      "path": "../../analytics/google-analytics/tsconfig.lib.json"
+    },
     {
       "path": "../toaster/tsconfig.lib.json"
     }

frontend/libs/components/settings-modal/src/lib/settings-modal.tsx

@@ -14,6 +14,7 @@ import { AudioSettingsPane } from "./panes/AudioSettingsPane";
 import { AccountSettingsPane } from "./panes/AccountSettings/AccountSettingsPane";
 import { AboutSettingsPane } from "./panes/AboutSettingsPane";
 import { ProviderPrioritySettingsPane } from "./panes/ProviderPrioritySettingsPane";
+import { gtagEvent } from "@storyteller/google-analytics";
 
 interface SettingsModalProps {
   isOpen: boolean;
@@ -93,7 +94,10 @@ export const SettingsModal = ({
                     "h-9 w-full rounded-lg p-2 text-left transition-colors duration-100 hover:bg-[#63636B]/40",
                     section.id === selectedSection ? "bg-[#63636B]/40" : ""
                   )}
-                  onClick={() => setSelectedSection(section.id)}
+                  onClick={() => {
+                    gtagEvent("switch_settings_section", { "section": section.id });
+                    setSelectedSection(section.id);
+                  }}
                 >
                   <div className="flex items-center gap-2.5 text-sm">
                     <FontAwesomeIcon icon={section.icon} />

frontend/libs/components/settings-modal/tsconfig.json

@@ -32,6 +32,9 @@
     {
       "path": "../../tauri-api"
     },
+    {
+      "path": "../../analytics/google-analytics"
+    },
     {
       "path": "./tsconfig.lib.json"
     },

frontend/libs/components/settings-modal/tsconfig.lib.json

@@ -61,6 +61,9 @@
     {
       "path": "../../api/tsconfig.lib.json"
     },
+    {
+      "path": "../../analytics/google-analytics/tsconfig.lib.json"
+    },
     {
       "path": "../input/tsconfig.lib.json"
     },