FEATURE: added posthog as new analytics tool

front/src/Administration/AnalyticsClient.ts

@@ -0,0 +1,61 @@
+import {POSTHOG_API_KEY, POSTHOG_URL} from "../Enum/EnvironmentVariable";
+
+class AnalyticsClient {
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private posthogPromise: Promise<any>;
+
+    constructor() {
+        if (POSTHOG_API_KEY && POSTHOG_URL) {
+            this.posthogPromise = import('posthog-js').then(({default: posthog}) => {
+                posthog.init(POSTHOG_API_KEY, { api_host: POSTHOG_URL, disable_cookie: true });
+                return posthog;
+            });
+        } else {
+            this.posthogPromise = Promise.reject();
+        }
+    }
+
+    identifyUser(uuid: string) {
+        this.posthogPromise.then(posthog => {
+            posthog.identify(uuid, { uuid, wa: true });
+        }).catch();
+    }
+
+    loggedWithSso() {
+        this.posthogPromise.then(posthog => {
+            posthog.capture('wa-logged-sso');
+        }).catch();
+    }
+
+    loggedWithToken() {
+        this.posthogPromise.then(posthog => {
+            posthog.capture('wa-logged-token');
+        }).catch();
+    }
+
+    enteredRoom(roomId: string) {
+        this.posthogPromise.then(posthog => {
+            posthog.capture('$pageView', {roomId});
+        }).catch();
+    }
+
+    openedMenu() {
+        this.posthogPromise.then(posthog => {
+            posthog.capture('wa-opened-menu');
+        }).catch();
+    }
+
+    launchEmote(emote: string) {
+        this.posthogPromise.then(posthog => {
+            posthog.capture('wa-emote-launch', {emote});
+        }).catch();
+    }
+
+    enteredJitsi(roomName: string, roomId: string) {
+        this.posthogPromise.then(posthog => {
+            posthog.capture('wa-entered-jitsi', {roomName, roomId});
+        }).catch();
+    }
+}
+export const analyticsClient = new AnalyticsClient();

front/src/Connexion/ConnectionManager.ts

@@ -9,6 +9,7 @@ import { Room } from "./Room";
 import { _ServiceWorker } from "../Network/ServiceWorker";
 import { loginSceneVisibleIframeStore } from "../Stores/LoginSceneStore";
 import { userIsConnected } from "../Stores/MenuStore";
+import {analyticsClient} from "../Administration/AnalyticsClient";
 
 class ConnectionManager {
     private localUser!: LocalUser;
@@ -93,6 +94,7 @@ class ConnectionManager {
             this._currentRoom = await Room.createRoom(new URL(localUserStore.getLastRoomUrl()));
             try {
                 await this.checkAuthUserConnexion();
+                analyticsClient.loggedWithSso();
             } catch (err) {
                 console.error(err);
                 this.loadOpenIDScreen();
@@ -109,6 +111,7 @@ class ConnectionManager {
             this.authToken = data.authToken;
             localUserStore.saveUser(this.localUser);
             localUserStore.setAuthToken(this.authToken);
+            analyticsClient.loggedWithToken();
 
             const roomUrl = data.roomUrl;
 
@@ -184,6 +187,9 @@ class ConnectionManager {
         if (this._currentRoom == undefined) {
             return Promise.reject(new Error("Invalid URL"));
         }
+        if (this.localUser) {
+            analyticsClient.identifyUser(this.localUser.uuid)
+        }
 
         this.serviceWorker = new _ServiceWorker();
         return Promise.resolve(this._currentRoom);

front/src/Enum/EnvironmentVariable.ts

@@ -20,6 +20,8 @@ export const DISPLAY_TERMS_OF_USE = process.env.DISPLAY_TERMS_OF_USE == "true";
 export const NODE_ENV = process.env.NODE_ENV || "development";
 export const CONTACT_URL = process.env.CONTACT_URL || undefined;
 export const PROFILE_URL = process.env.PROFILE_URL || undefined;
+export const POSTHOG_API_KEY: string = process.env.POSTHOG_API_KEY as string || '';
+export const POSTHOG_URL = process.env.POSTHOG_URL || undefined;
 
 export const isMobile = (): boolean => window.innerWidth <= 800 || window.innerHeight <= 600;
 

front/src/Phaser/Game/GameScene.ts

@@ -94,6 +94,7 @@ import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
 import { EmbeddedWebsiteManager } from "./EmbeddedWebsiteManager";
 import { GameMapPropertiesListener } from "./GameMapPropertiesListener";
 import type { RadialMenuItem } from "../Components/RadialMenu";
+import {analyticsClient} from "../../Administration/AnalyticsClient";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface | null;
@@ -426,6 +427,7 @@ export class GameScene extends DirtyScene {
 
         gameManager.gameSceneIsCreated(this);
         urlManager.pushRoomIdToUrl(this.room);
+        analyticsClient.enteredRoom(this.room.id);
 
         if (touchScreenManager.supportTouchScreen) {
             this.pinchManager = new PinchManager(this);
@@ -1438,6 +1440,7 @@ ${escapedMessage}
             });
             this.CurrentPlayer.on(requestEmoteEventName, (emoteKey: string) => {
                 this.connection?.emitEmoteEvent(emoteKey);
+                analyticsClient.launchEmote(emoteKey);
             });
         } catch (err) {
             if (err instanceof TextureError) {
@@ -1805,6 +1808,7 @@ ${escapedMessage}
         jitsiFactory.start(roomName, this.playerName, jwt, jitsiConfig, jitsiInterfaceConfig, jitsiUrl, jitsiWidth);
         this.connection?.setSilent(true);
         mediaManager.hideGameOverlay();
+        analyticsClient.enteredJitsi(roomName, this.room.id);
 
         //permit to stop jitsi when user close iframe
         mediaManager.addTriggerCloseJitsiFrameButton("close-jitsi", () => {

front/src/Stores/MenuStore.ts

@@ -2,11 +2,14 @@ import { get, writable } from "svelte/store";
 import Timeout = NodeJS.Timeout;
 import { userIsAdminStore } from "./GameStore";
 import { CONTACT_URL } from "../Enum/EnvironmentVariable";
+import {analyticsClient} from "../Administration/AnalyticsClient";
 
 export const menuIconVisiblilityStore = writable(false);
 export const menuVisiblilityStore = writable(false);
+menuVisiblilityStore.subscribe((value) => {
+    if (value) analyticsClient.openedMenu();
+})
 export const menuInputFocusStore = writable(false);
-export const loginUrlStore = writable(false);
 export const userIsConnected = writable(false);
 
 let warningContainerTimeout: Timeout | null = null;

front/src/index.ts

@@ -23,9 +23,9 @@ import { Game } from "./Phaser/Game/Game";
 import App from "./Components/App.svelte";
 import { HtmlUtils } from "./WebRtc/HtmlUtils";
 import WebGLRenderer = Phaser.Renderer.WebGL.WebGLRenderer;
+import {analyticsClient} from "./Administration/AnalyticsClient";
 
 const { width, height } = coWebsiteManager.getGameSize();
-
 const valueGameQuality = localUserStore.getGameQualityValue();
 const fps: Phaser.Types.Core.FPSConfig = {
     /**