Small Tweak (#729)

Author: Cahllagerfeld

.env.example

@@ -1,3 +1,4 @@
 VITE_API_BASE_URL=
 VITE_FRONTEND_VERSION=
-VITE_FEATURE_OS_KEY=
+VITE_FEATURE_OS_KEY=
+VITE_REO_KEY=

.github/workflows/release.yml

@@ -35,6 +35,7 @@ jobs:
           VITE_API_BASE_URL: "/api/v1"
           VITE_FRONTEND_VERSION: ${{ steps.get_version.outputs.VERSION }}
           VITE_FEATURE_OS_KEY: ${{ secrets.FEATURE_OS_KEY }}
+          VITE_REO_KEY: ${{ secrets.REO_KEY }}
 
       - name: Generate Changelog
         uses: heinrichreimer/[email protected]

package.json

@@ -38,7 +38,7 @@
 		"jwt-decode": "^4.0.0",
 		"lodash.debounce": "^4.0.8",
 		"papaparse": "^5.5.2",
-		"prismjs": "^1.29.0",
+		"prismjs": "^1.30.0",
 		"react": "^18.3.1",
 		"react-countdown": "^2.3.6",
 		"react-dom": "^18.3.1",
@@ -48,6 +48,7 @@
 		"react-markdown": "^9.0.3",
 		"react-router-dom": "^6.27.0",
 		"reactflow": "^11.11.4",
+		"reodotdev": "^1.0.0",
 		"unique-names-generator": "^4.7.1",
 		"zod": "^3.24.1"
 	},

pnpm-lock.yaml

@@ -1,18 +1,42 @@
 import { fetcher } from "@/data/fetch";
 import { useServerInfo } from "@/data/server/info-query";
 import { useCurrentUser } from "@/data/users/current-user-query";
-
+import { loadReoScript } from "reodotdev";
 import { analyticsServerUrl } from "@/lib/analytics";
 import { routes } from "@/router/routes";
 import { PageEvent, PageEventContext, PageEventPage, PageEventProperties } from "@/types/analytics";
 import { useEffect } from "react";
 import { matchPath, useLocation } from "react-router-dom";
 
+const REO_KEY = import.meta.env.VITE_REO_KEY;
+
 export function Analytics() {
 	const { data } = useServerInfo();
 	const { data: userData } = useCurrentUser();
 	const location = useLocation();
 
+	useEffect(() => {
+		if (REO_KEY && data && data.analytics_enabled && userData) {
+			const reoPromise = loadReoScript({ clientID: REO_KEY });
+			reoPromise
+				.then(async (Reo) => {
+					Reo.init({ clientID: REO_KEY });
+					if (userData.metadata?.email) {
+						// wait 2 seconds to ensure the script is loaded
+						await new Promise((resolve) => setTimeout(resolve, 2000));
+						const identity = {
+							username: userData.metadata.email,
+							type: "email"
+						};
+						Reo.identify(identity);
+					}
+				})
+				.catch((error) => {
+					console.error("Error loading Reo", error);
+				});
+		}
+	}, [data, userData]);
+
 	useEffect(() => {
 		if (data && data.analytics_enabled && userData) {
 			performPageEvent(

src/components/Analytics.tsx

@@ -0,0 +1,8 @@
+declare module "reodotdev" {
+	interface ReoInstance {
+		init(options: { clientID: string }): void;
+		identify(identity: { username: string; type: string }): void;
+	}
+
+	export function loadReoScript(options: { clientID: string }): Promise<ReoInstance>;
+}