app root: add google analytics tracking

cmnord · Jul 25, 2023 · 9276b8c · 9276b8c
1 parent 5ba8d11
commit 9276b8c
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/.env.example b/.env.example
@@ -1,5 +1,6 @@
 BASE_URL="http://localhost:3000"
 SESSION_SECRET="session secret"
+GA_TRACKING_ID="Google Analytics tracking ID"
 
 SUPABASE_PROJECT_REF=""
 SUPABASE_DB_PASSWORD=""

diff --git a/app/root.tsx b/app/root.tsx
@@ -24,7 +24,7 @@ import Footer from "~/components/footer";
 import Header from "~/components/header";
 import { getValidAuthSession } from "~/models/auth";
 import { getUserByEmail } from "~/models/user";
-import { BASE_URL, getBrowserEnv } from "~/utils";
+import { BASE_URL, getBrowserEnv, NODE_ENV } from "~/utils";
 import { SoundContext } from "~/utils/use-sound";
 
 import stylesheet from "./styles.css";
@@ -77,7 +77,7 @@ export async function loader({ request }: LoaderArgs) {
     ? await getUserByEmail(authSession.email, authSession.accessToken)
     : undefined;
 
-  return json({ user, env: getBrowserEnv(), BASE_URL });
+  return json({ user, env: getBrowserEnv(), BASE_URL, NODE_ENV });
 }
 
 export default function App() {
@@ -95,6 +95,29 @@ export default function App() {
         <Links />
       </head>
       <body className="relative flex min-h-screen flex-col">
+        {data.NODE_ENV !== "production" || !data.env.GA_TRACKING_ID ? null : (
+          <>
+            <script
+              async
+              src={`https://www.googletagmanager.com/gtag/js?id=${data.env.GA_TRACKING_ID}`}
+            />
+            <script
+              async
+              id="gtag-init"
+              dangerouslySetInnerHTML={{
+                __html: `
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+
+                gtag('config', '${data.env.GA_TRACKING_ID}', {
+                  page_path: window.location.pathname,
+                });
+              `,
+              }}
+            />
+          </>
+        )}
         <SoundContext.Provider
           value={{
             volume,

diff --git a/app/utils/env.ts b/app/utils/env.ts
@@ -3,6 +3,7 @@ import { isBrowser } from "./is-browser";
 declare global {
   interface Window {
     env: {
+      GA_TRACKING_ID: string;
       SUPABASE_URL: string;
       SUPABASE_ANON_KEY: string;
     };
@@ -13,6 +14,7 @@ declare global {
   namespace NodeJS {
     interface ProcessEnv {
       BASE_URL: string;
+      GA_TRACKING_ID: string;
       SUPABASE_URL: string;
       SUPABASE_SERVICE_ROLE_KEY: string;
       SUPABASE_ANON_KEY: string;
@@ -56,6 +58,10 @@ export const NODE_ENV = getEnv("NODE_ENV", {
   isSecret: false,
   isRequired: false,
 });
+export const GA_TRACKING_ID = getEnv("GA_TRACKING_ID", {
+  isSecret: false,
+  isRequired: false,
+});
 export const SUPABASE_URL = getEnv("SUPABASE_URL", { isSecret: false });
 export const SUPABASE_ANON_KEY = getEnv("SUPABASE_ANON_KEY", {
   isSecret: false,
@@ -65,5 +71,6 @@ export function getBrowserEnv() {
   return {
     SUPABASE_URL,
     SUPABASE_ANON_KEY,
+    GA_TRACKING_ID,
   };
 }