📈 feat: add LogSnag integration for user tracking

Integrate LogSnag to track user sign-ups and downloads:

- Track user downloads with OS and user metadata
- Identify users and track sign-up events in LogSnag
- Add LogSnagProvider for app-wide tracking

Author: mangledbottles

apps/web/app/(default)/download/DownloadButton.tsx

@@ -4,6 +4,8 @@ import { getOS } from "@/app/utils";
 import { GithubStars } from "@/components/GithubStars";
 import { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
+import { useSession } from "next-auth/react";
+import { useLogSnag } from "@logsnag/next";
 
 // Define the interface for a GitHub release asset
 interface ReleaseAsset {
@@ -47,12 +49,32 @@ const fetchReleases = async (): Promise<GitHubRelease[]> => {
 
 export const DownloadButton = () => {
   const [os, setOs] = useState<string | null>(null);
+  const { data: session } = useSession();
+  const { track } = useLogSnag();
 
   useEffect(() => {
     const updatedOs = getOS();
     setOs(updatedOs);
   }, []);
 
+  const handleDownloadClick = (os: string) => {
+    // Check if the user is logged in and has a valid session
+    if (session && session.user && session.user.email) {
+      // Track the download event with LogSnag
+      track({
+        channel: "downloads",
+        event: "User Download",
+        // @ts-ignore
+        user_id: session.user.id,
+        tags: {
+          os: os ?? "Unknown",
+        },
+        notify: true,
+        icon: "🚀",
+      });
+    }
+  };
+
   const {
     data: releases,
     isLoading,
@@ -92,20 +114,33 @@ export const DownloadButton = () => {
       <span className="animate-pulse inline-flex items-center rounded-md bg-blue-400/10 px-3 py-3 text-2xl font-medium text-blue-400 ring-1 ring-inset ring-blue-400/30 hover:bg-blue-400/20 dark:bg-blue-400/20 dark:text-blue-400 dark:ring-blue-400/20 w-44 h-16 cursor-pointer"></span>
     );
 
-  if (os === "macOS") return <MacDownloadButton releases={releases ?? []} />;
+  if (os === "macOS")
+    return (
+      <MacDownloadButton
+        releases={releases ?? []}
+        handleDownloadClick={handleDownloadClick}
+      />
+    );
 
   return (
     <a
       href={downloadUrl ?? "#"}
       className="inline-flex items-center rounded-md bg-blue-400/10 px-3 py-3 text-2xl font-medium text-blue-400 ring-1 ring-inset ring-blue-400/30 hover:bg-blue-400/20 dark:bg-blue-400/20 dark:text-blue-400 dark:ring-blue-400/20"
       download
+      onClick={() => handleDownloadClick(os)}
     >
       Download for {os}
     </a>
   );
 };
 
-const MacDownloadButton = ({ releases }: { releases: GitHubRelease[] }) => {
+const MacDownloadButton = ({
+  releases,
+  handleDownloadClick,
+}: {
+  releases: GitHubRelease[];
+  handleDownloadClick: (os: string) => void;
+}) => {
   const intelMacPattern = /ScreenLink-\d+\.\d+\.\d+\.dmg/;
   const armMacPattern = /ScreenLink-\d+\.\d+\.\d+-arm64\.dmg/;
 
@@ -128,6 +163,7 @@ const MacDownloadButton = ({ releases }: { releases: GitHubRelease[] }) => {
           }
           className="inline-flex items-center rounded-md bg-blue-400/10 px-3 py-3 text-2xl font-medium text-blue-400 ring-1 ring-inset ring-blue-400/30 hover:bg-blue-400/20 dark:bg-blue-400/20 dark:text-blue-400 dark:ring-blue-400/20"
           download
+          onClick={() => handleDownloadClick("mac-intel")}
         >
           Download for Intel
         </a>
@@ -141,6 +177,7 @@ const MacDownloadButton = ({ releases }: { releases: GitHubRelease[] }) => {
           }
           className="inline-flex items-center rounded-md bg-blue-400/10 px-3 py-3 text-2xl font-medium text-blue-400 ring-1 ring-inset ring-blue-400/30 hover:bg-blue-400/20 dark:bg-blue-400/20 dark:text-blue-400 dark:ring-blue-400/20"
           download
+          onClick={() => handleDownloadClick("mac-arm")}
         >
           Download for Apple Silicon
         </a>

apps/web/app/(default)/download/page.tsx

@@ -1,6 +1,5 @@
 import { constructMetadata } from "@/app/utils";
 import { DownloadButton } from "./DownloadButton";
-import Link from "next/link";
 export const metadata = constructMetadata({
   description:
     "Download for MacOS, Windows, or Linux to record your screen and share demos with ScreenLink",

apps/web/app/api/auth/[...nextauth]/AuthOptions.ts

@@ -6,6 +6,7 @@ import { PrismaAdapter } from "@next-auth/prisma-adapter";
 import { PrismaClient } from "@prisma/client";
 import { loops, posthog_serverside } from "@/app/utils";
 import { captureException } from "@sentry/nextjs";
+import { logsnag } from "@/utils/logsnag";
 
 const prisma = new PrismaClient();
 
@@ -133,6 +134,24 @@ export const authOptions: NextAuthOptions = {
             try {
                 console.log("User sign in completed");
                 if (message.isNewUser) {
+
+                    logsnag.identify({
+                        user_id: message.user.id,
+                        properties: {
+                            name: message.user.name ?? "",
+                            email: message.user.email ?? "",
+                            image: message.user.image ?? "",
+                        },
+                    })
+
+                    logsnag.track({
+                        channel: "User",
+                        event: "Sign Up",
+                        notify: true,
+                        user_id: message.user.id,
+                        icon: "🎉"
+                    })
+
                     console.log("New user sign up")
                     const [firstName, lastName] = message?.user?.name?.split(" ") ?? ["", ""];
                     const userEmail = message?.user?.email;

apps/web/app/layout.tsx

@@ -12,6 +12,7 @@ import Script from "next/script";
 import { Metadata } from "next";
 import { TanQueryProvider } from "@/components/TanQueryProvider";
 import { SpeedInsights } from "@vercel/speed-insights/next";
+import { LogSnagProvider } from "@logsnag/next";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -81,21 +82,23 @@ export default function RootLayout({
             <SpeedInsights />
             <AuthUser />
             <PostHogPageview />
-          </Suspense>
-          <Toaster position="top-right" />
-          <Analytics />
-          <script
-            defer={true}
-            data-domain="screenlink.io"
-            src="https://analytics.dermot.email/js/script.js"
-          ></script>
-          <script
-            async
-            src="https://js.stripe.com/v3/pricing-table.js"
-            defer={true}
-          ></script>
-          <Script strategy="lazyOnload">
-            {`
+            <LogSnagProvider
+              token={process.env.LOGSNAG_API_TOKEN!}
+              project={process.env.LOGSNAG_PROJECT_NAME!}
+            />
+            <Analytics />
+            <script
+              defer={true}
+              data-domain="screenlink.io"
+              src="https://analytics.dermot.email/js/script.js"
+            ></script>
+            <script
+              async
+              src="https://js.stripe.com/v3/pricing-table.js"
+              defer={true}
+            ></script>
+            <Script strategy="lazyOnload">
+              {`
           var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
           (function(){
           var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
@@ -106,20 +109,22 @@ export default function RootLayout({
           s0.parentNode.insertBefore(s1,s0);
           })();
     `}
-          </Script>
-          <Script
-            async
-            src="https://www.googletagmanager.com/gtag/js?id=AW-16448683587"
-          />
-          <Script>
-            {`
+            </Script>
+            <Script
+              async
+              src="https://www.googletagmanager.com/gtag/js?id=AW-16448683587"
+            />
+            <Script>
+              {`
   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
 
   gtag('config', 'AW-16448683587');
   `}
-          </Script>
+            </Script>
+          </Suspense>
+          <Toaster position="top-right" />
         </body>
       </html>
     </AuthProvider>

apps/web/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.17",
     "@hookform/resolvers": "^3.3.4",
+    "@logsnag/next": "^1.0.3",
     "@mux/mux-node": "^7.3.2",
     "@next-auth/prisma-adapter": "^1.0.7",
     "@prisma/client": "^5.6.0",

apps/web/utils/logsnag.ts

@@ -0,0 +1,7 @@
+import { LogSnag } from '@logsnag/next/server';
+
+export const logsnag = new LogSnag({
+    token: process.env.LOGSNAG_API_TOKEN!,
+    project: process.env.LOGSNAG_PROJECT!,
+});
+

apps/web/yarn.lock

@@ -269,6 +269,11 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@logsnag/next@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@logsnag/next/-/next-1.0.3.tgz#ba59b601a59386fdeb02aa96ba8dc4c9fcd87527"
+  integrity sha512-HcbZx2NlWK8qVVnsnTAxrWWts/eVZFI1hvHk5FgP/qXIqY5gRyYqwe/r3x6CnHZXw27s4BXW8jFT6zXusk0eYA==
+
 "@mux/mux-node@^7.3.2":
   version "7.3.3"
   resolved "https://registry.npmjs.org/@mux/mux-node/-/mux-node-7.3.3.tgz"