feat: add umami analytics

nsdonato · Mar 23, 2024 · 346134a · 346134a
1 parent 844260f
commit 346134a
Show file tree

Hide file tree

Showing 13 changed files with 99 additions and 74 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,5 @@
-import { Analytics } from '@vercel/analytics/react'
 import type { Metadata } from 'next'
+import Script from 'next/script'
 
 import { ButtonUp } from '@/components/button/button-up'
 import Navbar from '@/components/navbar/navbar'
@@ -19,10 +19,24 @@ export default function RootLayout({
 }: {
   children: React.ReactNode
 }) {
+  const UMAMI_ANALYTICS = process.env.NEXT_PUBLIC_ANALYTICS_ID
+  const environment = process.env.NODE_ENV
+
   return (
     <html lang='es' className={'font-popi font-popi-light'}>
       <head>
-        <script dangerouslySetInnerHTML={{ __html: getTheme }} />
+        <Script
+          id='data-theme'
+          dangerouslySetInnerHTML={{ __html: getTheme }}
+        />
+        {environment === 'production' && (
+          <Script
+            id='umami'
+            defer
+            src='https://eu.umami.is/script.js'
+            data-website-id={UMAMI_ANALYTICS}
+          />
+        )}
       </head>
       <body>
         <Navbar />
@@ -32,7 +46,6 @@ export default function RootLayout({
             {children}
           </main>
         </div>
-        <Analytics />
         <ButtonUp />
       </body>
     </html>

diff --git a/components/button/button-up.tsx b/components/button/button-up.tsx
@@ -1,8 +1,10 @@
 import { WebLink } from '@/components/web-link/web-link'
+import { EventNames } from '@/lib/metrics/event-name-types'
 
 export const ButtonUp = () => {
   return (
     <WebLink
+      eventName={EventNames.CLICK_ON_GO_TO_TOP_BUTTON}
       title='Back to the top'
       href='#top'
       className='lg:hidden btn btn-circle btn-accent fixed bottom-4 right-4'

diff --git a/components/card/card.tsx b/components/card/card.tsx
@@ -23,6 +23,7 @@ export const Card = ({ item }: CardProps) => {
         <div className='flex flex-wrap gap-2 pt-1'>
           {links?.map(({ url, type }, index) => (
             <WebLink
+              eventName={`Click on ${imgPlaceholder} - ${type.toLowerCase()}`}
               key={index}
               className='btn btn-sm btn-outline btn-accent'
               href={url}>

diff --git a/components/contributors/contributors.tsx b/components/contributors/contributors.tsx
@@ -1,6 +1,7 @@
 import Image from 'next/image'
 
 import { Contributor } from '@/lib/mdx/mdx-utils'
+import { EventNames } from '@/lib/metrics/event-name-types'
 import { adaptContributorsFromMdx } from '@/services/github/adapters'
 import { getContributorsFromGitHub } from '@/services/github/get-contributors'
 
@@ -34,7 +35,9 @@ export const Contributors = async ({
         {data.map(contributor => {
           return (
             <li key={`contributor-${contributor.name}`}>
-              <WebLink href={contributor.profile}>
+              <WebLink
+                href={contributor.profile}
+                eventName={`${EventNames.CLICK_ON_GH_CONTRIBUTOR} - ${contributor.name}`}>
                 <Image
                   data-testid={`contributor-${contributor.name}`}
                   loading='lazy'

diff --git a/components/figure/figure.tsx b/components/figure/figure.tsx
@@ -30,6 +30,10 @@ export const Figure = ({
         src={hasCover ? cover.src : '/ui/imgnotfound.svg'}
         width={hasCover ? cover.width : 40}
         height={hasCover ? cover.height : 40}
+        style={{
+          width: hasCover ? cover.width : 40,
+          height: hasCover ? cover.height : 40,
+        }}
       />
     </figure>
   )

diff --git a/components/navbar/navbar.tsx b/components/navbar/navbar.tsx
@@ -7,6 +7,8 @@ import { DocSearch } from '@docsearch/react'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
 
+import { EventNames } from '@/lib/metrics/event-name-types'
+
 import { Figure } from '../figure/figure'
 import { WebLink } from '../web-link/web-link'
 
@@ -33,16 +35,14 @@ function NavBar() {
             apiKey={SEARCH_API_KEY}
             indexName={'recursostech'}
             appId={SEARCH_APP_ID}
-            // transformItems={items => {
-            //   console.log(items)
-            //   return items
-            // }}
           />
         )}
       </div>
       <div className='items-start md:mr-2'>
         <ThemeController />
-        <WebLink href='https://github.com/nsdonato/recursostech'>
+        <WebLink
+          href='https://github.com/nsdonato/recursostech'
+          eventName={EventNames.CLICK_ON_GO_TO_GITHUB_REPO}>
           <Figure
             cover={{
               src: '/ui/github.svg',

diff --git a/components/theme-controller/theme-controller.tsx b/components/theme-controller/theme-controller.tsx
@@ -4,47 +4,50 @@
 import { useEffect, useState } from 'react'
 
 import { DARK_THEME, LIGHT_THEME } from '@/lib/constants'
+import { EventNames } from '@/lib/metrics/event-name-types'
 
 import { Figure } from '../figure/figure'
 
 // @ts-nocheck
 
-// @ts-nocheck
-
 const ThemeController = () => {
-	const [theme, setTheme] = useState(global.window?.__theme || LIGHT_THEME)
-
-	const isDark = theme === DARK_THEME
-
-	const toggleTheme = () => {
-		global.window?.__setPreferredTheme(
-			theme === LIGHT_THEME ? DARK_THEME : LIGHT_THEME
-		)
-	}
-
-	useEffect(() => {
-		global.window.__onThemeChange = setTheme
-	}, [])
-
-	return (
-		<label className='swap swap-rotate mr-2'>
-			<input
-				type='checkbox'
-				value={isDark ? DARK_THEME : LIGHT_THEME}
-				onClick={() => {
-					toggleTheme()
-				}}
-			/>
-
-			<Figure
-				cover={{
-					src: isDark ? '/ui/sun.svg' : '/ui/moon.svg',
-					width: 30,
-					height: 30,
-				}}
-				placeholder={isDark ? 'sun' : 'moon'}
-			/>
-		</label>
-	)
+  const [theme, setTheme] = useState(global.window?.__theme || LIGHT_THEME)
+
+  const isDark = theme === DARK_THEME
+
+  const toggleTheme = () => {
+    global.window?.__setPreferredTheme(
+      theme === LIGHT_THEME ? DARK_THEME : LIGHT_THEME
+    )
+  }
+
+  useEffect(() => {
+    global.window.__onThemeChange = setTheme
+  }, [])
+
+  return (
+    <label className='swap swap-rotate mr-2'>
+      <input
+        data-umami-event={
+          isDark
+            ? EventNames.SWITCH_TO_LIGHT_MODE
+            : EventNames.SWITCH_TO_DARK_MODE
+        }
+        id='theme-toggle'
+        type='checkbox'
+        value={isDark ? DARK_THEME : LIGHT_THEME}
+        onClick={() => toggleTheme()}
+      />
+
+      <Figure
+        cover={{
+          src: isDark ? '/ui/sun.svg' : '/ui/moon.svg',
+          width: 30,
+          height: 30,
+        }}
+        placeholder={isDark ? 'sun' : 'moon'}
+      />
+    </label>
+  )
 }
 export default ThemeController
diff --git a/components/web-link/web-link.test.tsx b/components/web-link/web-link.test.tsx
@@ -3,12 +3,15 @@ import { render } from '@/lib/test-utils'
 import { WebLink } from './web-link'
 
 describe('WebLink', () => {
-	test('renders correctly', () => {
-		const { getByText } = render(
-			<WebLink href='https://example.com' className='flex gap-1'>
-				Example
-			</WebLink>
-		)
-		expect(getByText('Example')).toBeInTheDocument()
-	})
+  test('renders correctly', () => {
+    const { getByText } = render(
+      <WebLink
+        href='https://example.com'
+        className='flex gap-1'
+        eventName='open website'>
+        Example
+      </WebLink>
+    )
+    expect(getByText('Example')).toBeInTheDocument()
+  })
 })
diff --git a/components/web-link/web-link.tsx b/components/web-link/web-link.tsx
@@ -3,7 +3,8 @@ type WebLinkProps = {
   href: string
   className?: string
   target?: string
-  title?:string
+  title?: string
+  eventName: string
 }
 
 export const WebLink = ({
@@ -12,8 +13,10 @@ export const WebLink = ({
   title,
   className,
   target = '_blank',
+  eventName,
 }: WebLinkProps) => (
   <a
+    data-umami-event={eventName}
     href={href}
     title={title}
     className={className}

diff --git a/docs/index.mdx b/docs/index.mdx
@@ -28,10 +28,10 @@ import { WebLink } from '@/components/web-link/web-link'
 
 Espero te guste la idea y si crees que se puede agregar algo más, no dudes en comentarlo! ☺️
 
-Noe <span className="underline">[vamoacodear](https://twitter.com/vamoacodear)</span>
+Noe <span className="underline" data-umami-event="Click on vamoacodear - X">[vamoacodear](https://twitter.com/vamoacodear)</span>
 
 <div className='flex gap-2 mt-4 items-center'>
-	<WebLink href='https://discord.gg/JYnKadCSkV'>
+	<WebLink href='https://discord.gg/JYnKadCSkV' eventName="Click on vamoacodear - Discord">
 		<Figure
 			cover={{
 				width: 40,
@@ -42,7 +42,7 @@ Noe <span className="underline">[vamoacodear](https://twitter.com/vamoacodear)</
 		/>
 	</WebLink>
 
-    <WebLink href='https://twitter.com/vamoacodear'>
+    <WebLink href='https://twitter.com/vamoacodear' eventName="Click on vamoacodear - Twitter">
     	<Figure
     		cover={{
     			width: 30,
@@ -53,7 +53,7 @@ Noe <span className="underline">[vamoacodear](https://twitter.com/vamoacodear)</
     	/>
     </WebLink>
 
-    <WebLink href='https://tiktok.com/@vamoacodear'>
+    <WebLink href='https://tiktok.com/@vamoacodear' eventName="Click on vamoacodear - TikTok">
     	<Figure
     		cover={{
     			width: 33,
@@ -64,7 +64,7 @@ Noe <span className="underline">[vamoacodear](https://twitter.com/vamoacodear)</
     	/>
     </WebLink>
 
-    <WebLink href='https://instagram.com/vamoacodear'>
+    <WebLink href='https://instagram.com/vamoacodear' eventName="Click on vamoacodear - Instagram">
     	<Figure
     		cover={{
     			width: 30,

diff --git a/lib/metrics/event-name-types.ts b/lib/metrics/event-name-types.ts
@@ -0,0 +1,8 @@
+export enum EventNames {
+  CLICK_ON_GO_TO_TOP_BUTTON = 'Click on go to top button',
+  CLICK_ON_GO_TO_GITHUB_REPO = 'Click on Github repository',
+  CLICK_ON_ALGOLIA_SEARCH = 'Click on Algolia Search',
+  CLICK_ON_GH_CONTRIBUTOR = 'Click on Github contributor',
+  SWITCH_TO_DARK_MODE = 'Switch to Dark mode',
+  SWITCH_TO_LIGHT_MODE = 'Switch to Light mode',
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,7 +18,6 @@
   "dependencies": {
     "@docsearch/react": "^3.5.2",
     "@radix-ui/react-icons": "^1.3.0",
-    "@vercel/analytics": "^1.1.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "identity-obj-proxy": "^3.0.0",