Add Events Tracking (#82)

timoclsn · Mar 11, 2024 · cb2516c · cb2516c
1 parent cdade42
commit cb2516c
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 15 deletions.
diff --git a/app/events/page.tsx b/app/events/page.tsx
@@ -2,6 +2,7 @@ import { Button } from "components/Button";
 import { CopyCalendarUrlButton } from "components/CopyCalendarUrlButton";
 import { Page } from "components/Page";
 import { StructuredData } from "components/StructuredData";
+import { Track } from "components/Track";
 import { Arrow, Calendar, Location, Profile } from "components/icons";
 import { formatISO } from "date-fns";
 import { eventIcon, getWebsiteEvents, makersInn } from "lib/events";
@@ -77,6 +78,7 @@ const EventsPage = async () => {
               {events.map((event) => {
                 const Icon = eventIcon(event.name);
                 const isMakersInn = makersInn(event.location ?? "");
+                const formattedDate = `${formatDate(event.start, "dd. MMM yyyy | HH")} Uhr`;
                 return (
                   <article key={event.id}>
                     <div className="mb-2 flex items-center gap-3">
@@ -107,7 +109,7 @@ const EventsPage = async () => {
                         ))}
                       <Tag>
                         <Calendar className="text-xl" />
-                        {`${formatDate(event.start, "dd. MMM yyyy | HH")} Uhr`}
+                        {formattedDate}
                       </Tag>
                       <Tag>
                         <Profile className="text-xl" />
@@ -123,17 +125,25 @@ const EventsPage = async () => {
                       />
                     )}
                     {event.url && (
-                      <Button
-                        color="pink"
-                        variant="outline"
-                        size="small"
-                        href={event.url}
-                        target="_blank"
-                        rel="noopener"
+                      <Track
+                        event="Event page sign-up clicked"
+                        data={{
+                          name: event.name,
+                          date: formattedDate,
+                        }}
                       >
-                        <Arrow className="text-2xl" />
-                        Anmelden
-                      </Button>
+                        <Button
+                          color="pink"
+                          variant="outline"
+                          size="small"
+                          href={event.url}
+                          target="_blank"
+                          rel="noopener"
+                        >
+                          <Arrow className="text-2xl" />
+                          Anmelden
+                        </Button>
+                      </Track>
                     )}
                   </article>
                 );

diff --git a/components/EventsSection.tsx b/components/EventsSection.tsx
@@ -4,6 +4,7 @@ import { htmlToString } from "lib/text";
 import { formatDate } from "lib/utils";
 import { ReactNode } from "react";
 import { Button } from "./Button";
+import { Track } from "./Track";
 
 export const EventsSection = async () => {
   const events = await getWebsiteEvents();
@@ -18,6 +19,7 @@ export const EventsSection = async () => {
       <ul className="mb-14 grid grid-cols-1 gap-16 lg:grid-cols-3 lg:gap-8">
         {nextEvents.map((event) => {
           const Icon = eventIcon(event.name);
+          const formattedDate = `${formatDate(event.start, "dd. MMM yyyy | HH")} Uhr`;
           return (
             <li key={event.id} className="flex flex-col justify-between">
               <div>
@@ -33,7 +35,7 @@ export const EventsSection = async () => {
                 <ul className="mb-8 flex flex-wrap gap-2 text-sm">
                   <Tag>
                     <Calendar />
-                    {`${formatDate(event.start, "dd. MMM yyyy | HH")} Uhr`}
+                    {formattedDate}
                   </Tag>
                 </ul>
                 {event.description && (
@@ -45,7 +47,14 @@ export const EventsSection = async () => {
                 )}
               </div>
               {event.url && (
-                <div className="mt-8 flex flex-col md:items-start">
+                <Track
+                  event="Event section more clicked"
+                  data={{
+                    name: event.name,
+                    date: formattedDate,
+                  }}
+                  className="mt-8 flex flex-col md:items-start"
+                >
                   <Button
                     color="light"
                     variant="outline"
@@ -57,7 +66,7 @@ export const EventsSection = async () => {
                     <Arrow className="text-2xl" />
                     Mehr
                   </Button>
-                </div>
+                </Track>
               )}
             </li>
           );

diff --git a/components/Track.tsx b/components/Track.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { TrackingEvents, track } from "lib/tracking";
+import { ElementType, ReactNode } from "react";
+
+type Props<TEventKey extends keyof TrackingEvents> = {
+  as?: ElementType;
+  children: ReactNode;
+  className?: string;
+  event: TEventKey;
+} & (TrackingEvents[TEventKey] extends null
+  ? {}
+  : { data: TrackingEvents[TEventKey] });
+
+export const Track = <TEventKey extends keyof TrackingEvents>({
+  children,
+  as: Element = "div",
+  className,
+  event,
+  ...rest
+}: Props<TEventKey>) => {
+  const data =
+    "data" in rest ? (rest.data as TrackingEvents[TEventKey]) : undefined;
+
+  return (
+    <Element
+      className={className}
+      onClick={() => {
+        // @ts-expect-error Didn't find a way to type the component properly so it fits with the function
+        track(event, data);
+      }}
+    >
+      {children}
+    </Element>
+  );
+};
diff --git a/lib/tracking.ts b/lib/tracking.ts
@@ -1,13 +1,21 @@
 const NEXT_PUBLIC_VERCEL_ENV = process.env.NEXT_PUBLIC_VERCEL_ENV;
 const NODE_ENV = process.env.NODE_ENV;
 
-interface TrackingEvents {
+export interface TrackingEvents {
   "Home hero primary clicked": null;
   "Home hero secondary clicked": null;
   "Apply clicked": null;
   "Next Stammtisch clicked": null;
   "Next Stammtisch closed": null;
   "Copy calendar subscription url": null;
+  "Event section more clicked": {
+    name: string;
+    date: string;
+  };
+  "Event page sign-up clicked": {
+    name: string;
+    date: string;
+  };
 }
 
 export const track = <TEventKey extends keyof TrackingEvents>(