Merge pull request #8 from perjansson/develop

Add Google Analytics

.github/workflows/development.yml

@@ -7,6 +7,7 @@ on:
 
 jobs:
   deploy:
+    name: Deploy dev
     runs-on: ubuntu-latest
     strategy:
       matrix:

.github/workflows/production.yml

@@ -7,6 +7,7 @@ on:
 
 jobs:
   deploy:
+    name: Deploy prod
     runs-on: ubuntu-latest
     strategy:
       matrix:
@@ -25,6 +26,7 @@ jobs:
         env:
           NEXT_PUBLIC_CONTENTFUL_SPACE_ID: ${{ secrets.NEXT_PUBLIC_CONTENTFUL_SPACE_ID }}
           NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN: ${{ secrets.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN }}
+          TRACK_GA: ${{ secrets.GA_TRACKING_ID }}
         run: yarn build
 
       - name: Deploy to netlify

.github/workflows/publish.yml

@@ -6,6 +6,7 @@ on:
 
 jobs:
   deploy:
+    name: Deploy production (Contentful)
     runs-on: ubuntu-latest
     strategy:
       matrix:
@@ -29,6 +30,7 @@ jobs:
         env:
           NEXT_PUBLIC_CONTENTFUL_SPACE_ID: ${{ secrets.NEXT_PUBLIC_CONTENTFUL_SPACE_ID }}
           NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN: ${{ secrets.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN }}
+          TRACK_GA: ${{ secrets.GA_TRACKING_ID }}
         run: yarn build
 
       - name: Deploy to netlify

.github/workflows/staging.yml

@@ -7,6 +7,7 @@ on:
 
 jobs:
   deploy:
+    name: Deploy staging
     runs-on: ubuntu-latest
     strategy:
       matrix:

.github/workflows/test.yml

@@ -52,15 +52,12 @@ jobs:
       - name: Install packages
         run: yarn
 
-      - name: Build app
-        env:
-          NEXT_PUBLIC_CONTENTFUL_SPACE_ID: ${{ secrets.NEXT_PUBLIC_CONTENTFUL_SPACE_ID }}
-          NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN: ${{ secrets.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN }}
-        run: yarn build
-
       - name: Audit with Lighthouse CI
         uses: treosh/lighthouse-ci-action@v3
         with:
+          urls: |
+            https://perjansson-dev.netlify.app
+          runs: 3
           configPath: 'lighthouserc.js'
           uploadArtifacts: true
           temporaryPublicStorage: true

components/header.tsx

@@ -1,15 +1,30 @@
 import React from 'react'
 import { ContactsType } from '../types'
