issue-124 add google analytics

using react-ga which only passively maintained atm, and doesn't support
GA-4, so might have to revisit this at some point.

web/src/components/LandingSection/LandingSection.js

@@ -6,11 +6,19 @@ import {
   involuteDonut,
 } from './mockEditorParts'
 import Svg from 'src/components/Svg'
-import { Link } from '@redwoodjs/router'
+import OutBound from 'src/components/OutBound'
 import { useAuth } from '@redwoodjs/auth'
+import ReactGA from 'react-ga'
 
 const LandingSection = () => {
   const { logIn } = useAuth()
+  const recordedLogin = () => {
+    ReactGA.event({
+      category: 'login',
+      action: 'landing section CTA',
+    })
+    logIn()
+  }
   return (
     <div className="mt-16">
       <div className="relative p-4 shadow-md">
@@ -146,17 +154,17 @@ const LandingSection = () => {
         <div className="rounded-md shadow-md max-w-lg mx-auto border border-gray-300 mt-16">
           <p className="text-2xl font-medium text-gray-600 p-8">
             Projects use the excellent{' '}
-            <Link
+            <OutBound
               className="text-gray-600 underline"
               to="https://github.com/zalo/CascadeStudio"
             >
               CascadeStudio
-            </Link>{' '}
+            </OutBound>{' '}
             with more integrations coming soon.
           </p>
           <button
             className="font-bold text-2xl bg-texture bg-purple-800 text-center w-full py-6 rounded-b-md border border-indigo-300 border-opacity-0 hover:border-opacity-100 hover:shadow-xl"
-            onClick={logIn}
+            onClick={recordedLogin}
           >
             <span className="text-indigo-200">Start Hacking Now</span>
           </button>
@@ -193,8 +201,8 @@ function MarketingPoint({ leadingPoint, title, children }) {
 
 function QuickLink({ to, children }) {
   return (
-    <Link className="text-gray-500 font-medium" to={to}>
+    <OutBound className="text-gray-500 font-medium" to={to}>
       {children}
-    </Link>
+    </OutBound>
   )
 }

web/src/components/OutBound/OutBound.js

@@ -0,0 +1,21 @@
+import ReactGA from 'react-ga'
+
+const OutBound = ({ className, children, to }) => {
+  return (
+    <a
+      className={className}
+      href={to}
+      onClick={() => {
+        ReactGA.event({
+          category: 'outbound',
+          action: to,
+        })
+        return true
+      }}
+    >
+      {children}
+    </a>
+  )
+}
+
+export default OutBound

web/src/components/OutBound/OutBound.stories.js

@@ -0,0 +1,7 @@
+import OutBound from './OutBound'
+
+export const generated = () => {
+  return <OutBound />
+}
+
+export default { title: 'Components/OutBound' }

web/src/components/OutBound/OutBound.test.js

@@ -0,0 +1,11 @@
+import { render } from '@redwoodjs/testing'
+
+import OutBound from './OutBound'
+
+describe('OutBound', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<OutBound />)
+    }).not.toThrow()
+  })
+})