diff --git a/src/components/TransformWorkflow/FlowEditor/Components/Canvas.tsx b/src/components/TransformWorkflow/FlowEditor/Components/Canvas.tsx index a6956de9..526b8b18 100644 --- a/src/components/TransformWorkflow/FlowEditor/Components/Canvas.tsx +++ b/src/components/TransformWorkflow/FlowEditor/Components/Canvas.tsx @@ -46,6 +46,7 @@ import { import { usePreviewAction } from '@/contexts/FlowEditorPreviewContext'; import { getNextNodePosition } from '@/utils/editor'; import { KeyboardArrowDown } from '@mui/icons-material'; +import { useTracking } from '@/contexts/TrackingContext'; type CanvasProps = { redrawGraph: boolean; @@ -134,12 +135,13 @@ const CanvasHeader = ({ finalLockCanvas }: { finalLockCanvas: boolean }) => { const globalContext = useContext(GlobalContext); const permissions = globalContext?.Permissions.state || []; const [selectedAction, setSelectedAction] = useState(''); - + const trackAmplitudeEvent: any = useTracking(); const nodeData: any = canvasNode?.data; const handleRunClick = (event: any) => { const action = event.target.value; setSelectedAction(action); + trackAmplitudeEvent(`[${WorkflowValues[action]}] Button Clicked`); if (action === 'run') { setCanvasAction({ type: 'run-workflow', data: null }); } else if (action === 'run-to-node') { diff --git a/src/contexts/TrackingContext.tsx b/src/contexts/TrackingContext.tsx index 773e2d90..b938fb0d 100644 --- a/src/contexts/TrackingContext.tsx +++ b/src/contexts/TrackingContext.tsx @@ -2,49 +2,64 @@ import React, { createContext, useContext, useEffect, useState } from 'react'; import * as amplitude from '@amplitude/analytics-browser'; import { GlobalContext } from '@/contexts/ContextProvider'; import { useRouter } from 'next/router'; +import { useSession } from 'next-auth/react'; const amplitudeApiKey = process.env.NEXT_PUBLIC_AMPLITUDE_ENV!; - const TrackingContext = createContext( (eventName: string, additionalData: Record = {}) => {} ); - -export const TrackingProvider = ({ session, children }: any) => { +// so login, invitations and resetpassword have dynamic url, due to different token, we want a same event for all those. +function extractPath(url: string) { + const validPaths = ['login', 'invitations', 'resetpassword']; //add dynamic paths here. + const regex = /^\/([^?]+)/; + const match = url.match(regex); + if (match) { + const path = match[1]; + if (validPaths.includes(path)) { + return `/${path}`; + } + } + return url; +} +export const TrackingProvider = ({ children }: any) => { + const { data: session } = useSession(); const router = useRouter(); const globalContext = useContext(GlobalContext); const [eventProperties, setEventProperties] = useState({}); useEffect(() => { + if (!amplitudeApiKey) return; amplitude.init(amplitudeApiKey, { defaultTracking: { - pageViews: false, + pageViews: true, sessions: true, attribution: true, formInteractions: true, }, }); if (session?.user?.email) { - const userEmail = session?.user.email; + const userEmail: string = session.user.email; + const ist4dMember = userEmail.includes('projecttech4dev.org') + ? true + : false; // a field to check if a user is t4d member. const identifyEvent = new amplitude.Identify(); - amplitude.setUserId(session?.user.email); - identifyEvent.set('User_id', session.user?.email); - amplitude.setUserId(userEmail); + amplitude.setUserId(session.user.email); + identifyEvent.setOnce('ist4dMember', ist4dMember); amplitude.identify(identifyEvent); } }, [session?.user?.email]); useEffect(() => { + if (!amplitudeApiKey) return; if (globalContext?.CurrentOrg) { - const identifyEvent = new amplitude.Identify(); - identifyEvent.set('User_orgs', globalContext.CurrentOrg.state.name); - amplitude.identify(identifyEvent); - setEventProperties({ userCurrentOrg: globalContext.CurrentOrg.state.name, userEmail: session?.user?.email, page_domain: window.location.hostname, page_location: window.location.href, - page_path: window.location.pathname + window.location.search, + page_path: extractPath( + window.location.pathname + window.location.search + ), page_title: document.title, page_url: window.location.href, referrer: document.referrer, @@ -60,7 +75,9 @@ export const TrackingProvider = ({ session, children }: any) => { userEmail: session?.user?.email, page_domain: window.location.hostname, page_location: window.location.href, - page_path: window.location.pathname + window.location.search, + page_path: extractPath( + window.location.pathname + window.location.search + ), page_title: document.title, page_url: window.location.href, referrer: document.referrer, @@ -71,6 +88,13 @@ export const TrackingProvider = ({ session, children }: any) => { ); } }, [router.pathname, session, globalContext?.CurrentOrg]); + useEffect(() => { + if (globalContext?.CurrentOrg) { + const identifyEvent = new amplitude.Identify(); + identifyEvent.preInsert('User_orgs', globalContext.CurrentOrg.state.name); + amplitude.identify(identifyEvent); + } + }, [globalContext?.CurrentOrg]); const trackEvent = ( eventName: string, additionalData: Record = {} diff --git a/src/pages/analysis/index.tsx b/src/pages/analysis/index.tsx index 0ef86f3f..b5e7df68 100644 --- a/src/pages/analysis/index.tsx +++ b/src/pages/analysis/index.tsx @@ -60,7 +60,7 @@ export default function Analysis() { return ( <> - + {globalContext?.CurrentOrg?.state?.viz_url && (