Add amplitude analytics

v3/docusaurus.config.ts

@@ -18,7 +18,9 @@ const config: Config = {
 	onBrokenMarkdownLinks:
 		process.env.NODE_ENV === "production" ? "throw" : "warn",
 	future: {
-		experimental_faster: true,
+		// Use rspack only during the build phase for faster CI times
+		// In dev mode it crashes often while hot reloading
+		experimental_faster: process.env.NODE_ENV === "production" ? true : false,
 	},
 	// Even if you don't use internationalization, you can use this field to set
 	// useful metadata like html lang. For example, if your site is Chinese, you
@@ -130,10 +132,6 @@ const config: Config = {
 		// 	},
 		// ],
 	].filter(Boolean),
-	clientModules: [
-		//used to intercept client side navigation and fire analytics events.
-		require.resolve("./src/plugins/locationInterceptor"),
-	],
 };
 
 // As far as I can tell docusaurus doesn't export this type

v3/package.json

@@ -18,6 +18,7 @@
 		"ai": "bun run scripts/ai"
 	},
 	"dependencies": {
+		"@amplitude/analytics-browser": "^2.11.11",
 		"@docsearch/react": "^3.6.2",
 		"@docusaurus/core": "3.6.2",
 		"@docusaurus/plugin-client-redirects": "^3.6.2",
@@ -33,13 +34,15 @@
 		"clsx": "^2.0.0",
 		"docusaurus-plugin-sass": "^0.2.5",
 		"dotenv": "^16.4.5",
+		"js-cookie": "^3.0.5",
 		"motion": "^11.13.1",
 		"prism-react-renderer": "^2.3.0",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0",
 		"sass": "^1.80.6",
 		"supertokens-website": "^20.1.5",
-		"tailwind-merge": "^2.5.5"
+		"tailwind-merge": "^2.5.5",
+		"uuid": "^11.0.3"
 	},
 	"devDependencies": {
 		"@docusaurus/faster": "^3.6.3",

v3/src/components/Cards/ReferenceCard/ReferenceCard.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { Card, Flex, Avatar, Grid, Box, Text } from "@radix-ui/themes";
 import Link from "@docusaurus/Link";
 
 import "./styles.scss";
+import { trackButtonClick } from "@site/src/lib/analytics";
 
 function ReferenceCardRoot({
 	children,
@@ -15,11 +16,17 @@ function ReferenceCardRoot({
 		return false;
 	});
 
+	const onClick = useCallback(() => {
+		trackButtonClick("button_reference_card", "v1", {
+			href,
+		});
+	}, [href]);
+
 	if (hasAvatarInChildren) {
 		return (
 			<Box p="4" asChild>
 				<Card className="reference-card" asChild>
-					<Link to={href}>
+					<Link to={href} onClick={onClick}>
 						<Flex gap="3" align="center">
 							{children}
 						</Flex>
@@ -32,7 +39,7 @@ function ReferenceCardRoot({
 	return (
 		<Box p="5" asChild>
 			<Card className="reference-card">
-				<Link to={href}>
+				<Link to={href} onClick={onClick}>
 					<Flex gap="3" direction="column">
 						{children}
 					</Flex>

v3/src/lib/amplitude.ts

@@ -0,0 +1,58 @@
+import * as amplitude from "@amplitude/analytics-browser";
+
+let amplitudeInitialized = false;
+let amplitudeUserIdentified = false;
+
+export const initAmplitude = () => {
+	if (amplitudeInitialized) {
+		return;
+	}
+	amplitude.init("b61f581fe0775f56038a6264af879aa9", {
+		logLevel:
+			isTestEnv() || isDev()
+				? amplitude.Types.LogLevel.Debug
+				: amplitude.Types.LogLevel.None,
+		autocapture: {
+			attribution: true,
+			pageViews: true,
+			sessions: true,
+			formInteractions: true,
+			fileDownloads: true,
+			elementInteractions: true,
+		},
+	});
+	amplitudeInitialized = true;
+};
+
+export const trackEvent = (event: string, properties: Record<string, any>) => {
+	if (!amplitudeInitialized) {
+		initAmplitude();
+	}
+	amplitude.track(event, properties);
+};
+
+const identifyEvent = new amplitude.Identify();
+
+export const identifyUser = (
+	properties: Record<string, amplitude.Types.ValidPropertyType>,
+) => {
+	if (!amplitudeInitialized) {
+		initAmplitude();
+	}
+	if (amplitudeUserIdentified) {
+		return;
+	}
+	for (const [key, value] of Object.entries(properties)) {
+		identifyEvent.set(key, value);
+	}
+
+	amplitude.identify(identifyEvent);
+	amplitudeUserIdentified = true;
+};
+
+function isDev() {
+	return window.location.host.startsWith("localhost");
+}
+function isTestEnv() {
+	return window.location.host === "test.supertokens.com";
+}