diff --git a/components/molecules/FilterHeader/filter-header.tsx b/components/molecules/FilterHeader/filter-header.tsx index 95b16f6829..771cbe7658 100644 --- a/components/molecules/FilterHeader/filter-header.tsx +++ b/components/molecules/FilterHeader/filter-header.tsx @@ -6,24 +6,28 @@ import ContextThumbnail from "components/atoms/ContextThumbnail/context-thumbnai import SuperativeSelector from "components/molecules/SuperlativeSelector/superlative-selector"; import useFilterOptions from "lib/hooks/useFilterOptions"; -import { useAnalytics } from "lib/utils/analytics"; +import { captureAnalytics } from "lib/utils/analytics"; import useFilterPrefetch from "lib/hooks/useFilterPrefetch"; import topicNameFormatting from "lib/utils/topic-name-formatting"; import FilterCardSelect from "components/molecules/FilterCardSelect/filter-card-select"; import getTopicThumbnail from "lib/utils/getTopicThumbnail"; import { interestsType } from "lib/utils/getInterestOptions"; import { getInterestOptions } from "lib/utils/getInterestOptions"; +import useSupabaseAuth from "lib/hooks/useSupabaseAuth"; +import { useFetchUser } from "lib/hooks/useFetchUser"; const HeaderFilter = () => { const router = useRouter(); - const { captureAnalytics } = useAnalytics(); const filterOptions = useFilterOptions(); const topicOptions = getInterestOptions(); const { filterValues } = useFilterPrefetch(); const { filterName, toolName, selectedFilter } = router.query; + const { user } = useSupabaseAuth(); + const { data: userInfo } = useFetchUser(user?.user_metadata.user_name); + const filterBtnRouting = (filter: string) => { - captureAnalytics({ title: "Filters", property: "toolsFilter", value: `${filter} applied` }); + captureAnalytics({ title: "Filters", property: "toolsFilter", value: `${filter} applied`, userInfo }); return router.push(`/${filterName}/${toolName}/filter/${filter.toLocaleLowerCase()}`); }; diff --git a/components/organisms/ToolsDisplay/tools-display.tsx b/components/organisms/ToolsDisplay/tools-display.tsx index b0379bf986..376573680e 100644 --- a/components/organisms/ToolsDisplay/tools-display.tsx +++ b/components/organisms/ToolsDisplay/tools-display.tsx @@ -1,6 +1,8 @@ -import React from "react"; -import { useAnalytics } from "lib/utils/analytics"; +import React, { useEffect } from "react"; +import { captureAnalytics } from "lib/utils/analytics"; import useSession from "lib/hooks/useSession"; +import useSupabaseAuth from "lib/hooks/useSupabaseAuth"; +import { useFetchUser } from "lib/hooks/useFetchUser"; import Contributors from "../Contributors/contributors"; import Dashboard from "../Dashboard/dashboard"; import Reports from "../Reports/reports"; @@ -13,9 +15,16 @@ interface ToolProps { const Tool = ({ tool, repositories }: ToolProps): JSX.Element => { const { hasReports, waitlisted } = useSession(); - const { captureAnalytics } = useAnalytics(); + const { user } = useSupabaseAuth(); + const { data: userInfo, isLoading } = useFetchUser(user?.user_metadata.user_name); - captureAnalytics({ title: "Tools Display", property: "tools", value: `${tool} selected` }); + useEffect(() => { + if (isLoading) { + return; + } + + captureAnalytics({ title: "Tools Display", property: "tools", value: `${tool} selected`, userInfo }); + }, [tool, userInfo, isLoading]); switch (tool) { case "Dashboard": diff --git a/lib/utils/analytics.ts b/lib/utils/analytics.ts index 6819aad649..df4a53fb99 100644 --- a/lib/utils/analytics.ts +++ b/lib/utils/analytics.ts @@ -1,10 +1,10 @@ import posthog from "posthog-js"; -import useSupabaseAuth from "lib/hooks/useSupabaseAuth"; interface AnalyticEvent { title: string; property: string; value: string; + userInfo: DbUser | undefined; } function initiateAnalytics() { @@ -15,27 +15,29 @@ function initiateAnalytics() { /** * Captures an analytic event * - * @param {string} title - The title of the event - * @param {string} property - The property of the event - * @param {string} value - The value of the event + * @param title - The title of the event + * @param property - The property of the event + * @param value - The value of the event + * @param userInfo - The user info for the currently logged in user. Undefined if no user is logged in. + * */ -function useAnalytics() { - const { user } = useSupabaseAuth(); +async function captureAnalytics({ title, property, value, userInfo }: AnalyticEvent) { + const analyticsObject: Record = {}; + + analyticsObject[property] = value; - return { - captureAnalytics({ title, property, value }: AnalyticEvent) { - const analyticsObject: Record = {}; + // if a user is not logged in, Posthog will generate an anonymous ID + if (userInfo) { + let userProperties = {}; - analyticsObject[property] = value; + const { company, coupon_code, is_open_sauced_member, is_onboarded, role } = userInfo; - // if a user is not logged in, Posthog will generate an anonymous ID - if (user) { - posthog.identify(user.user_metadata.sub); - } + // A pro user is anyone with a role of 50 or higher + userProperties = { company, coupon_code, is_open_sauced_member, is_onboarded, is_pro_user: role >= 50 }; + posthog.identify(`${userInfo.id}`, userProperties); + } - posthog.capture(title, analyticsObject); - }, - }; + posthog.capture(title, analyticsObject); } -export { initiateAnalytics, useAnalytics }; +export { initiateAnalytics, captureAnalytics }; diff --git a/pages/start.tsx b/pages/start.tsx index a93a512e0d..75309b36cc 100644 --- a/pages/start.tsx +++ b/pages/start.tsx @@ -25,7 +25,7 @@ import Button from "components/atoms/Button/button"; import useSupabaseAuth from "lib/hooks/useSupabaseAuth"; import { setQueryParams } from "lib/utils/query-params"; import useSession from "lib/hooks/useSession"; -import { useAnalytics } from "lib/utils/analytics"; +import { captureAnalytics } from "lib/utils/analytics"; import useStore from "lib/store"; import { getInterestOptions } from "lib/utils/getInterestOptions"; @@ -33,6 +33,7 @@ import LanguagePill from "components/atoms/LanguagePill/LanguagePill"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "components/atoms/Select/select"; import { timezones } from "lib/utils/timezones"; +import { useFetchUser } from "lib/hooks/useFetchUser"; type handleLoginStep = () => void; type stepKeys = "1" | "2" | "3"; @@ -45,13 +46,20 @@ interface LoginStep1Props { } const LoginStep1: React.FC = ({ user }) => { - const { captureAnalytics } = useAnalytics(); + const { data: userInfo, isLoading } = useFetchUser(user?.user_metadata.user_name); - captureAnalytics({ - title: "User Onboarding", - property: "onboardingStep1", - value: "visited", - }); + useEffect(() => { + if (isLoading) { + return; + } + + captureAnalytics({ + title: "User Onboarding", + property: "onboardingStep1", + value: "visited", + userInfo, + }); + }, [userInfo, isLoading]); const router = useRouter(); const { onboarded } = useSession(); @@ -121,15 +129,23 @@ interface LoginStep2Props { } const LoginStep2: React.FC = ({ handleUpdateInterests: handleUpdateInterestsParent }) => { - const { captureAnalytics } = useAnalytics(); const [selectedInterests, setSelectedInterests] = useState([]); const interestArray = getInterestOptions(); + const { user } = useSupabaseAuth(); + const { data: userInfo, isLoading } = useFetchUser(user?.user_metadata.user_name); - captureAnalytics({ - title: "User Onboarding", - property: "onboardingStep2", - value: "visited", - }); + useEffect(() => { + if (isLoading) { + return; + } + + captureAnalytics({ + title: "User Onboarding", + property: "onboardingStep2", + value: "visited", + userInfo, + }); + }, [userInfo, isLoading]); const handleSelectInterest = (interest: string) => { if (selectedInterests.length > 0 && selectedInterests.includes(interest)) { @@ -186,13 +202,21 @@ interface LoginStep3Props { } const LoginStep3: React.FC = ({ interests, user }) => { - const { captureAnalytics } = useAnalytics(); + const { data: userInfo, isLoading } = useFetchUser(user?.user_metadata.user_name); + + useEffect(() => { + if (isLoading) { + return; + } + + captureAnalytics({ + title: "User Onboarding", + property: "onboardingStep3", + value: "visited", + userInfo, + }); + }, [userInfo, isLoading]); - captureAnalytics({ - title: "User Onboarding", - property: "onboardingStep3", - value: "visited", - }); const store = useStore(); const router = useRouter(); const { sessionToken } = useSupabaseAuth();