Merge pull request #125 from Irev-Dev/kurt/issue-124

issue-124 Add google analytics

web/package.json

@@ -31,6 +31,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-dropzone": "^11.2.1",
+    "react-ga": "^3.3.0",
     "react-helmet": "^6.1.0",
     "react-image-crop": "^8.6.6",
     "rich-markdown-editor": "^11.0.2",

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()
+  })
+})

web/src/index.js

@@ -3,6 +3,9 @@ import netlifyIdentity from 'netlify-identity-widget'
 import ReactDOM from 'react-dom'
 import { RedwoodProvider, FatalErrorBoundary } from '@redwoodjs/web'
 import FatalErrorPage from 'src/pages/FatalErrorPage'
+import ReactGA from 'react-ga'
+
+ReactGA.initialize(process.env.GOOGLE_ANALYTICS_ID)
 
 import Routes from 'src/Routes'
 

web/src/layouts/MainLayout/MainLayout.js

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { Link, routes } from '@redwoodjs/router'
 import { useAuth } from '@redwoodjs/auth'
 import { Flash } from '@redwoodjs/web'
@@ -6,6 +6,8 @@ import Tooltip from '@material-ui/core/Tooltip'
 import { useQuery } from '@redwoodjs/web'
 import Popover from '@material-ui/core/Popover'
 import { getActiveClasses } from 'get-active-classes'
+import { useLocation } from '@redwoodjs/router'
+import ReactGA from 'react-ga'
 
 export const QUERY = gql`
   query FIND_USER_BY_ID($id: String!) {
@@ -20,6 +22,9 @@ export const QUERY = gql`
 import Svg from 'src/components/Svg'
 import ImageUploader from 'src/components/ImageUploader'
 
+let previousSubmission = ''
+let previousUserID = ''
+
 const MainLayout = ({ children }) => {
   const { logIn, logOut, isAuthenticated, currentUser } = useAuth()
   const { data, loading } = useQuery(QUERY, {
@@ -48,6 +53,38 @@ const MainLayout = ({ children }) => {
 
     openPopover(currentTarget)
   }
+
+  const recordedLogin = () => {
+    ReactGA.event({
+      category: 'login',
+      action: 'navbar login',
+    })
+    logIn()
+  }
+
+  const { pathname, params } = useLocation()
+
+  useEffect(() => {
+    const newSubmission = `${pathname || ''}${params || ''}`
+    // not the "React" way of doing think, but otherwise it will submit twice
+    // it's because the old page submits it and when the new page loads it happens again
+    if (previousSubmission !== newSubmission) {
+      ReactGA.pageview(newSubmission)
+      previousSubmission = newSubmission
+    }
+  }, [pathname, params])
+  useEffect(() => {
+    // not the "React" way of doing think, but otherwise it will submit twice
+    // it's because the old page submits it and when the new page loads it happens again
+    if (
+      isAuthenticated &&
+      previousUserID !== currentUser &&
+      data?.user?.userName
+    ) {
+      ReactGA.set({ userName: data.user.userName, userId: currentUser })
+      previousUserID = currentUser
+    }
+  }, [data, currentUser, isAuthenticated])
   return (
     <>
       <header id="cadhub-main-header">
@@ -120,7 +157,7 @@ const MainLayout = ({ children }) => {
                 <a
                   href="#"
                   className="text-indigo-200 font-semibold underline"
-                  onClick={logIn}
+                  onClick={recordedLogin}
                 >
                   Sign in/up
                 </a>

yarn.lock

@@ -13356,6 +13356,11 @@ react-focus-lock@^2.1.0:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
+react-ga@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.0.tgz#c91f407198adcb3b49e2bc5c12b3fe460039b3ca"
+  integrity sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ==
+
 react-helmet-async@^1.0.2:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.6.tgz#11c15c74e79b3f66670c73779bef3e0e352b1d4e"