add gtag

app/_providers/index.tsx

@@ -6,6 +6,7 @@ import useRouteChange from "@/lib/hooks/useRouteChange";
 import { NDKProvider } from "./ndk";
 import SignerProvider from "./signer";
 import { RELAYS } from "@/constants";
+import { GoogleAnalyticsInit } from "@/lib/analytics";
 
 export function Providers({ children }: { children: React.ReactNode }) {
   const handleRouteChange = (url: string) => {
@@ -24,6 +25,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
           <ModalProvider>{children}</ModalProvider>
         </SignerProvider>
       </NDKProvider>
+      <GoogleAnalyticsInit />
     </>
   );
 }

lib/analytics/InitScript.tsx

@@ -0,0 +1,22 @@
+import Script from "next/script";
+
+export default function Init() {
+  return (
+    <>
+      <Script
+        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`}
+        strategy="lazyOnload"
+      />
+      <Script id="google-analytics" strategy="lazyOnload">
+        {`
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${process.env.NEXT_PUBLIC_GA_TRACKING_ID}', {
+              page_path: window.location.pathname,
+            });
+        `}
+      </Script>
+    </>
+  );
+}

lib/analytics/index.ts

@@ -0,0 +1 @@
+export { default as GoogleAnalyticsInit } from "./InitScript";