Change the approach to log GA4 events

Log events with Google Tag Manager instead of Google Analytics
dust-tt · Jan 22, 2025 · 1200509 · 1200509
1 parent 05a62e4
commit 1200509
Show file tree

Hide file tree

Showing 17 changed files with 88 additions and 156 deletions.
diff --git a/front/components/assistant/AssistantBrowser.tsx b/front/components/assistant/AssistantBrowser.tsx
@@ -26,7 +26,6 @@ import type {
 import { useRouter } from "next/router";
 import React, { useMemo, useState } from "react";
 
-import { useUser } from "@app/lib/swr/user";
 import { subFilter } from "@app/lib/utils";
 import { setQueryParam } from "@app/lib/utils/router";
 
@@ -73,7 +72,6 @@ export function AssistantBrowser({
   );
 
   const router = useRouter();
-  const { user } = useUser();
 
   const agentsByTab = useMemo(() => {
     const filteredAgents: LightAgentConfigurationType[] = agents
@@ -156,15 +154,9 @@ export function AssistantBrowser({
               variant="primary"
               icon={PlusIcon}
               label="Create"
+              data-gtm-label="assistantCreationButton"
+              data-gtm-location="homepage"
               size="sm"
-              onClick={() => {
-                // Track button click with Google Analytics including user ID
-                window.gtag("event", "assistantCreationButtonClicked", {
-                  event_category: "assistantBuilder",
-                  event_label: "homepage",
-                  user_id: user?.sId,
-                });
-              }}
             />
 
             {isBuilder && (
@@ -174,15 +166,9 @@ export function AssistantBrowser({
                 variant="primary"
                 icon={RobotIcon}
                 label="Manage"
+                data-gtm-label="assistantManagementButton"
+                data-gtm-location="homepage"
                 size="sm"
-                onClick={() => {
-                  // Track button click with Google Analytics including user ID
-                  window.gtag("event", "assistantManagementButtonClicked", {
-                    event_category: "assistantBuilder",
-                    event_label: "homepage",
-                    user_id: user?.sId,
-                  });
-                }}
               />
             )}
           </div>

diff --git a/front/components/assistant/AssistantDetailsButtonBar.tsx b/front/components/assistant/AssistantDetailsButtonBar.tsx
@@ -95,15 +95,10 @@ export function AssistantDetailsButtonBar({
               <>
                 <DropdownMenuItem
                   label="Duplicate (New)"
+                  data-gtm-label="assistantDuplicationButton"
+                  data-gtm-location="assistantDetails"
                   icon={ClipboardIcon}
                   onClick={async (e) => {
-                    window.gtag("event", "assistantDuplicationButtonClicked", {
-                      event_category: "assistantBuilder",
-                      event_label: "assistantDetails",
-                      assistant_name: agentConfiguration.name,
-                      assistant_id: agentConfiguration.sId,
-                      user_id: user?.sId,
-                    });
                     await router.push(
                       `/w/${owner.sId}/builder/assistants/new?flow=personal_assistants&duplicate=${agentConfiguration.sId}`
                     );

diff --git a/front/components/assistant/AssistantsTable.tsx b/front/components/assistant/AssistantsTable.tsx
@@ -31,7 +31,6 @@ import {
   assistantUsageMessage,
 } from "@app/components/assistant/Usage";
 import { SCOPE_INFO } from "@app/components/assistant_builder/Sharing";
-import { useUser } from "@app/lib/swr/user";
 import { classNames, formatTimestampToFriendlyDate } from "@app/lib/utils";
 
 export const ASSISTANT_MANAGER_TABS = [
@@ -254,7 +253,6 @@ export function AssistantsTable({
     open: false,
     agentConfiguration: undefined,
   });
-  const { user } = useUser();
   const router = useRouter();
   const rows: RowData[] = useMemo(
     () =>
@@ -292,6 +290,8 @@ export function AssistantsTable({
               ? [
                   {
                     label: "Edit",
+                    "data-gtm-label": "assistantEditButton",
+                    "data-gtm-location": "assistantDetails",
                     icon: PencilSquareIcon,
                     onClick: (e: React.MouseEvent) => {
                       e.stopPropagation();
@@ -308,6 +308,8 @@ export function AssistantsTable({
                   },
                   {
                     label: "Copy assistant ID",
+                    "data-gtm-label": "assistantCopyButton",
+                    "data-gtm-location": "assistantDetails",
                     icon: ClipboardIcon,
                     onClick: (e: React.MouseEvent) => {
                       e.stopPropagation();
@@ -318,27 +320,20 @@ export function AssistantsTable({
                   },
                   {
                     label: "Duplicate (New)",
+                    "data-gtm-label": "assistantDuplicationButton",
+                    "data-gtm-location": "assistantDetails",
                     icon: ClipboardIcon,
                     onClick: (e: React.MouseEvent) => {
                       e.stopPropagation();
-                      window.gtag(
-                        "event",
-                        "assistantDuplicationButtonClicked",
-                        {
-                          event_category: "assistantBuilder",
-                          event_label: "assistantsTable",
-                          assistant_name: agentConfiguration.name,
-                          assistant_id: agentConfiguration.sId,
-                          user_id: user?.sId,
-                        }
-                      );
                       void router.push(
                         `/w/${owner.sId}/builder/assistants/new?flow=personal_assistants&duplicate=${agentConfiguration.sId}`
                       );
                     },
                   },
                   {
                     label: "Delete",
+                    "data-gtm-label": "assistantDeletionButton",
+                    "data-gtm-location": "assistantDetails",
                     icon: TrashIcon,
                     variant: "warning",
                     onClick: (e: React.MouseEvent) => {
@@ -358,7 +353,6 @@ export function AssistantsTable({
       setShowDetails,
       setShowDisabledFreeWorkspacePopup,
       showDisabledFreeWorkspacePopup,
-      user?.sId,
     ]
   );
 

diff --git a/front/components/assistant/conversation/SidebarMenu.tsx b/front/components/assistant/conversation/SidebarMenu.tsx
@@ -36,7 +36,6 @@ import {
   useConversations,
   useDeleteConversation,
 } from "@app/lib/swr/conversations";
-import { useUser } from "@app/lib/swr/user";
 import { classNames, removeDiacritics, subFilter } from "@app/lib/utils";
 
 type AssistantSidebarMenuProps = {
@@ -53,7 +52,6 @@ type GroupLabel =
 
 export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
   const router = useRouter();
-  const { user } = useUser();
   const { conversationsNavigationRef } = useConversationsNavigation();
 
   const { setSidebarOpen } = useContext(SidebarContext);
@@ -253,23 +251,19 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
                   <DropdownMenuContent>
                     <DropdownMenuLabel>Assistants</DropdownMenuLabel>
                     <DropdownMenuItem
-                      label="Create new assistant"
                       href={`/w/${owner.sId}/builder/assistants/create`}
                       icon={PlusIcon}
-                      onClick={() => {
-                        window.gtag("event", "assistantCreationButtonClicked", {
-                          event_category: "assistantBuilder",
-                          event_label: "sidebarMenu",
-                          user_id: user?.sId,
-                          workspace_id: owner.sId,
-                        });
-                      }}
+                      label="Create new assistant"
+                      data-gtm-label="assistantCreationButton"
+                      data-gtm-location="sidebarMenu"
                     />
                     {isBuilder(owner) && (
                       <DropdownMenuItem
                         href={`/w/${owner.sId}/builder/assistants`}
-                        label="Manage assistants"
                         icon={RobotIcon}
+                        label="Manage assistants"
+                        data-gtm-label="assistantManagementButton"
+                        data-gtm-location="sidebarMenu"
                       />
                     )}
                     <DropdownMenuLabel>Conversations</DropdownMenuLabel>

diff --git a/front/components/assistant_builder/ActionsScreen.tsx b/front/components/assistant_builder/ActionsScreen.tsx
@@ -76,7 +76,6 @@ import {
   isDefaultActionName,
 } from "@app/components/assistant_builder/types";
 import { ACTION_SPECIFICATIONS } from "@app/lib/api/assistant/actions/utils";
-import { useUser } from "@app/lib/swr/user";
 
 const DATA_SOURCES_ACTION_CATEGORIES = [
   "RETRIEVAL_SEARCH",
@@ -157,16 +156,6 @@ export default function ActionsScreen({
   setAction,
   pendingAction,
 }: ActionScreenProps) {
-  const { user } = useUser();
-
-  useEffect(() => {
-    window.gtag("event", "panelNavigated", {
-      event_category: "assistantBuilder",
-      event_label: "assistantToolsPanel",
-      user_id: user?.sId,
-    });
-  }, [user?.sId]);
-
   const { spaces } = useContext(AssistantBuilderContext);
 
   const configurableActions = builderState.actions.filter(
@@ -371,12 +360,6 @@ export default function ActionsScreen({
               <div>
                 <AddAction
                   onAddAction={(action) => {
-                    window.gtag("event", "toolAdded", {
-                      event_category: "assistantBuilder",
-                      event_label: "toolsPanel",
-                      tool_type: action.type,
-                      user_id: user?.sId,
-                    });
                     setAction({
                       type: action.noConfigurationRequired
                         ? "insert"
@@ -1053,7 +1036,13 @@ function AddAction({ onAddAction }: AddActionProps) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="primary" label="Add a tool" icon={PlusIcon} />
+        <Button
+          variant="primary"
+          label="Add a tool"
+          data-gtm-label="toolAddingButton"
+          data-gtm-location="toolsPanel"
+          icon={PlusIcon}
+        />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent>

diff --git a/front/components/assistant_builder/AssistantBuilder.tsx b/front/components/assistant_builder/AssistantBuilder.tsx
@@ -67,7 +67,6 @@ import {
 } from "@app/components/sparkle/AppLayoutTitle";
 import { isUpgraded } from "@app/lib/plans/plan_codes";
 import { useKillSwitches } from "@app/lib/swr/kill";
-import { useUser } from "@app/lib/swr/user";
 
 function isValidTab(tab: string): tab is BuilderScreen {
   return BUILDER_SCREENS.includes(tab as BuilderScreen);
@@ -84,7 +83,6 @@ export default function AssistantBuilder({
   baseUrl,
   defaultTemplate,
 }: AssistantBuilderProps) {
-  const { user } = useUser();
   const router = useRouter();
   const sendNotification = useSendNotification();
 
@@ -314,12 +312,6 @@ export default function AssistantBuilder({
   );
 
   const onAssistantSave = async () => {
-    window.gtag("event", "assistantSaved", {
-      event_category: "assistantBuilder",
-      event_label: "assistantBuilder",
-      is_new: !agentConfigurationId, // track if it's a new assistant or an edit
-      user_id: user?.sId,
-    });
     // Redirect to the right screen if there are errors.
     if (instructionsError) {
       setScreen("instructions");
@@ -426,6 +418,8 @@ export default function AssistantBuilder({
                         value={tab.id}
                         label={tab.label}
                         icon={tab.icon}
+                        data-gtm-label={tab.dataGtm.label}
+                        data-gtm-location={tab.dataGtm.location}
                       />
                     ))}
                     <div className="flex w-full items-center justify-end">

diff --git a/front/components/assistant_builder/AssistantTemplateModal.tsx b/front/components/assistant_builder/AssistantTemplateModal.tsx
@@ -12,7 +12,6 @@ import Link from "next/link";
 import { ReadOnlyTextArea } from "@app/components/assistant/ReadOnlyTextArea";
 import type { BuilderFlow } from "@app/components/assistant_builder/types";
 import { useAssistantTemplate } from "@app/lib/swr/assistants";
-import { useUser } from "@app/lib/swr/user";
 
 interface AssistantTemplateModalProps {
   flow: BuilderFlow;
@@ -27,7 +26,6 @@ export function AssistantTemplateModal({
   owner,
   templateId,
 }: AssistantTemplateModalProps) {
-  const { user } = useUser();
   const { assistantTemplate, isAssistantTemplateLoading } =
     useAssistantTemplate({
       templateId,
@@ -67,18 +65,9 @@ export function AssistantTemplateModal({
                 <Button
                   label="Use this template"
                   variant="primary"
+                  data-gtm-label="useTemplateButton"
+                  data-gtm-location="templateModal"
                   size="sm"
-                  onClick={() => {
-                    window.gtag("event", "useTemplateButtonClicked", {
-                      event_category: "assistantBuilder",
-                      event_label: "templateModal",
-                      template_id: sId,
-                      template_handle: handle,
-                      user_id: user?.sId,
-                      workspace_id: owner.sId,
-                      flow: flow,
-                    });
-                  }}
                 />
               </Link>
             </div>

diff --git a/front/components/assistant_builder/InstructionScreen.tsx b/front/components/assistant_builder/InstructionScreen.tsx
@@ -60,7 +60,6 @@ import {
 } from "@app/lib/client/assistant_builder/instructions";
 import { useAgentConfigurationHistory } from "@app/lib/swr/assistants";
 import { useModels } from "@app/lib/swr/models";
-import { useUser } from "@app/lib/swr/user";
 import { classNames } from "@app/lib/utils";
 import { debounce } from "@app/lib/utils/debounce";
 
@@ -130,16 +129,6 @@ export function InstructionScreen({
   setDoTypewriterEffect: (doTypewriterEffect: boolean) => void;
   agentConfigurationId: string | null;
 }) {
-  const { user } = useUser();
-
-  useEffect(() => {
-    window.gtag("event", "panelNavigated", {
-      event_category: "assistantBuilder",
-      event_label: "assistantInstructionsPanel",
-      user_id: user?.sId,
-    });
-  }, [user?.sId]);
-
   const editor = useEditor({
     extensions: [
       Document,
@@ -163,12 +152,6 @@ export function InstructionScreen({
           ...state,
           instructions: plainText,
         }));
-
-        window.gtag("event", "assistantInstructionsEdited", {
-          event_category: "assistantBuilder",
-          event_label: "assistantInstructionsPanel",
-          user_id: user?.sId,
-        });
       }
     },
   });