Add Google Analytics

sgcarstrends · Nov 2, 2023 · d928bd1 · d928bd1
1 parent 419370d
commit d928bd1
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 6 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1 @@
+NEXT_PUBLIC_GA_MEASUREMENT_ID=
diff --git a/.github/workflows/sst.yml b/.github/workflows/sst.yml
@@ -12,6 +12,8 @@ permissions:
 jobs:
   DeployApp:
     runs-on: ubuntu-latest
+    env:
+      NEXT_PUBLIC_GOOGLE_ANALYTICS: ${{ vars.NEXT_PUBLIC_GOOGLE_ANALYTICS }}
     steps:
       - name: Git clone the repository
         uses: actions/checkout@v3

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,4 +1,6 @@
 import type { Metadata } from "next";
+import { headers } from "next/headers";
+import Script from "next/script";
 import { Inter } from "next/font/google";
 import "./globals.css";
 
@@ -10,14 +12,28 @@ export const metadata: Metadata = {
     "Stay ahead of the electric vehicle (EV) revolution in Singapore with the latest Singapore EV trends. Discover the future of sustainable transportation, charging infrastructure, government incentives, and more. Explore how Singapore is driving the shift towards eco-friendly mobility. Stay informed and make informed choices with Singapore EV Trends.",
 };
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+const RootLayout = ({ children }: { children: React.ReactNode }) => {
+  const nonce = headers().get("x-nonce") as string;
+  const gaMeasurementId = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID;
+
   return (
     <html lang="en">
+      <Script
+        src={`https://www.googletagmanager.com/gtag/js?id=${gaMeasurementId}`}
+        nonce={nonce}
+      />
+      <Script id="google-analytics" nonce={nonce}>
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+ 
+          gtag('config', '${gaMeasurementId}');
+        `}
+      </Script>
       <body className={inter.className}>{children}</body>
     </html>
   );
-}
+};
+
+export default RootLayout;
diff --git a/env.d.ts b/env.d.ts
@@ -0,0 +1,5 @@
+namespace NodeJS {
+  interface ProcessEnv {
+    [key: string]: string;
+  }
+}