Analyitics done

src/Ackee.ts

@@ -3,7 +3,8 @@ import * as ackeeTracker from 'ackee-tracker'
 const doNotTrack = navigator.doNotTrack == "1" || localStorage.doNotTrack || sessionStorage.doNotTrack || false;
 const isDev = process.env.NODE_ENV !== "production"
 export enum Actions {
-LCP="05296971-2faa-431b-ae01-e7d68e5d6ec4"
+LCP="05296971-2faa-431b-ae01-e7d68e5d6ec4",
+CONTACT_FORM="e49da181-1b12-4db4-8296-35ec26a8f1a9"
 }
 export default class Ackee {
     client: ackeeTracker.AckeeInstance
@@ -23,9 +24,53 @@ this.client = ackeeTracker.create(server_url, {
     ignoreOwnVisits: false,
 })
 this.domainId = id
+this.init()
+}
+init() {
+    this.client.record(this.domainId)
+}
+getDeviceInfo() {
+    const nav = /** @type {null | (Navigator & { deviceMemory: number, connection: NetworkInformation })} */ (typeof navigator ===
+    'undefined'
+      ? null
+      : navigator)
+    // const conn = nav && nav.connection ? nav.connection : null
+    return {
+      url: window.location ? window.location.href : null,
+      referrer: document ? document.referrer : null,
+      userAgent: nav ? nav.userAgent : null,
+    //   memory: nav ? nav.deviceMemory : undefined,
+      cpus: nav ? nav.hardwareConcurrency : undefined,
+    //   connection: conn ? { effectiveType: conn.effectiveType, rtt: conn.rtt, downlink: conn.downlink } : undefined,
+    }
+  }
   
-}
+handleWebVitals = () =>(d: any) => {
-handleWebVitals(d: any) {
+console.log(d)
+let idThing = d.name
+// const _this = this
+switch(idThing) {
+    // case "TTFB":
+    //     // console.log(`TTFB: ${entry.responseStart}`, entry.name);
 
+    // break;
+    case "LCP":
+d.entries.forEach((e: any) =>{
+    this.client.action(Actions.LCP, {
+        key: e.id || d.id,
+        value: e.loadTime + e.renderTime
+    })
+})
+        break;
+        default:
+        if(isDev)    console.log(`I have NO idea what the rest is!`)
+        break;
+}
+}
+contactPage(email: string) {
+    return this.client.action(Actions.CONTACT_FORM, {
+        key: email,
+        value: 1
+    })
 }
 }

src/App.tsx

@@ -13,7 +13,7 @@ import ContactPage from './components/ContactPage'
 // import logo from './logo.svg';
 // import './App.css';
 
-function App () {
+function App ({ analytics }: any) {
   return (
     <HashRouter>
       <Route path={'#/'} index component={<div style={{ zIndex: 9999 }}>
@@ -27,7 +27,7 @@ function App () {
         <GithubStats />
         </>} />
         <Route path='#/projects' component={<Projects />} />
-        <Route path='#/contact' component={<ContactPage />} />
+        <Route path='#/contact' component={<ContactPage analytics={analytics} />} />
         <Route path='*' component={<Page404 />} />
     </HashRouter>
   )

src/components/ContactPage/index.tsx

@@ -1,13 +1,14 @@
 import { useState } from "react"
 
 const isDev =  process.env.NODE_ENV !== 'production'
-export default function ContactPage() {
+export default function ContactPage({ analytics }: any) {
     const [done, setDone] = useState(false)
     const [error, setError] = useState<string |  null>(null)
     const [email, setEmail] = useState("")
     const [message, setMessage] = useState("")
     const [nameOfPerson, setName] = useState("")
     const onSubmit = (e: any) => {
+        analytics.contactPage(email)
         if(isDev) {
             // dev mode dosent have php backend so i have to run it do ABSOULTLEY NOTHING!
             // just pretend it works
@@ -34,10 +35,11 @@ if(Math.random() > .5) {
                 }
             })
         }
+        
     }
     const ui = (f: any) => (e: any) => f(e.target.value)
     return <div className="hero min-h-screen ">
-    <div className="hero-content text-center">
+    <div className="text-center">
       <div className="max-w-md">
         <h1 className="text-5xl font-bold text-highlight mt-10">Contact Form</h1>
         {/* <p className="py-6">Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.</p> */}
@@ -91,5 +93,7 @@ export function ContactForm({ onSubmit,
 <div>
     <button type="submit" className="btn mauve" style={{ background: "var(--surface0)"}}>Submit</button>
 </div>
+    <br />
     </form>
+    
 }

src/components/footer/index.tsx

@@ -5,7 +5,8 @@ import bento from '../../assets/bento.svg'
 import './index.css'
 
 export default function Footer () {
-  return <footer className='footer items-center p-4 bottom-0 overflow-hidden' style={{ zIndex: 9999, overflow: 'hidden', color: 'var(--text)', background: 'var(--mantle)' }}>
+  return <>
+  <footer className='footer items-center p-4 bottom-0 overflow-hidden' style={{ zIndex: 9999, overflow: 'hidden', color: 'var(--text)', background: 'var(--mantle)' }}>
     <aside className='items-center grid-flow-col'>
       {/* <svg width="36" height="36" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fillRule="evenodd" clipRule="evenodd" className="fill-current"><path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path></svg>  */}
       {/* <p>Copyright © 2024 - All right reserved</p> */}
@@ -27,4 +28,5 @@ export default function Footer () {
       <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg></a> */}
     </nav>
   </footer>
+  </>
 }

src/index.tsx

@@ -11,6 +11,11 @@ import { runTitle } from './scripts/title';
 import { startEvent } from './scripts/hashevent';
 import { listenForEasterEgg } from './scripts/oneko_easteregg';
 import Footer from './components/footer';
+import Ackee from './Ackee';
+const analytics = new Ackee({
+  server_url: process.env.REACT_APP_SERVER_URL || "https://ackee.saahild.com", 
+  id: `c082bd15-f9d8-414f-aa10-926e1d66a5d6`
+})
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
@@ -23,15 +28,13 @@ document.title = 'React App';
 root.render(
   <React.StrictMode>
     <Background />
-
       <Navbar />
-    <App />
+    <App analytics={analytics} />
     <Footer />
-
   </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals(console.log);
+reportWebVitals(analytics.handleWebVitals());