+import { event } from '../utils/gtag'
 
 interface HeaderProps {
   contacts: ContactsType
 }
 
 export const Header: React.FC<HeaderProps> = ({ contacts }) => {
+  const handleOnContactClick = (medium: string) =>
+    event({
+      category: 'user_interaction',
+      action: 'contact_click',
+      label: medium,
+      value: 1,
+    })
+
   return (
     <header className="header" data-cy="header">
       {contacts.map(({ url, medium }) => (
-        <a href={url} target="_blank" rel="noopener noreferrer" key={medium}>
+        <a
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          key={medium}
+          onClick={() => handleOnContactClick(medium)}
+        >
           {medium}
         </a>
       ))}

components/projects.tsx

@@ -1,10 +1,11 @@
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import RichText from '@madebyconnor/rich-text-to-jsx'
 import { Fade } from 'react-awesome-reveal'
 import SmoothCollapse from 'react-smooth-collapse'
 
 import { ProjectsType, ProjectType } from '../types'
-import { formatProjectDates } from '../utils'
+import { formatProjectDates } from '../utils/projectHelper'
+import { event } from '../utils/gtag'
 
 interface ProjectsProps {
   projects: ProjectsType
@@ -16,9 +17,21 @@ export const Projects: React.FC<ProjectsProps> = ({ projects }) => {
   >(undefined)
 
   const handleOnSelect = (project: ProjectType) => {
-    setSelectedProject((previouslySelectedProject) =>
-      project !== previouslySelectedProject ? project : undefined
-    )
+    setSelectedProject((previouslySelectedProject) => {
+      const newProject =
+        project !== previouslySelectedProject ? project : undefined
+
+      if (newProject) {
+        event({
+          category: 'user_interaction',
+          action: 'project_selected',
+          label: newProject.title,
+          value: 1,
+        })
+      }
+
+      return newProject
+    })
   }
 
   return (
@@ -68,6 +81,7 @@ function Project({ project, odd, selected, onSelect }: ProjectProps) {
     city,
     tags,
   } = project
+
   const lqipAssetUrl = asset
     ? `${asset.url}?fl=progressive&w=67&h=100`
     : undefined

components/tagCloud.tsx

@@ -5,12 +5,13 @@ import '@reach/slider/styles.css'
 
 import {
   formatProjectDates,
-  isMobile,
   projectTagsToTagCloudData,
   sortProjectsOnStartDate,
   yearFromIsoDate,
-} from '../utils'
+} from '../utils/projectHelper'
+import isMobile from '../utils/isMobile'
 import { ProjectsType } from '../types'
+import { event } from '../utils/gtag'
 
 const TAG_CLOUD_INITIAL_YEARS_OF_HISTORY = 5
 const MIN_FONT_SIZE = {
@@ -57,6 +58,13 @@ export const TagCloud: React.FC<TagCloudProps> = memo(({ projects }) => {
   const handleSliderChange = (newMinYear: number) => {
     if (newMinYear !== selectedMinYear) {
       setSelectedMinYear(newMinYear)
+
+      event({
+        category: 'user_interaction',
+        action: 'tag_cloud_min_date_change',
+        label: newMinYear + '',
+        value: 1,
+      })
     }
   }
 

lighthouserc.js

@@ -1,9 +1,5 @@
 module.exports = {
   ci: {
-    collect: {
-      numberOfRuns: 3,
-      staticDistDir: './out',
-    },
     assert: {
       // preset: 'lighthouse:recommended',
       assertions: {

package.json

@@ -6,6 +6,7 @@
     "dev": "next dev",
     "build": "next build && next export",
     "start": "next start -p $PORT",
+    "start:static": "yarn build && serve ./out",
     "start:ci": "next start -p 5000",
     "test:e2e": "cypress run",
     "test:e2e:open": "cypress open",
@@ -28,6 +29,7 @@
   },
   "devDependencies": {
     "@contentful/rich-text-types": "^14.1.2",
+    "@types/gtag.js": "^0.0.4",
     "@types/react": "^17.0.0",
     "@types/react-tagcloud": "^1.1.5",
     "@types/smoothscroll-polyfill": "^0.3.1",
@@ -39,6 +41,7 @@
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
     "prettier": "2.1.2",
+    "serve": "^11.3.2",
     "start-server-and-test": "^1.11.5",
     "typescript": "^4.1.3"
   }

pages/_app.tsx

@@ -1,17 +1,34 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import Head from 'next/head'
 import { AppProps } from 'next/app'
+import { useRouter } from 'next/router'
 
-const App: React.FC<AppProps> = ({ Component, pageProps }) => (
-  <>
-    <Head>
-      <meta
-        name="viewport"
-        content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover"
-      />
-    </Head>
-    <Component {...pageProps} />
-  </>
-)
+import * as gtag from '../utils/gtag'
+
+const App: React.FC<AppProps> = ({ Component, pageProps }) => {
+  const router = useRouter()
+
+  useEffect(() => {
+    const handleRouteChange = (url: URL) => {
+      gtag.pageview(url)
+    }
+    router.events.on('routeChangeComplete', handleRouteChange)
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange)
+    }
+  }, [router.events])
+
+  return (
+    <>
+      <Head>
+        <meta
+          name="viewport"
+          content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover"
+        />
+      </Head>
+      <Component {...pageProps} />
+    </>
+  )
+}
 
 export default App

pages/_document.js

@@ -37,7 +37,6 @@ class MyDocument extends Document {
           <meta name="msapplication-TileColor" content="#2B5797" />
           <meta name="msapplication-tap-highlight" content="no" />
           <meta name="theme-color" content="#000000" />
-
           <link
             rel="apple-touch-icon"
             sizes="180x180"
@@ -62,7 +61,6 @@ class MyDocument extends Document {
             color="#5bbad5"
           />
           <link rel="shortcut icon" href="/icons/favicon.ico" />
-
           <meta name="twitter:card" content="summary" />
           <meta
             name="twitter:url"
@@ -96,6 +94,26 @@ class MyDocument extends Document {
             property="og:image"
             content="https://www.thecuriousdeveloper.com/icons/apple-touch-icon.png"
           />
+          {process.env.GA_TRACKING_ID && (
+            <>
+              <script
+                async
+                src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_TRACKING_ID}`}
+              />
+              <script
+                dangerouslySetInnerHTML={{
+                  __html: `
+              window.dataLayer = window.dataLayer || [];
+              function gtag(){dataLayer.push(arguments);}
+              gtag('js', new Date());
+              gtag('config', '${process.env.GA_TRACKING_ID}', {
+                page_path: window.location.pathname,
+              });
+          `,
+                }}
+              />
+            </>
+          )}
         </Head>
         <body>
           <Main />

pages/index.tsx

@@ -3,8 +3,8 @@ import Head from 'next/head'
 import smoothscroll from 'smoothscroll-polyfill'
 import 'lazysizes'
 
-import { backgroundChanger } from '../utils'
-import { MeType, ProjectsType } from '../types'
+import backgroundChanger from '../utils/backgroundChanger'
+import { IndexPageData, MeType, ProjectsType } from '../types'
 import { getIndexPageData } from '../queries'
 
 import { Header } from '../components/header'
@@ -41,12 +41,12 @@ export async function getStaticProps(): Promise<StaticProps> {
     }
   )
 
-  const { data } = await res.json()
+  const { data } = await (res.json() as Promise<IndexPageData>)
 
   return {
     props: {
       me: data.me,
-      projects: data.projectCollection.items,
+      projects: data.projects.items,
     },
   }
 }
@@ -67,7 +67,7 @@ const Index: React.FC<IndexProps> = ({ me, projects }) => {
       <Head>
         <title>Per Jansson - Fullstack Web Developer 👋</title>
       </Head>
-      <Header contacts={me.contactsCollection.items} />
+      <Header contacts={me.contacts.items} />
       <main className="main">
         <Me me={me} />
         <TagCloud projects={projects} />

queries.js

@@ -4,7 +4,7 @@ export const getIndexPageData = `{
         title
         short { json }
         long { json }
-        contactsCollection {
+        contacts: contactsCollection {
             items {
                 ... on Contact {
                     medium
@@ -13,7 +13,7 @@ export const getIndexPageData = `{
             }
         }
     }
-    projectCollection(order: startdate_DESC) {
+    projects: projectCollection(order: startdate_DESC) {
         items {
             title
             client

types.ts

@@ -26,7 +26,7 @@ export interface ImageType {
 export interface MeType {
   name: string
   title: string
-  contactsCollection: {
+  contacts: {
     items: ContactType[]
   }
   short: RichTextJson
@@ -39,3 +39,12 @@ export interface ContactType {
   medium: string
   url: string
 }
+
+export interface IndexPageData {
+  data: {
+    me: MeType
+    projects: {
+      items: ProjectsType
+    }
+  }
+}