feat: 加 ga

sexyoung · Aug 9, 2023 · b1540ed · b1540ed
1 parent 5707bcf
commit b1540ed
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 1 deletion.
diff --git a/.env.example b/.env.example
@@ -1,2 +1,3 @@
 DATABASE_URL="file:./data.db?connection_limit=1"
 SESSION_SECRET="super-duper-s3cret"
+GA_TRACKING_ID="G-X9CKGG9VVR"
diff --git a/app/root.tsx b/app/root.tsx
@@ -15,6 +15,8 @@ import {
   useLoaderData,
 } from "@remix-run/react";
 
+import * as gtag from "~/utils/gtags.client";
+
 /** @deprecated */
 import { getUser } from "~/session.server";
 // import i18next from "~/i18next.server";
@@ -73,6 +75,7 @@ export const loader = async ({ request, params }: LoaderArgs) => {
       lang: (params.lang || "") as keyof typeof formLink,
       locale,
       user: await getUser(request),
+      gaTrackingId: process.env.GA_TRACKING_ID,
     },
     init
   );
@@ -95,7 +98,7 @@ const isToday = () => !!document.cookie.includes("status=stillToday");
 export default function App() {
   // const location = useLocation();
   // Get the locale from the loader
-  let { locale, lang } = useLoaderData<typeof loader>();
+  let { locale, lang, gaTrackingId } = useLoaderData<typeof loader>();
 
   let { i18n } = useTranslation();
 
@@ -146,6 +149,12 @@ export default function App() {
     setTimeout(() => setIsPlayLogo(false), 3000);
   }, []);
 
+  useEffect(() => {
+    if (gaTrackingId?.length) {
+      gtag.pageview(location.pathname, gaTrackingId);
+    }
+  }, [gaTrackingId]);
+
   return (
     <html lang={locale} className="h-full" dir={i18n.dir()}>
       <head>
@@ -155,6 +164,29 @@ export default function App() {
         <Links />
       </head>
       <body className="h-full">
+        {!gaTrackingId ? null : (
+          <>
+            <script
+              async
+              src={`https://www.googletagmanager.com/gtag/js?id=${gaTrackingId}`}
+            />
+            <script
+              async
+              id="gtag-init"
+              dangerouslySetInnerHTML={{
+                __html: `
+                  window.dataLayer = window.dataLayer || [];
+                  function gtag(){dataLayer.push(arguments);}
+                  gtag('js', new Date());
+
+                  gtag('config', '${gaTrackingId}', {
+                    page_path: window.location.pathname,
+                  });
+                `,
+              }}
+            />
+          </>
+        )}
         <Header
           isHeaderBG={isHeaderBG}
           openLang={setShowLangModal.bind(null, true)}

diff --git a/app/utils/gtags.client.ts b/app/utils/gtags.client.ts
@@ -0,0 +1,48 @@
+declare global {
+  interface Window {
+    gtag: (
+      option: string,
+      gaTrackingId: string,
+      options: Record<string, unknown>,
+    ) => void;
+  }
+}
+
+/**
+ * @example
+ * https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+ */
+export const pageview = (url: string, trackingId: string) => {
+  if (!window.gtag) {
+    console.warn(
+      "window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet.",
+    );
+    return;
+  }
+  window.gtag("config", trackingId, {
+    page_path: url,
+  });
+};
+
+/**
+ * @example
+ * https://developers.google.com/analytics/devguides/collection/gtagjs/events
+ */
+export const event = ({
+  action,
+  category,
+  label,
+  value,
+}: Record<string, string>) => {
+  if (!window.gtag) {
+    console.warn(
+      "window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet.",
+    );
+    return;
+  }
+  window.gtag("event", action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  });
+};