feat: analytics

package.json

@@ -19,6 +19,8 @@
         "e2e": "playwright test tests/e2e"
     },
     "dependencies": {
+        "@analytics/google-analytics": "^1.0.5",
+        "analytics": "^0.8.1",
         "@aw-labs/appwrite-console": "^11.0.0",
         "@aw-labs/icons": "0.0.0-77",
         "@aw-labs/ui": "0.0.0-77",
@@ -40,7 +42,6 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/svelte": "^3.2.2",
         "@testing-library/user-event": "^14.4.3",
-        "@types/gtag.js": "^0.0.12",
         "@types/prismjs": "^1.26.0",
         "@typescript-eslint/eslint-plugin": "^5.41.0",
         "@typescript-eslint/parser": "^5.41.0",

src/global.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="@sveltejs/kit" />
-/// <reference types="@types/gtag.js" />
 interface Window {
-    GOOGLE_ANALYTICS: string | false;
     VERCEL_ANALYTICS_ID: string | false;
     SENTRY_DSN: string | false;
 }

src/lib/actions/analytics.ts

@@ -1,32 +1,36 @@
-import type { Action } from 'svelte/action';
+import Analytics from 'analytics';
+import googleAnalytics from '@analytics/google-analytics';
+import { get } from 'svelte/store';
+import { page } from '$app/stores';
 
-export type AnalyticsActionParam = {
-    name: string;
-    action: string;
-    category?: string;
-    label?: string;
-    parameters?: Record<string, string>;
-    event?: keyof HTMLElementEventMap;
-};
+const analytics = Analytics({
+    app: 'appwrite',
+    plugins: [
+        googleAnalytics({
+            measurementIds: [import.meta.env.VITE_GOOGLE_ANALYTICS?.toString()]
+        })
+    ]
+});
 
-export const event: Action<HTMLElement, Partial<AnalyticsActionParam>> = (node, param) => {
+export function trackEvent(name: string, data: object = null): void {
     if (!isTrackingAllowed()) {
         return;
     }
 
-    node.addEventListener(param.event ?? 'click', () => {
-        gtag('event', param.name, {
-            ...param.parameters,
-            action: param.action
-        });
-    });
-};
+    analytics.track(name, { ...data, path: get(page).routeId });
+}
 
-const isTrackingAllowed = () => {
-    if (!('gtag' in window)) {
-        return false;
+export function trackPageView(path: string) {
+    if (!isTrackingAllowed()) {
+        return;
     }
 
+    analytics.page({
+        path
+    });
+}
+
+function isTrackingAllowed() {
     if (window.navigator?.doNotTrack) {
         if (navigator.doNotTrack === '1' || navigator.doNotTrack === 'yes') {
             return false;
@@ -36,4 +40,4 @@ const isTrackingAllowed = () => {
     } else {
         return true;
     }
-};
+}