From 1151766da6f0abbd499936919445360f6709f6ba Mon Sep 17 00:00:00 2001
From: oiov <stacystayfine718@gmail.com>
Date: Tue, 30 Jul 2024 18:55:57 +0800
Subject: [PATCH] add google gats

---
 .env.example                         |  4 ++-
 app/GoogleAnalytics.tsx              | 37 ++++++++++++++++++++++++++++
 app/layout.tsx                       |  3 +++
 components/layout/mobile-nav.tsx     | 10 --------
 components/sections/hero-landing.tsx |  1 +
 config/docs.ts                       | 20 +++++++--------
 content/docs/index.mdx               |  2 +-
 gtag.js                              | 15 +++++++++++
 8 files changed, 70 insertions(+), 22 deletions(-)
 create mode 100644 app/GoogleAnalytics.tsx
 create mode 100644 gtag.js

diff --git a/.env.example b/.env.example
index 63b44e3..2be6527 100644
--- a/.env.example
+++ b/.env.example
@@ -35,4 +35,6 @@ NEXT_PUBLIC_FREE_RECORD_QUOTA=3
 NEXT_PUBLIC_FREE_URL_QUOTA=100
 
 # Open Signup
-NEXT_PUBLIC_OPEN_SIGNUP=1
\ No newline at end of file
+NEXT_PUBLIC_OPEN_SIGNUP=1
+
+NEXT_PUBLIC_GOOGLE_ID=
\ No newline at end of file
diff --git a/app/GoogleAnalytics.tsx b/app/GoogleAnalytics.tsx
new file mode 100644
index 0000000..b3cb9a6
--- /dev/null
+++ b/app/GoogleAnalytics.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import Script from "next/script";
+import * as gtag from "../gtag.js";
+
+const GoogleAnalytics = () => {
+  return (
+    <>
+      {gtag.GA_TRACKING_ID ? (
+        <>
+          <Script
+            strategy="afterInteractive"
+            src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
+          />
+          <Script
+            id="gtag-init"
+            strategy="afterInteractive"
+            dangerouslySetInnerHTML={{
+              __html: `
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+                gtag('config', '${gtag.GA_TRACKING_ID}', {
+                page_path: window.location.pathname,
+                });
+              `,
+            }}
+          />
+        </>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default GoogleAnalytics;
diff --git a/app/layout.tsx b/app/layout.tsx
index 4c285bd..7548244 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -10,6 +10,8 @@ import { Toaster } from "@/components/ui/sonner";
 import ModalProvider from "@/components/modals/providers";
 import { TailwindIndicator } from "@/components/tailwind-indicator";
 
+import GoogleAnalytics from "./GoogleAnalytics";
+
 interface RootLayoutProps {
   children: React.ReactNode;
 }
@@ -48,6 +50,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
               <TailwindIndicator />
             </ThemeProvider>
           </SessionProvider>
+          <GoogleAnalytics />
         </body>
       </html>
     </ViewTransitions>
diff --git a/components/layout/mobile-nav.tsx b/components/layout/mobile-nav.tsx
index 87005c3..784eb8d 100644
--- a/components/layout/mobile-nav.tsx
+++ b/components/layout/mobile-nav.tsx
@@ -109,16 +109,6 @@ export function NavMobile() {
                   Sign in
                 </Link>
               </li>
-
-              <li className="py-3">
-                <Link
-                  href="/register"
-                  onClick={() => setOpen(false)}
-                  className="flex w-full font-medium capitalize"
-                >
-                  Sign up
-                </Link>
-              </li>
             </>
           )}
         </ul>
diff --git a/components/sections/hero-landing.tsx b/components/sections/hero-landing.tsx
index f81f9f7..837121b 100644
--- a/components/sections/hero-landing.tsx
+++ b/components/sections/hero-landing.tsx
@@ -45,6 +45,7 @@ export default async function HeroLanding() {
                 variant: "outline",
                 rounded: "xl",
                 size: "lg",
+                className: "bg-primary-foreground hover:opacity-70",
               }),
               "px-4 text-[15px]",
             )}
diff --git a/config/docs.ts b/config/docs.ts
index 8133a35..a4f16ec 100644
--- a/config/docs.ts
+++ b/config/docs.ts
@@ -26,16 +26,16 @@ export const docsConfig: DocsConfig = {
           href: "/docs/short-urls",
           icon: "page",
         },
-        {
-          title: "Terms of Service",
-          href: "/terms",
-          icon: "page",
-        },
-        {
-          title: "Privacy Policy",
-          href: "/privacy",
-          icon: "page",
-        },
+        // {
+        //   title: "Terms of Service",
+        //   href: "/terms",
+        //   icon: "page",
+        // },
+        // {
+        //   title: "Privacy Policy",
+        //   href: "/privacy",
+        //   icon: "page",
+        // },
         // {
         //   title: "Newsletter",
         //   href: "/docs/newsletter",
diff --git a/content/docs/index.mdx b/content/docs/index.mdx
index 097b992..6b04860 100644
--- a/content/docs/index.mdx
+++ b/content/docs/index.mdx
@@ -28,7 +28,7 @@ See docs about [guide](/docs/quick-start) for quick start.
 - [Cloudflare](https://dash.cloudflare.com/) account  
 - A **domain** name hosted on Cloudflare
 
-See docs about [developer](/docs/installation).
+See docs about [developer](/docs/developer/installation).
 
 ## Local development
 
diff --git a/gtag.js b/gtag.js
new file mode 100644
index 0000000..7d6314e
--- /dev/null
+++ b/gtag.js
@@ -0,0 +1,15 @@
+export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GOOGLE_ID || null;
+
+export const pageview = (url) => {
+  window.gtag("config", GA_TRACKING_ID, {
+    page_path: url,
+  });
+};
+
+export const event = ({ action, category, label, value }) => {
+  window.gtag("event", action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  });
+};