add meta pixel

Author: codercatdev

app/(main)/layout.tsx

@@ -27,6 +27,7 @@ import PlayerFloating from "@/components/player-floating";
 import { PlayerProvider } from "@/components/player-context";
 import { toPlainText, VisualEditing } from "next-sanity";
 import { DisableDraftMode } from "@/components/disable-draft-mode";
+import MetaPixel from "./meta-pixel";
 
 const nunito = Nunito({
 	subsets: ["latin"],
@@ -94,6 +95,10 @@ export default async function RootLayout({
 					inter.variable,
 				)}
 			>
+				<SpeedInsights />
+				<MetaPixel />
+				<DisableDraftMode />
+				<VisualEditing />
 				<PlayerProvider>
 					<ThemeProvider
 						attribute="class"

app/(main)/meta-pixel.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { useEffect } from 'react'
+import { usePathname, useSearchParams } from 'next/navigation'
+
+// biome-ignore lint/style/noNonNullAssertion: <explanation>
+const FB_PIXEL_ID = process.env.NEXT_PUBLIC_FB_PIXEL_ID!;
+
+export default function MetaPixel() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  useEffect(() => {
+    import('react-facebook-pixel')
+      .then((x) => x.default)
+      .then((ReactPixel) => {
+        ReactPixel.init(FB_PIXEL_ID)
+        ReactPixel.pageView()
+      })
+  }, [])
+
+  useEffect(() => {
+    import('react-facebook-pixel')
+      .then((x) => x.default)
+      .then((ReactPixel) => {
+        ReactPixel.pageView()
+      })
+  }, [pathname, searchParams])
+
+  return null
+}

package.json

@@ -86,6 +86,7 @@
 		"react-day-picker": "^9.5.1",
 		"react-dom": "^18.3.1",
 		"react-dropzone": "^14.3.5",
+		"react-facebook-pixel": "^1.0.4",
 		"react-hook-form": "^7.54.2",
 		"react-icons": "^5.4.0",
 		"react-inlinesvg": "^4.1.8",
@@ -121,7 +122,10 @@
 	},
 	"pnpm": {
 		"peerDependencyRules": {
-			"allowAny": ["react", "react-dom"]
+			"allowAny": [
+				"react",
+				"react-dom"
+			]
 		}
 	}
 }