From 1200509bfb5eb71074d108557790995c59b72436 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o=20Vanneufville?= Date: Wed, 22 Jan 2025 17:23:01 +0100 Subject: [PATCH] Change the approach to log GA4 events Log events with Google Tag Manager instead of Google Analytics --- .../components/assistant/AssistantBrowser.tsx | 22 ++-------- .../assistant/AssistantDetailsButtonBar.tsx | 9 +--- .../components/assistant/AssistantsTable.tsx | 22 ++++------ .../assistant/conversation/SidebarMenu.tsx | 18 +++----- .../assistant_builder/ActionsScreen.tsx | 25 ++++------- .../assistant_builder/AssistantBuilder.tsx | 10 +---- .../AssistantTemplateModal.tsx | 15 +------ .../assistant_builder/InstructionScreen.tsx | 17 -------- .../assistant_builder/NamingScreen.tsx | 21 ---------- .../assistant_builder/PrevNextButtons.tsx | 4 ++ .../components/assistant_builder/Sharing.tsx | 2 + front/components/assistant_builder/types.ts | 16 ++++++++ front/components/sparkle/AppLayout.tsx | 41 +++++++++++-------- front/global.d.ts | 1 + .../w/[wId]/builder/assistants/create.tsx | 13 +----- .../w/[wId]/builder/assistants/index.tsx | 4 ++ sparkle/src/components/Dropdown.tsx | 4 +- 17 files changed, 88 insertions(+), 156 deletions(-) diff --git a/front/components/assistant/AssistantBrowser.tsx b/front/components/assistant/AssistantBrowser.tsx index a443cbdcda1a..6a0f873b1b2b 100644 --- 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, - }); - }} /> )} diff --git a/front/components/assistant/AssistantDetailsButtonBar.tsx b/front/components/assistant/AssistantDetailsButtonBar.tsx index f53529d2b5ac..761c111f2e65 100644 --- a/front/components/assistant/AssistantDetailsButtonBar.tsx +++ b/front/components/assistant/AssistantDetailsButtonBar.tsx @@ -95,15 +95,10 @@ export function AssistantDetailsButtonBar({ <> { - 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 index 4cc89f3d8b42..fca16274bd86 100644 --- 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,20 +320,11 @@ 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}` ); @@ -339,6 +332,8 @@ export function AssistantsTable({ }, { 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 index 176bf1d63306..4d994f519460 100644 --- 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) { Assistants { - 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) && ( )} Conversations diff --git a/front/components/assistant_builder/ActionsScreen.tsx b/front/components/assistant_builder/ActionsScreen.tsx index 109ce2652209..f51b024df49b 100644 --- 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({
{ - 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 ( -
diff --git a/front/components/assistant_builder/InstructionScreen.tsx b/front/components/assistant_builder/InstructionScreen.tsx index 512900c4d1fa..85110c3afc9a 100644 --- 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, - }); } }, }); diff --git a/front/components/assistant_builder/NamingScreen.tsx b/front/components/assistant_builder/NamingScreen.tsx index 953783f56c28..b0ffcda9bdba 100644 --- a/front/components/assistant_builder/NamingScreen.tsx +++ b/front/components/assistant_builder/NamingScreen.tsx @@ -36,7 +36,6 @@ import { } from "@app/components/assistant_builder/shared"; import type { AssistantBuilderState } from "@app/components/assistant_builder/types"; import { ConfirmContext } from "@app/components/Confirm"; -import { useUser } from "@app/lib/swr/user"; import { debounce } from "@app/lib/utils/debounce"; export function removeLeadingAt(handle: string) { @@ -148,15 +147,6 @@ export default function NamingScreen({ assistantHandleError: string | null; descriptionError: string | null; }) { - const { user } = useUser(); - - useEffect(() => { - window.gtag("event", "panelNavigated", { - event_category: "assistantBuilder", - event_label: "assistantNamingPanel", - user_id: user?.sId, - }); - }, [user?.sId]); const confirm = useContext(ConfirmContext); const sendNotification = useSendNotification(); const [isAvatarModalOpen, setIsAvatarModalOpen] = useState(false); @@ -399,12 +389,6 @@ export default function NamingScreen({ ...state, handle: e.target.value.trim(), })); - - window.gtag("event", "assistantNameEdited", { - event_category: "assistantBuilder", - event_label: "assistantNamingPanel", - user_id: user?.sId, - }); }} name="assistantName" className="text-sm" @@ -452,11 +436,6 @@ export default function NamingScreen({ ...state, description: e.target.value, })); - window.gtag("event", "assistantDescriptionEdited", { - event_category: "assistantBuilder", - event_label: "assistantNamingPanel", - user_id: user?.sId, - }); }} name="assistantDescription" message={descriptionError} diff --git a/front/components/assistant_builder/PrevNextButtons.tsx b/front/components/assistant_builder/PrevNextButtons.tsx index 79715a446303..103e05371012 100644 --- a/front/components/assistant_builder/PrevNextButtons.tsx +++ b/front/components/assistant_builder/PrevNextButtons.tsx @@ -21,6 +21,8 @@ export function PrevNextButtons({ label="Previous" size="md" variant="primary" + data-gtm-label="prevButton" + data-gtm-location="assistantBuilder" onClick={() => { const newScreen = screen === "actions" ? "instructions" : "actions"; setScreen(newScreen); @@ -34,6 +36,8 @@ export function PrevNextButtons({ label="Next" size="md" variant="primary" + data-gtm-label="nextButton" + data-gtm-location="assistantBuilder" onClick={() => { const newScreen = screen === "instructions" ? "actions" : "naming"; setScreen(newScreen); diff --git a/front/components/assistant_builder/Sharing.tsx b/front/components/assistant_builder/Sharing.tsx index 766949681f5d..112320eb2bbf 100644 --- a/front/components/assistant_builder/Sharing.tsx +++ b/front/components/assistant_builder/Sharing.tsx @@ -184,6 +184,8 @@ export function SharingButton({ icon={ArrowUpOnSquareIcon} variant="outline" isSelect + data-gtm-label="sharingButton" + data-gtm-location="assistantBuilder" onClick={() => setIsPopoverOpen(!isPopoverOpen)} /> diff --git a/front/components/assistant_builder/types.ts b/front/components/assistant_builder/types.ts index 34b82a27a6d3..ec83e82c469b 100644 --- a/front/components/assistant_builder/types.ts +++ b/front/components/assistant_builder/types.ts @@ -366,6 +366,10 @@ type BuilderScreenInfos = { id: string; label: string; icon: (props: SVGProps) => React.JSX.Element; + dataGtm: { + label: string; + location: string; + }; }; export const BUILDER_SCREENS_INFOS: Record = @@ -373,16 +377,28 @@ export const BUILDER_SCREENS_INFOS: Record = instructions: { id: "instructions", label: "Instructions", + dataGtm: { + label: "assistantInstructionsButton", + location: "assistantBuilder", + }, icon: CircleIcon, }, actions: { id: "actions", label: "Tools & Data sources", + dataGtm: { + label: "assistantToolsButton", + location: "assistantBuilder", + }, icon: SquareIcon, }, naming: { id: "naming", label: "Naming", + dataGtm: { + label: "assistantNamingButton", + location: "assistantBuilder", + }, icon: TriangleIcon, }, }; diff --git a/front/components/sparkle/AppLayout.tsx b/front/components/sparkle/AppLayout.tsx index 34ba67321e92..3b720c1ce665 100644 --- a/front/components/sparkle/AppLayout.tsx +++ b/front/components/sparkle/AppLayout.tsx @@ -60,6 +60,16 @@ export default function AppLayout({ setLoaded(true); }, []); + useEffect(() => { + if (typeof window !== "undefined" && user?.sId) { + window.dataLayer = window.dataLayer || []; + window.dataLayer.push({ + user_id: user.sId, + event: "userIdentified", + }); + } + }, [user?.sId]); + return ( <> @@ -114,6 +124,7 @@ export default function AppLayout({ content="width=device-width, initial-scale=1, maximum-scale=1" /> +
+ - <> - - +