From 572be300752c0715c951e863378499e3cfc728cc Mon Sep 17 00:00:00 2001
From: Colby Fayock <fayock@gmail.com>
Date: Fri, 12 Apr 2024 14:49:18 -0300
Subject: [PATCH] Step 4: Adding a custom event

---
 app/page.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/page.tsx b/app/page.tsx
index 5705d4e..b1dd77a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,8 +1,16 @@
+"use client";
+import { usePlausible } from 'next-plausible'
 import Image from "next/image";
 
 export default function Home() {
+  const plausible = usePlausible();
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <p>
+        <button onClick={() => plausible('myEvent')}>
+          Track me!
+        </button>
+      </p>
       <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
         <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
           Get started by editing&nbsp;