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"
-		}
-	]
-}

pnpm-lock.yaml

@@ -193,6 +193,9 @@ importers:
       next-contentlayer:
         specifier: ^0.3.4
         version: 0.3.4(contentlayer@0.3.4)(esbuild@0.19.5)(next@13.5.6)(react-dom@18.2.0)(react@18.2.0)
+      next-plausible:
+        specifier: ^3.11.2
+        version: 3.11.2(next@13.5.6)(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: 18.2.0
         version: 18.2.0
@@ -4142,7 +4145,7 @@ packages:
       magic-string: 0.27.0
       react-docgen-typescript: 2.2.2(typescript@5.2.2)
       typescript: 5.2.2
-      vite: 4.5.0(less@4.2.0)
+      vite: 4.5.0(@types/node@18.17.19)
 
   /@jridgewell/gen-mapping@0.3.3:
     resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
@@ -7209,7 +7212,7 @@ packages:
       magic-string: 0.30.5
       rollup: 3.29.4
       typescript: 5.2.2
-      vite: 4.5.0(less@4.2.0)
+      vite: 4.5.0(@types/node@18.17.19)
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -7562,7 +7565,7 @@ packages:
       react: 18.2.0
       react-docgen: 6.0.4
       react-dom: 18.2.0(react@18.2.0)
-      vite: 4.5.0(less@4.2.0)
+      vite: 4.5.0(@types/node@18.17.19)
     transitivePeerDependencies:
       - '@preact/preset-vite'
       - encoding
@@ -8643,7 +8646,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.23.2)
       magic-string: 0.27.0
       react-refresh: 0.14.0
-      vite: 4.5.0(less@4.2.0)
+      vite: 4.5.0(@types/node@18.17.19)
     transitivePeerDependencies:
       - supports-color
 
@@ -15962,6 +15965,18 @@ packages:
       - supports-color
     dev: false
 
+  /next-plausible@3.11.2(next@13.5.6)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-T/5RPVYFRk4HODvcnpMPk6pe4HYHQHSwJFGUbAdyKIJWgs4jl3oq3S16D6xKSKP3AEjIwQe4YsotQrDN2ILbjA==}
+    peerDependencies:
+      next: ^11.1.0 || ^12.0.0 || ^13.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      next: 13.5.6(@babel/core@7.23.2)(@opentelemetry/api@1.6.0)(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /next@13.5.6(@babel/core@7.23.2)(@opentelemetry/api@1.6.0)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-Y2wTcTbO4WwEsVb4A8VSnOsG1I9ok+h74q0ZdxkwM3EODqrs4pasq7O0iUxbcS9VtWMicG7f3+HAj0r1+NtKSw==}
     engines: {node: '>=16.14.0'}
@@ -20776,7 +20791,6 @@ packages:
       rollup: 3.29.4
     optionalDependencies:
       fsevents: 2.3.3
-    dev: true
 
   /vite@4.5.0(less@4.2.0):
     resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
@@ -20812,6 +20826,7 @@ packages:
       rollup: 3.29.4
     optionalDependencies:
       fsevents: 2.3.3
+    dev: true
 
   /vite@4.5.0(sass@1.69.4):
     resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}