add gtag

alii · Sep 3, 2024 · 8aa9697 · 8aa9697
1 parent a11cf73
commit 8aa9697
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 36 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
 	},
 	"dependencies": {
 		"@marsidev/react-turnstile": "^0.7.2",
+		"@next/third-parties": "^14.2.7",
 		"@otters/monzo": "^2.1.2",
 		"alistair": "^1.11.0",
 		"bwitch": "^0.3.0",

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,5 +1,6 @@
 import '../globals.css';
 
+import {GoogleAnalytics} from '@next/third-parties/google';
 import type {AppProps} from 'next/app';
 import {Inter, Newsreader} from 'next/font/google';
 import Head from 'next/head';
@@ -18,6 +19,8 @@ const body = Inter({
 	subsets: ['latin'],
 });
 
+const tag = process.env.NEXT_PUBLIC_GTM_ID;
+
 export default function App({Component, pageProps}: AppProps) {
 	useFirstEverLoad();
 
@@ -47,6 +50,8 @@ export default function App({Component, pageProps}: AppProps) {
 			<Component {...pageProps} />
 
 			<Toaster />
+
+			{tag && <GoogleAnalytics gaId={tag} />}
 		</>
 	);
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -95,6 +95,42 @@ export default function Home(props: Props) {
 					]}
 				/>
 
+				<MessageGroup
+					messages={[
+						{
+							key: 'blog-intro',
+							content: (
+								<div className="px-3 py-2">
+									I try to write a blog post every now and then. I do OK at that. Everything is on{' '}
+									<Link
+										className="nice-underline-neutral-400 dark:nice-underline-neutral-200/50"
+										href="https://alistair.blog"
+									>
+										alistair.blog
+									</Link>
+									, but the most recent three are below
+								</div>
+							),
+						},
+
+						...props.recentBlogPosts.map(post => ({
+							key: post.slug,
+							content: (
+								<Link
+									href={`https://alistair.blog/${post.slug}`}
+									key={post.slug}
+									className="group block w-fit min-w-[300px] overflow-hidden px-3 py-2"
+								>
+									<h2 className="font-serif text-base font-bold group-hover:text-lime-600 dark:group-hover:text-lime-400">
+										{post.name}
+									</h2>
+									<p>{post.excerpt}</p>
+								</Link>
+							),
+						})),
+					]}
+				/>
+
 				<MessageGroup
 					messages={[
 						...(lanyard.spotify
@@ -197,42 +233,6 @@ export default function Home(props: Props) {
 					]}
 				/>
 
-				<MessageGroup
-					messages={[
-						{
-							key: 'blog-intro',
-							content: (
-								<div className="px-3 py-2">
-									I try to write a blog post every now and then. I do OK at that. Everything is on{' '}
-									<Link
-										className="nice-underline-neutral-400 dark:nice-underline-neutral-200/50"
-										href="https://alistair.blog"
-									>
-										alistair.blog
-									</Link>
-									, but the most recent three are below
-								</div>
-							),
-						},
-
-						...props.recentBlogPosts.map(post => ({
-							key: post.slug,
-							content: (
-								<Link
-									href={`https://alistair.blog/${post.slug}`}
-									key={post.slug}
-									className="group block w-fit min-w-[300px] overflow-hidden px-3 py-2"
-								>
-									<h2 className="font-serif text-base font-bold group-hover:text-lime-600 dark:group-hover:text-lime-400">
-										{post.name}
-									</h2>
-									<p>{post.excerpt}</p>
-								</Link>
-							),
-						})),
-					]}
-				/>
-
 				<MessageGroup
 					messages={[
 						{