Add analytics

src/analytics.ts

@@ -0,0 +1,41 @@
+import {
+  init as plausibleInit,
+  track as plausibleTrack,
+  type PlausibleEventOptions,
+} from '@plausible-analytics/tracker';
+
+const ANALYTICS_AUTO_CAPTURE_PAGEVIEWS = true;
+const ANALYTICS_DOMAIN = 'schmelczer.dev/sdf2d';
+const ANALYTICS_ENDPOINT = 'https://stats.schmelczer.dev/status';
+const ANALYTICS_LOGGING = process.env.NODE_ENV !== 'production';
+
+let isInitialized = false;
+
+export const track = (
+  eventName: string,
+  options: PlausibleEventOptions = {}
+) => {
+  try {
+    plausibleTrack(eventName, options);
+  } catch (error) {
+    console.warn(`Could not track analytics event "${eventName}".`, error);
+  }
+};
+
+export const initAnalytics = () => {
+  if (isInitialized) {
+    return;
+  }
+
+  try {
+    plausibleInit({
+      domain: ANALYTICS_DOMAIN,
+      endpoint: ANALYTICS_ENDPOINT,
+      autoCapturePageviews: ANALYTICS_AUTO_CAPTURE_PAGEVIEWS,
+      logging: ANALYTICS_LOGGING,
+    });
+    isInitialized = true;
+  } catch (error) {
+    console.warn('Could not initialize analytics.', error);
+  }
+};

src/index.ts

@@ -8,6 +8,7 @@ import '../static/no-change/favicons/favicon-32x32.png';
 import '../static/no-change/favicons/favicon.ico';
 import '../static/no-change/og-image.png';
 import '../static/no-change/robots.txt';
+import { initAnalytics } from './analytics';
 import { extractInsights } from './helper/extract-insights';
 import { handleFullScreen } from './helper/handle-full-screen';
 import { handleInsights } from './helper/handle-insights';
@@ -24,6 +25,7 @@ Random.seed = 2;
 
 glMatrix.setMatrixArrayType(Array);
 removeUnnecessaryOutlines();
+initAnalytics();
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const logo = document.querySelector('#info') as HTMLElement;