added extra tracking

amykapernick · Feb 12, 2024 · 4718879 · 4718879
1 parent c05fe4b
commit 4718879
Show file tree

Hide file tree

Showing 12 changed files with 269 additions and 55 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/[[...sign-in]]/page.tsx b/src/app/[[...sign-in]]/page.tsx
@@ -1,4 +1,4 @@
-import { SignIn, SignedIn, SignedOut } from "@clerk/nextjs";
+import { SignIn, SignOutButton, SignedIn, SignedOut } from "@clerk/nextjs";
 import FetchGuest from "@components/parts/fetchGuest";
 
 export default async function Home ()
@@ -9,6 +9,9 @@ export default async function Home ()
 		<>
 			<SignedIn>
 				<FetchGuest />
+				<span className="signout">
+					<SignOutButton>Log Out</SignOutButton>
+				</span>
 			</SignedIn>
 			<SignedOut>
 				<h2 id="rsvp">RSVP</h2>

diff --git a/src/app/actions.ts b/src/app/actions.ts
@@ -3,6 +3,7 @@
 import { Client } from '@notionhq/client';
 import { Person } from '@ts/people';
 import * as Sentry from "@sentry/nextjs";
+import { trackEvent } from 'fathom-client';
 
 const notionFields: Record<string, string> = {
 	'age': '{"Age": {"rich_text": [{"type": "text", "text": {"content": "{{value}}"}}]}}',

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,10 +1,9 @@
 import { ClerkProvider } from '@clerk/nextjs'
 import Header from '@parts/header'
 import Footer from '@parts/footer'
+import Fathom from '@parts/fathom'
 import '@styles/app.css'
 
-
-
 export const metadata = {
 	title: `Daniel & Amy's Wedding`,
 	description: 'Daniel & Amy are getting married',
@@ -21,12 +20,12 @@ export default function RootLayout ({
 			<html lang="en-AU">
 				<head>
 					<title>{metadata.title}</title>
-					<script src="https://cdn.usefathom.com/script.js" data-site={process.env.NEXT_PUBLIC_FATHOM_SITE} defer></script>
 				</head>
 				<body>
 					<Header />
 					{children}
 					<Footer />
+					<Fathom />
 				</body>
 			</html>
 		</ClerkProvider>

diff --git a/src/app/registry/page.tsx b/src/app/registry/page.tsx
@@ -1,3 +1,4 @@
+import { SignOutButton } from "@clerk/nextjs";
 import FetchData from "@components/parts/fetchGifts";
 
 export default async function Registry ()
@@ -8,6 +9,9 @@ export default async function Registry ()
 		<>
 			<h2>Gift Registry</h2>
 			<FetchData />
+			<span className="signout">
+				<SignOutButton>Log Out</SignOutButton>
+			</span>
 		</>
 	)
 }
diff --git a/src/components/parts/fathom/index.tsx b/src/components/parts/fathom/index.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import { load, trackEvent, trackPageview } from "fathom-client"
+import { usePathname, useSearchParams } from "next/navigation"
+import { Suspense, useEffect } from "react"
+
+type EventTypes = 'Signed In' | 'Gift Claimed' | 'RSVP Form Submitted' | 'Initial RSVP'
+
+const TrackPageView = () =>
+{
+	const pathname = usePathname()
+	const searchParams = useSearchParams()
+
+	useEffect(() =>
+	{
+		load(process.env.NEXT_PUBLIC_FATHOM_SITE, {
+			includedDomains: [process.env.URL]
+		})
+	}, [])
+
+	useEffect(() =>
+	{
+		trackPageview()
+	}, [pathname, searchParams])
+
+	return null
+}
+
+export const TrackEvent = ({ name }: { name: EventTypes }) =>
+{
+	useEffect(() =>
+	{
+		load(process.env.NEXT_PUBLIC_FATHOM_SITE, {
+			includedDomains: [process.env.URL]
+		})
+	}, [])
+
+	useEffect(() =>
+	{
+		trackEvent(name)
+	}, [name])
+
+	return null
+}
+
+const Fathom = () =>
+{
+	return (
+		<Suspense fallback={null}>
+			<TrackPageView />
+		</Suspense>
+	)
+}
+
+export default Fathom
diff --git a/src/components/parts/fetchGifts/index.tsx b/src/components/parts/fetchGifts/index.tsx
@@ -4,6 +4,7 @@ import styles from './styles.module.css'
 import type { User } from "@clerk/nextjs/server";
 import { currentUser } from '@clerk/nextjs';
 import type { NotionGift } from '@ts/gifts'
+import { TrackEvent } from '../fathom';
 
 const FetchData = async () =>
 {
@@ -24,11 +25,14 @@ const FetchData = async () =>
 	const gifts: NotionGift[] = data.results
 
 	return (
-		<ul className={styles.gifts}>
-			{gifts.map((gift: NotionGift) => (
-				<Gift key={gift.id} {...gift} id={user && gift.id} />
-			))}
-		</ul>
+		<>
+			{user && <TrackEvent name="Signed In" />}
+			<ul className={styles.gifts}>
+				{gifts.map((gift: NotionGift) => (
+					<Gift key={gift.id} {...gift} id={user && gift.id} />
+				))}
+			</ul>
+		</>
 	)
 }
 

diff --git a/src/components/parts/fetchGuest/index.tsx b/src/components/parts/fetchGuest/index.tsx
@@ -4,6 +4,7 @@ import { currentUser } from '@clerk/nextjs';
 import type { NotionPerson, NotionGuest } from "@ts/people";
 import type { User } from "@clerk/nextjs/server";
 import Content from '@parts/details';
+import { TrackEvent } from "@parts/fathom";
 
 const { NotionToMarkdown } = require("notion-to-md");
 
@@ -38,16 +39,19 @@ const FetchData = async () =>
 	const pageData = await n2m.pageToMarkdown(process.env.CONTENT_ID ?? '');
 
 	return (
-		<Content data={n2m.toMarkdownString(pageData)?.parent}>
-			<Guest
-				people={people?.results as NotionPerson[]}
-				guest={{
-					id: guest?.id,
-					name: guest.properties.Name.title[0].plain_text,
-					status: guest.properties.Status.status.name
-				}}
-			/>
-		</Content>
+		<>
+			{emailAddresses[0].emailAddress.toLowerCase() && <TrackEvent name="Signed In" />}
+			<Content data={n2m.toMarkdownString(pageData)?.parent}>
+				<Guest
+					people={people?.results as NotionPerson[]}
+					guest={{
+						id: guest?.id,
+						name: guest.properties.Name.title[0].plain_text,
+						status: guest.properties.Status.status.name
+					}}
+				/>
+			</Content>
+		</>
 	)
 }