feat(ads): track Google Ads

gregberge · gregberge · commit 297683542816 · 2024-05-25T17:10:09.000+02:00
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,8 +1,10 @@
+import { GoogleTagManager } from "@next/third-parties/google";
 import clsx from "clsx";
 import { Metadata } from "next";
 import PlausibleProvider from "next-plausible";
 import { Inter } from "next/font/google";
 import localFont from "next/font/local";
+import { Suspense } from "react";
 
 import { TooltipProvider } from "@/components/Tooltip";
 import "@/styles/globals.css";
@@ -11,6 +13,7 @@ import "@/styles/highlight-js-github-dark.min.css";
 import { ClientProviders } from "./client-providers";
 import { AppFooter } from "./footer";
 import { AppNavbar } from "./navbar";
+import { NavigationEvents } from "./navigation-events";
 
 // Fonts
 const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
@@ -57,6 +60,7 @@ export default function RootLayout({
       className={clsx(inter.variable, calSans.variable, "antialiased")}
       suppressHydrationWarning
     >
+      <GoogleTagManager gtmId="AW-847457408" />
       <head>
         <PlausibleProvider domain="argos-ci.com" />
       </head>
@@ -70,6 +74,9 @@ export default function RootLayout({
             </div>
           </TooltipProvider>
         </ClientProviders>
+        <Suspense fallback={null}>
+          <NavigationEvents />
+        </Suspense>
       </body>
     </html>
   );
diff --git a/app/navigation-events.tsx b/app/navigation-events.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { sendGTMEvent } from "@next/third-parties/google";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+
+export function NavigationEvents() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    sendGTMEvent({
+      event: "conversion",
+      send_to: "AW-847457408/e6s6CMGhwe8YEIDZjJQD",
+    });
+  }, [pathname, searchParams]);
+
+  return null;
+}
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
     "@next/mdx": "^14.2.3",
+    "@next/third-parties": "^14.2.3",
     "@openstatus/react": "^0.0.3",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dialog": "^1.0.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
