Fix landing analytics (#1675)

fixerino

apps/landing/next.config.js

@@ -3,6 +3,7 @@ const { withContentlayer } = require('next-contentlayer');
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
 	enabled: process.env.ANALYZE === 'true'
 });
+const { withPlausibleProxy } = require('next-plausible');
 
 // Validate env on build // TODO: I wish we could do this so Vercel can warn us when we are wrong but it's too hard.
 // import './src/env.mjs';
@@ -77,4 +78,4 @@ const nextConfig = {
 	}
 };
 
-module.exports = withBundleAnalyzer(withContentlayer(nextConfig));
+module.exports = withPlausibleProxy()(withBundleAnalyzer(withContentlayer(nextConfig)));

apps/landing/package.json

@@ -25,6 +25,7 @@
 		"markdown-to-jsx": "^7.3.2",
 		"next": "13.5.6",
 		"next-contentlayer": "^0.3.4",
+		"next-plausible": "^3.11.2",
 		"react": "18.2.0",
 		"react-burger-menu": "^3.0.9",
 		"react-device-detect": "^2.2.3",

apps/landing/src/app/Downloads.tsx

@@ -2,8 +2,8 @@
 
 import { AndroidLogo, Globe, LinuxLogo, WindowsLogo } from '@phosphor-icons/react';
 import { Apple, Github } from '@sd/assets/svgs/brands';
-import clsx from 'clsx';
 import { motion } from 'framer-motion';
+import { usePlausible } from 'next-plausible';
 import { ComponentProps, FunctionComponent, useEffect, useState } from 'react';
 import { Tooltip } from '@sd/ui';
 
@@ -56,6 +56,8 @@ export function Downloads({ latestVersion }: Props) {
 	const [selectedPlatform, setSelectedPlatform] = useState<Platform | null>(null);
 	const currentPlatform = useCurrentPlatform();
 
+	const plausible = usePlausible();
+
 	const formattedVersion = (() => {
 		const platform = selectedPlatform ?? currentPlatform;
 
@@ -80,10 +82,15 @@ export function Downloads({ latestVersion }: Props) {
 										? `${BASE_DL_LINK}/${currentPlatform.os}/${links[0].arch}`
 										: undefined
 								}
-								className={`z-5 plausible-event-name=download plausible-event-os= relative${currentPlatform.name}`}
+								className={`z-5 relative`}
 								icon={Icon ? <Icon width="1rem" height="1rem" /> : undefined}
 								text={`Download for ${currentPlatform.name}`}
-								onClick={() => setSelectedPlatform(currentPlatform)}
+								onClick={() => {
+									plausible('download', {
+										props: { os: currentPlatform.name }
+									});
+									setSelectedPlatform(currentPlatform);
+								}}
 							/>
 						);
 					})()}
@@ -106,10 +113,12 @@ export function Downloads({ latestVersion }: Props) {
 							text={name}
 							target="_blank"
 							href={`${BASE_DL_LINK}/${selectedPlatform.os}/${arch}`}
-							className={clsx(
-								'z-5 relative !py-1 !text-sm',
-								`plausible-event-name=download plausible-event-os=${selectedPlatform.name}+${arch}`
-							)}
+							onClick={() => {
+								plausible('download', {
+									props: { os: selectedPlatform.name + arch }
+								});
+							}}
+							className="z-5 relative !py-1 !text-sm"
 						/>
 					))}
 				</div>
@@ -135,13 +144,15 @@ export function Downloads({ latestVersion }: Props) {
 							<Platform
 								key={platform.name}
 								platform={platform}
-								className={clsx(
-									platform.links?.length == 1 &&
-										`plausible-event-name=download plausible-event-os=${platform.name}`
-								)}
 								onClick={() => {
-									if (platform.links && platform.links.length > 1)
+									if (platform.links && platform.links.length === 1) {
+										plausible('download', {
+											props: { os: platform.name }
+										});
+									}
+									if (platform.links && platform.links.length > 1) {
 										setSelectedPlatform(platform);
+									}
 								}}
 							/>
 						</motion.div>

apps/landing/src/app/layout.tsx

@@ -7,6 +7,8 @@ import '@sd/ui/style/style.scss';
 import '~/styles/prism.css';
 import '~/styles/style.scss';
 
+import PlausibleProvider from 'next-plausible';
+
 import { Providers } from './Providers';
 
 export const metadata = {
@@ -25,6 +27,14 @@ export const metadata = {
 export default function Layout({ children }: PropsWithChildren) {
 	return (
 		<html lang="en" className="dark scroll-smooth">
+			<head>
+				<PlausibleProvider
+					domain="spacedrive.com"
+					customDomain="spacedrive.com"
+					trackOutboundLinks
+					taggedEvents
+				/>
+			</head>
 			<body>
 				<Providers>
 					<div className="overflow-hidden dark:bg-[#030014]/60">

apps/landing/vercel.json

@@ -1,12 +0,0 @@
-{
-	"rewrites": [
-		{
-			"source": "/stats/js/script.js",
-			"destination": "https://plausible.io/js/script.tagged-events.outbound-links.js"
-		},
-		{
-			"source": "/stats/api/event",
-			"destination": "https://plausible.io/api/event"
-		}
-	]
-}