analytics and misc cleanup

jprusik · Mar 31, 2023 · 83bc37c · 83bc37c
1 parent f1f2ecc
commit 83bc37c
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 19 deletions.
diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml
@@ -34,6 +34,11 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+      - name: create env file
+        run: |
+          touch .env
+          echo REACT_APP_DATA_REFETCH_INTERVAL=${{ vars.REACT_APP_DATA_REFETCH_INTERVAL }} >> .env
+          echo REACT_APP_GA_ID=${{ vars.REACT_APP_GA_ID }} >> .env
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:

diff --git a/public/index.html b/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon-180x180.png" type="image/png">
     <link rel="icon" href="%PUBLIC_URL%/favicon.png" sizes="32x32" type="image/png">
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" sizes="16x16" type="image/vnd.microsoft.icon">
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" sizes="16x16" type="image/x-icon">
     <meta name="viewport" content="initial-scale=1, width=device-width" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -19,16 +19,6 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
     <title>TransitFind: MBTA Stop Information</title>
-
-    <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GA_ID%"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-
-      gtag('config', '%REACT_APP_GA_ID%');
-    </script>
   </head>
   <body>
     <noscript>JavaScript must be enabled in your browser in order to run TransitFind.</noscript>

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,9 +1,12 @@
-import {Fragment} from 'react';
+import {Fragment, useEffect} from 'react';
+import {addAnalyticsTag} from 'utils';
 import {AppDetailsNav} from 'components/AppDetailsNav';
 import {Body} from 'components/Body';
 import {Footer} from 'components/Footer';
 
 export function App() {
+  useEffect(() => addAnalyticsTag(), []);
+
   return (
     <Fragment>
       <Body />

diff --git a/src/components/AppDetailsNav.tsx b/src/components/AppDetailsNav.tsx
@@ -110,7 +110,7 @@ const Container = styled.div<{
       color: #A0CBF5;
 
       .favoriteIcon {
-        color: #ED143D;
+        color: #DB61A2;
       }
     }
 

diff --git a/src/contexts/routes.tsx b/src/contexts/routes.tsx
@@ -12,12 +12,6 @@ export const RoutesContext =
 export function RoutesProvider (
   {children}: PropsWithChildren
 ): JSX.Element {
-  /*
-  We need to fetch schedule data separately since it is unavailable
-  as an include on predictions if no predictions are returned. Also,
-  for now we won't refetch the schedule data since it's not likely
-  to change frequently.
-  */
   const routes = useRoutes();
 
   return (

diff --git a/src/utils/analytics.ts b/src/utils/analytics.ts
@@ -0,0 +1,34 @@
+
+const GA_TAG_INIT_CODE = `
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', '${process.env.REACT_APP_GA_ID}', {
+    anonymize_ip: true,
+    cookie_flags: 'SameSite=None;Secure',
+  });
+
+  gtag('consent', 'default', {
+    ad_storage: 'denied'
+  });
+`;
+
+export function addAnalyticsTag(): void {
+  const isDev = process.env.NODE_ENV === 'development';
+
+  if (process.env.REACT_APP_GA_ID && !isDev) {
+    let gtmScript = document.createElement('script');
+    gtmScript.type = 'text/javascript';
+    gtmScript.src = `https://www.googletagmanager.com/gtag/js?id=${process.env.REACT_APP_GA_ID}`;
+    gtmScript.async = true;
+
+    document?.head?.appendChild(gtmScript)?.parentNode?.removeChild(gtmScript);
+
+    let scriptTag = document.createElement('script');
+    scriptTag.type = 'text/javascript';
+    scriptTag.text = GA_TAG_INIT_CODE;
+
+    document?.head?.appendChild(scriptTag)?.parentNode?.removeChild(scriptTag);
+  }
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -14,6 +14,9 @@ import {
 } from 'types';
 import {RouteIcon} from 'components/RouteIcon';
 
+export * from 'utils/analytics';
+export * from 'utils/data';
+
 type RelevantArrivals = {
   [key: string]: Prediction | Schedule;
 }