Refactor analytics to use Rybbit instead of Umami (#9072)

BramSuurdje · web-flow · commit 17354ca011b8 · 2025-11-12T07:38:16.000+01:00
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import { Inter } from "next/font/google";
+import Script from "next/script";
 import React from "react";
 
 import { ThemeProvider } from "@/components/theme-provider";
@@ -95,12 +96,16 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
-        <script defer src={`https://${analytics.url}/script.js`} data-website-id={analytics.token}></script>
         <link rel="canonical" href={metadata.metadataBase?.href} />
         <link rel="manifest" href="manifest.webmanifest" />
         <link rel="preconnect" href="https://api.github.com" />
       </head>
       <body className={inter.className}>
+        <Script
+          src={`https://${analytics.url}/api/script.js`}
+          data-site-id={analytics.token}
+          strategy="afterInteractive"
+        />
         <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
           <div className="flex w-full flex-col justify-center">
             <NuqsAdapter>
diff --git a/frontend/src/config/site-config.tsx b/frontend/src/config/site-config.tsx
@@ -46,7 +46,7 @@ export const mostPopularScripts = ["post-pve-install", "docker", "homeassistant"
 
 export const analytics = {
   url: "analytics.bramsuurd.nl",
-  token: "aefee1b9-2a12-4ac2-9d82-a63113edc62e",
+  token: "f9eee289f931",
 };
 
 export const AlertColors = {
