Merge pull request #19 from mikaalnaik/google-analytics

google analytics

Author: mikaalnaik

apps/frontend/package.json

@@ -30,6 +30,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.1",
+    "@types/gtag.js": "^0.0.10",
     "@types/node": "^14.14.24",
     "@types/node-fetch": "^2.5.8",
     "@types/react": "^17.0.1",

apps/frontend/src/components/beach-card/beach-info-section/index.tsx

@@ -16,6 +16,8 @@ interface Props {
 const BeachInfoSection = ({ beach }: Props) => {
   const {  collectionDate, beachId } = beach;
   const beachDisplayName = beachPositions(beachId).displayName;
+  const sourceName = beach.beachId === 12 ? 'Swim Drink Fish' : 'City of Toronto';
+  const prediction = undefined;
 
   return (
     <div className={styles['beachcard-content']}>
@@ -25,9 +27,31 @@ const BeachInfoSection = ({ beach }: Props) => {
           {beachDisplayName}
         </div>
       </section>
-      <EcoliStatusLabel beach={beach} />
-      <div className={styles['collection-date']}>
-        {dayjs(collectionDate).fromNow()}
+      <div className={styles.readings}>
+        <section className={styles['stat-row']}>
+          <EcoliStatusLabel eColi={beach.eColi} />
+          <div>
+            <div className={styles.source}>
+              {sourceName}
+            </div>
+            <div className={styles['collection-date']}>
+              {dayjs(collectionDate).fromNow()}
+            </div>
+          </div>
+        </section>
+        {prediction && (
+          <section className={styles['stat-row']}>
+            <EcoliStatusLabel eColi={prediction} />
+            <div>
+              <div className={styles.source}>
+              Our Prediction
+              </div>
+              <div className={styles['collection-date']}>
+              for <b>today</b>
+              </div>
+            </div>
+          </section>
+        )}
       </div>
     </div>
   );

apps/frontend/src/components/beach-card/beach-info-section/style.module.scss

@@ -33,6 +33,25 @@
 }
 
 .collection-date {
-  font-size: 0.65rem;
+  font-size: 0.5rem;
   text-align: right;
 }
+
+.source {
+  text-align: right;
+  font-size: 0.5rem;
+}
+
+.stat-row {
+  align-items: center;
+  justify-content: flex-end;
+
+  &:last-of-type {
+    margin-left: 10px;
+  }
+}
+
+.readings {
+  display: flex;
+  justify-content: end;
+}

apps/frontend/src/components/beach-card/ecoli-status-label/index.tsx

@@ -2,13 +2,12 @@ import { Beach } from 'src/types/beaches';
 import styles from './style.module.scss';
 
 interface Props {
-  beach: Beach;
+  eColi: Beach['eColi'] | undefined
 }
 
-const EcoliStatusLabel = ({ beach }: Props) => {
-  const { eColi } = beach;
+const EcoliStatusLabel = ({ eColi }: Props) => {
 
-  const label = eColi ? `${eColi} E. coli` : 'Not Tested';
+  const label = eColi ? `${Math.round(eColi)} E. coli` : 'N/A';
 
   return (
     <section className={styles.component}>

apps/frontend/src/components/layout/style.module.scss

@@ -17,7 +17,7 @@
 
 .home {
   position: relative;
-  padding-top: 3rem;
+  padding-top: 1rem;
   display: inline-block;
   width: 100%;
 }

apps/frontend/src/pages/_app.tsx

@@ -1,6 +1,24 @@
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 import '../styles/app.scss';
 
 // This default export is required in a new `pages/_app.js` file.
 export default function MyApp({ Component, pageProps }) {
+  const router = useRouter();
+
+  const handleRouteChange = url => {
+    window.gtag('config', 'G-LC1XE1N6HK', {
+      page_path: url,
+    });
+  };
+
+  useEffect(() => {
+    router.events.on('routeChangeComplete', handleRouteChange);
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, [router.events]);
+
+
   return <Component {...pageProps} />;
 }

apps/frontend/src/pages/_document.tsx

@@ -1,15 +1,33 @@
 // pages/_document.js
 import { Html, Head, Main, NextScript } from 'next/document';
+import Script from 'next/script';
 
 export default function Document() {
   return (
     <Html>
-      <Head />
+      <Head>
+        <link href="https://fonts.googleapis.com/css2?family=Jost:wght@200;400;500;700&display=swap" rel="stylesheet"></link>
+        <Script
+          strategy='afterInteractive'
+          src="https://www.googletagmanager.com/gtag/js?id=G-LC1XE1N6HK"
+        />
+        <Script
+          strategy='afterInteractive'
+          dangerouslySetInnerHTML={{
+            __html: `
+              window.dataLayer = window.dataLayer || [];
+              function gtag(){dataLayer.push(arguments);}
+              gtag('js', new Date());
+              gtag('config', 'G-LC1XE1N6HK', { page_path: window.location.pathname });
+            `,
+          }}
+        />
+
+      </Head>
       <body>
         <Main />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" />
-        <link href="https://fonts.googleapis.com/css2?family=Jost:wght@200;400;500;700&display=swap" rel="stylesheet"></link>
         <NextScript />
       </body>
     </Html>

apps/frontend/src/utils/analytics.ts

@@ -0,0 +1,17 @@
+
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const pageview = url => {
+  window.gtag('config', 'G-LC1XE1N6HK', {
+    page_path: url,
+  });
+};
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export const event = ({ action, category, label, value }) => {
+  window.gtag('event', action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  });
+};

apps/frontend/yarn.lock

@@ -724,6 +724,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/gtag.js@^0.0.10":
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/@types/gtag.js/-/gtag.js-0.0.10.tgz#ac90d9b79c00daac447725a4b78ec1c398796760"
+  integrity sha512-98Hy7woUb3jMAMXkZQwfIOYNyfxmI0+U4m0PpCGdnd/FHk0tDpQFCqgXdNkdEoXsKkcGya/2Gew1cAJjKJspVw==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"