feat: add tracking pixel

src/components/Layout.tsx

@@ -3,12 +3,14 @@ import "../global.css"
 import React from "react"
 import Navbar from './Navbar/Navbar'
 import Footer from './Footer/Footer'
+import TrackingPixel from './TrackingPixel'
 
 const Layout = (props: { children: any }) => (
   <>
     <Navbar />
     { props.children }
     <Footer />
+    <TrackingPixel />
   </>
 )
 

src/components/TrackingPixel.tsx

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from "react"
+import "../global.css"
+
+const TrackingPixel = () => {
+  const [trackURI, setTrackURI] = useState<string>("")
+
+  // Wraps window.location when available. Window is not defined
+  // during server rendering/building.
+  const getWindowLocation = () => {
+    if (typeof window !== "undefined") {
+      return window.location.href
+    }
+    return null
+  }
+
+  // Initializes pixel tracking URL. It passes the user's screen
+  // width/height, device memory, and CPU cores to the analytics
+  // service.
+  useEffect(() => {
+    const newURI = "https://tracker-750768004266.us-central1.run.app/track/ufosc.png/" +
+      `?width=${window.screen.width}` +
+      `&height=${window.screen.height}` +
+      `&mem=${navigator.deviceMemory}` +
+      `&cores=${navigator.hardwareConcurrency}` +
+      `&src=${window.location}`
+
+    if (newURI !== trackURI) {
+      setTrackURI(newURI)
+      console.log("changed")
+    }
+  }, [getWindowLocation()])
+
+  return trackURI !== "" ? (
+    <img id="trk-pixel"
+      height={1} width={1}
+      alt="tracking pixel"
+      src={trackURI} />
+  ) : null
+}
+
+export default TrackingPixel

src/global.css

@@ -276,6 +276,14 @@ a, a:link, a:visited {
     margin: 20px 0px;
 }
 
+#trk-pixel {
+    position: fixed;
+    width: 1px;
+    height: 1px;
+    top: 0px;
+    left: 0px;
+}
+
 @media only screen and (max-width: 500px) {
     .Typewriter__cursor, .Typewriter__wrapper, h1 {
         font-size: var(--fontSize-6);