Add google analitics

StampyAI · Feb 5, 2024 · fac9749 · fac9749
1 parent e719fc1
commit fac9749
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,12 +1,11 @@
-import {Links, LiveReload, Meta, Outlet, Scripts} from '@remix-run/react'
+import {useEffect} from 'react'
+import {Links, LiveReload, Meta, Outlet, Scripts, useLoaderData} from '@remix-run/react'
 import type {MetaFunction, LinksFunction, LoaderFunction} from '@remix-run/cloudflare'
 import styles from '~/root.css'
 
-import {useLoaderData} from '@remix-run/react'
 import {questionsOnPage} from '~/hooks/stateModifiers'
-import {loadQuestionDetail} from '~/server-utils/stampy'
 import {useTheme} from './hooks/theme'
-import {useEffect} from 'react'
+import {loadQuestionDetail} from '~/server-utils/stampy'
 
 /*
  * Transform the given text into a meta header format.
@@ -92,17 +91,42 @@ export const loader = async ({request}: Parameters<LoaderFunction>[0]) => {
     minLogo,
     embed,
     showSearch,
+    gaTrackingId: GOOGLE_ANALITICS_ID,
   }
 }
 
+const GoogleAnalitics = ({gaTrackingId}: {gaTrackingId?: string}) => {
+  if (!gaTrackingId) return null
+  return (
+    <>
+      <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,
+                });
+        `,
+        }}
+      />
+    </>
+  )
+}
+
 function Head({minLogo}: {minLogo?: boolean}) {
   return (
     <head>
       <meta charSet="utf-8" />
       <meta name="viewport" content="width=device-width,initial-scale=1" />
       {/* don't use color-scheme because supporting transparent iframes https://fvsch.com/transparent-iframes
           is more important than dark reader https://github.com/darkreader/darkreader/issues/1285#issuecomment-761893024
-          <meta name="color-scheme" content="light dark" /> 
+          <meta name="color-scheme" content="light dark" />
        */}
       <Meta />
       <Links />
@@ -117,7 +141,6 @@ function Head({minLogo}: {minLogo?: boolean}) {
 
 export function ErrorBoundary({error}: {error: Error}) {
   console.error(error)
-
   return (
     <html>
       <Head />
@@ -136,7 +159,7 @@ type Loader = Awaited<ReturnType<typeof loader>>
 export type Context = Pick<Loader, 'minLogo' | 'embed' | 'showSearch'>
 
 export default function App() {
-  const {minLogo, embed, showSearch} = useLoaderData<Loader>()
+  const {minLogo, embed, showSearch, gaTrackingId} = useLoaderData<Loader>()
   const {savedTheme} = useTheme()
   const context: Context = {minLogo, embed, showSearch}
 
@@ -164,6 +187,7 @@ export default function App() {
     <html lang="en" className={`${embed ? 'embed' : ''} ${savedTheme ?? ''}`}>
       <Head minLogo={minLogo} />
       <body>
+        <GoogleAnalitics gaTrackingId={gaTrackingId} />
         <Outlet context={context} />
         {/* <ScrollRestoration /> wasn't doing anything useful */}
         <Scripts />

diff --git a/remix.env.d.ts b/remix.env.d.ts
@@ -8,3 +8,4 @@ declare const CODA_INCOMING_TOKEN: string
 declare const CODA_WRITES_TOKEN: string
 declare const NLP_SEARCH_ENDPOINT: string
 declare const ALLOW_ORIGINS: string
+declare const GOOGLE_ANALITICS_ID: string
diff --git a/wrangler.toml.template b/wrangler.toml.template
@@ -20,4 +20,5 @@ CODA_TOKEN = "{CODA_TOKEN}"
 CODA_INCOMING_TOKEN = "{CODA_INCOMING_TOKEN}"
 CODA_WRITES_TOKEN = "{CODA_WRITES_TOKEN}"
 NLP_SEARCH_ENDPOINT = "https://stampy-nlp-t6p37v2uia-uw.a.run.app/"
-ALLOW_ORIGINS = "https://chat.aisafety.info"
+ALLOW_ORIGINS = "https://chat.aisafety.info"
+GOOGLE_ANALITICS_ID = "{GOOGLE_ANALITICS_ID}"