feat: add ga support (#190)

backend/app/site_settings/default_settings.yml

@@ -58,6 +58,11 @@ website:
     data_type: str
     description: "The link to the discord"
     client: true
+  ga_id:
+    default: ""
+    data_type: str
+    description: "Google Analytics ID"
+    client: true
 
 custom_js:
   custom_js_example_questions:

frontend/app/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.6.0",
+    "@next/third-parties": "^14.2.5",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-aspect-ratio": "^1.1.0",

frontend/app/src/api/site-settings.ts

@@ -41,6 +41,7 @@ export interface PublicWebsiteSettings {
   'custom_js_button_label': string;
   'custom_js_button_img_src': string;
   'custom_js_logo_src': string;
+  'ga_id': string | null;
 }
 
 const settingsItemSchema = z.object({

frontend/app/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import { getPublicSiteSettings } from '@/api/site-settings';
 import { RootProviders } from '@/app/RootProviders';
 import { auth } from '@/lib/auth';
+import { GoogleAnalytics } from '@next/third-parties/google';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
@@ -39,6 +40,7 @@ export default async function RootLayout ({
     <RootProviders me={me} settings={settings}>
       {children}
     </RootProviders>
+    {settings.ga_id && <GoogleAnalytics gaId={settings.ga_id} />}
     <Script async src="/widget.js" />
     </body>
     </html>

frontend/app/src/components/settings/WebsiteSettings.tsx

@@ -35,6 +35,10 @@ export function WebsiteSettings ({ schema }: { schema: AllSettings }) {
         <SettingsField name="social_twitter" item={schema.social_twitter} />
         <SettingsField name="social_discord" item={schema.social_discord} />
       </section>
+      <section className="space-y-4">
+        <h2 className="text-lg font-medium">Analytics</h2>
+        <SettingsField name="ga_id" item={schema.ga_id} />
+      </section>
     </div>
   );
 }