Add google analitics

StampyAI · Feb 14, 2024 · eeba3ff · eeba3ff
1 parent 39c97d2
commit eeba3ff
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 7 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -23,6 +23,7 @@ jobs:
             | sed s/{CODA_TOKEN}/${{ secrets.CODA_TOKEN }}/ \
             | sed s/{CODA_INCOMING_TOKEN}/${{ secrets.CODA_INCOMING_TOKEN }}/ \
             | sed s/{CODA_WRITES_TOKEN}/${{ secrets.CODA_WRITES_TOKEN }}/ \
+            | sed s/{GOOGLE_ANALYTICS_ID}/${{ secrets.GOOGLE_ANALYTICS_ID }}/ \
             > wrangler.toml
           npm ci
           npm run deploy

diff --git a/app/root.tsx b/app/root.tsx
@@ -1,14 +1,13 @@
-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 {cssBundleHref} from '@remix-run/css-bundle'
 import newStyles from '~/newRoot.css'
 
-import {useLoaderData} from '@remix-run/react'
 import {CachedObjectsProvider} from '~/hooks/useCachedObjects'
 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.
@@ -98,9 +97,34 @@ export const loader = async ({request}: Parameters<LoaderFunction>[0]) => {
     minLogo,
     embed,
     showSearch,
+    gaTrackingId: GOOGLE_ANALYTICS_ID,
   }
 }
 
+const GoogleAnalytics = ({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>
@@ -123,7 +147,6 @@ function Head({minLogo}: {minLogo?: boolean}) {
 
 export function ErrorBoundary({error}: {error: Error}) {
   console.error(error)
-
   return (
     <html>
       <Head />
@@ -142,7 +165,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}
 
@@ -171,6 +194,7 @@ export default function App() {
       <html lang="en" className={`${embed ? 'embed' : ''} ${savedTheme ?? ''}`}>
         <Head minLogo={minLogo} />
         <body>
+          <GoogleAnalytics gaTrackingId={gaTrackingId} />
           <Outlet context={context} />
           {/* <ScrollRestoration /> wasn't doing anything useful */}
           <Scripts />

diff --git a/remix.env.d.ts b/remix.env.d.ts
@@ -9,3 +9,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_ANALYTICS_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_ANALYTICS_ID = "{GOOGLE_ANALYTICS_ID}"