feat: add optional amplitude tracking

src/components/providers/FrameProvider.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState, useCallback } from "react";
 import sdk, { type Context, type FrameNotificationDetails, AddMiniApp } from "@farcaster/frame-sdk";
 import { createStore } from "mipd";
 import React from "react";
+import { logEvent } from "../../lib/amplitude";
 
 interface FrameContextType {
   isSDKLoaded: boolean;
@@ -72,36 +73,54 @@ export function useFrame() {
       setContext(context);
       setIsSDKLoaded(true);
 
+      const amplitudeBaseEvent = {
+        fid: context.user.fid,
+        username: context.user.username,
+        clientFid: context.client.clientFid,
+      };
+      const amplitudeUserId = `${context.user.fid}-${context.client.clientFid}`;
+
+      logEvent("Frame Opened", {
+        ...amplitudeBaseEvent,
+        location: context.location,
+        added: context.client.added,
+      }, amplitudeUserId);
+
       // Set up event listeners
       sdk.on("frameAdded", ({ notificationDetails }) => {
         console.log("Frame added", notificationDetails);
         setAdded(true);
         setNotificationDetails(notificationDetails ?? null);
         setLastEvent("Frame added");
+        logEvent("Frame Added", amplitudeBaseEvent, amplitudeUserId);
       });
 
       sdk.on("frameAddRejected", ({ reason }) => {
         console.log("Frame add rejected", reason);
         setAdded(false);
         setLastEvent(`Frame add rejected: ${reason}`);
+        logEvent("Frame Add Rejected", amplitudeBaseEvent, amplitudeUserId);
       });
 
       sdk.on("frameRemoved", () => {
         console.log("Frame removed");
         setAdded(false);
         setLastEvent("Frame removed");
+        logEvent("Frame Removed", amplitudeBaseEvent, amplitudeUserId);
       });
 
       sdk.on("notificationsEnabled", ({ notificationDetails }) => {
         console.log("Notifications enabled", notificationDetails);
         setNotificationDetails(notificationDetails ?? null);
         setLastEvent("Notifications enabled");
+        logEvent("Notifications Enabled", amplitudeBaseEvent, amplitudeUserId);
       });
 
       sdk.on("notificationsDisabled", () => {
         console.log("Notifications disabled");
         setNotificationDetails(null);
         setLastEvent("Notifications disabled");
+        logEvent("Notifications Disabled", amplitudeBaseEvent, amplitudeUserId);
       });
 
       sdk.on("primaryButtonClicked", () => {

src/lib/amplitude.ts

@@ -0,0 +1,34 @@
+import { APP_URL } from "./constants";
+
+// Amplitude tracking -- only runs if configured via the CLI or in the .env file
+export function logEvent(
+  eventType: string, 
+  eventProperties: Record<string, any> = {}, 
+  deviceId: string | null = null
+) {
+  if (process.env.NEXT_PUBLIC_ANALYTICS_ENABLED?.toLowerCase() !== 'true' || process.env.NODE_ENV !== "production") {
+    return;
+  }
+
+  const event = {
+    event_type: eventType,
+    api_key: '0c4fe46171b9bb8eca2ca61eb71f2e19',
+    time: Date.now(),
+    user_id: APP_URL,
+    ...(deviceId && { device_id: deviceId }),
+    ...(Object.keys(eventProperties).length && { event_properties: eventProperties })
+  };
+
+  fetch('https://api2.amplitude.com/2/httpapi', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      api_key: '0c4fe46171b9bb8eca2ca61eb71f2e19',
+      events: [event]
+    })
+  }).catch(error => {
+    console.error('Amplitude tracking error:', error);
+  });
+}