feat(frontend): add plausible analytics

scripts/build.csp.mjs

@@ -148,6 +148,8 @@ const updateCSP = (indexHtml) => {
 
 	const coingeckoApiConnectSrc = 'https://pro-api.coingecko.com';
 
+	const plausibleApiConnectSrc = 'https://plausible.io/api/event';
+
 	const walletConnectSrc =
 		'wss://relay.walletconnect.com wss://relay.walletconnect.org https://verify.walletconnect.com https://verify.walletconnect.org';
 	const walletConnectFrameSrc = 'https://verify.walletconnect.com https://verify.walletconnect.org';
@@ -165,7 +167,7 @@ const updateCSP = (indexHtml) => {
 	const csp = `<meta
         http-equiv="Content-Security-Policy"
         content="default-src 'none';
-        connect-src 'self' https://ic0.app https://icp0.io https://icp-api.io ${ethMainnetConnectSrc} ${ethSepoliaConnectSrc} ${walletConnectSrc} ${onramperConnectFrameSrc} ${blockstreamApiConnectSrc} ${blockchainApiConnectSrc} ${coingeckoApiConnectSrc} ${solanaApiConnectSrc};
+        connect-src 'self' https://ic0.app https://icp0.io https://icp-api.io ${ethMainnetConnectSrc} ${ethSepoliaConnectSrc} ${walletConnectSrc} ${onramperConnectFrameSrc} ${blockstreamApiConnectSrc} ${blockchainApiConnectSrc} ${coingeckoApiConnectSrc} ${solanaApiConnectSrc} ${plausibleApiConnectSrc};
         img-src 'self' data:;
         frame-src 'self' ${walletConnectFrameSrc} ${onramperConnectFrameSrc};
         manifest-src 'self';

src/frontend/src/env/plausible.env.ts

@@ -0,0 +1 @@
+export const PLAUSIBLE_DOMAIN = 'oisy.com';

src/frontend/src/lib/services/analytics.services.ts

@@ -1,7 +1,12 @@
+import { PLAUSIBLE_DOMAIN } from '$env/plausible.env';
 import { PROD } from '$lib/constants/app.constants';
 import type { TrackEventParams } from '$lib/types/analytics';
-import { isNullish } from '@dfinity/utils';
+import { isNullish, nonNullish } from '@dfinity/utils';
 import { initOrbiter, trackEvent as trackEventOrbiter } from '@junobuild/analytics';
+import Plausible from 'plausible-tracker';
+
+const domain = PLAUSIBLE_DOMAIN;
+let plausibleTracker: ReturnType<typeof Plausible> | null = null;
 
 export const initAnalytics = async () => {
 	if (!PROD) {
@@ -27,11 +32,30 @@ export const initAnalytics = async () => {
 	});
 };
 
+export const initPlausibleAnalytics = () => {
+	if (!PROD) {
+		return;
+	}
+
+	if (isNullish(plausibleTracker)) {
+		plausibleTracker = Plausible({
+			domain,
+			hashMode: false,
+			trackLocalhost: false
+		});
+		plausibleTracker.enableAutoPageviews();
+	}
+};
+
 export const trackEvent = async ({ name, metadata }: TrackEventParams) => {
 	if (!PROD) {
 		return;
 	}
 
+	if (nonNullish(plausibleTracker)) {
+		plausibleTracker.trackEvent(name, { props: metadata });
+	}
+
 	await trackEventOrbiter({
 		name,
 		metadata

src/frontend/src/routes/+layout.svelte

@@ -12,7 +12,11 @@
 		TRACK_SYNC_AUTH_ERROR_COUNT,
 		TRACK_SYNC_AUTH_NOT_AUTHENTICATED_COUNT
 	} from '$lib/constants/analytics.contants';
-	import { initAnalytics, trackEvent } from '$lib/services/analytics.services';
+	import {
+		initAnalytics,
+		initPlausibleAnalytics,
+		trackEvent
+	} from '$lib/services/analytics.services';
 	import { displayAndCleanLogoutMsg } from '$lib/services/auth.services';
 	import { initAuthWorker } from '$lib/services/worker.auth.services';
 	import { authStore, type AuthStoreData } from '$lib/stores/auth.store';
@@ -24,7 +28,8 @@
 	 * Init dApp
 	 */
 
-	const init = async () => await Promise.all([syncAuthStore(), initAnalytics(), i18n.init()]);
+	const init = async () =>
+		await Promise.all([syncAuthStore(), initAnalytics(), initPlausibleAnalytics(), i18n.init()]);
 
 	const syncAuthStore = async () => {
 		if (!browser) {

src/frontend/src/tests/lib/services/analytics.service.spec.ts

@@ -0,0 +1,86 @@
+import type { TrackEventParams } from '$lib/types/analytics';
+import Plausible from 'plausible-tracker';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const trackEventMock = vi.fn();
+const enableAutoPageviews = vi.fn();
+
+vi.mock('plausible-tracker', () => ({
+	default: vi.fn(() => ({
+		enableAutoPageviews,
+		trackEvent: trackEventMock
+	}))
+}));
+
+vi.mock('$lib/constants/app.constants', () => ({
+	PROD: true
+}));
+
+describe('plausible analytics service', () => {
+	beforeEach(() => {
+		vi.resetModules();
+		vi.clearAllMocks();
+	});
+
+	it('should initialize Plausible with correct config', async () => {
+		const { PLAUSIBLE_DOMAIN } = await import('$env/plausible.env');
+		const { initPlausibleAnalytics } = await import('$lib/services/analytics.services');
+
+		initPlausibleAnalytics();
+
+		expect(Plausible).toHaveBeenCalledWith({
+			domain: PLAUSIBLE_DOMAIN,
+			hashMode: false,
+			trackLocalhost: false
+		});
+	});
+
+	it('should enable auto pageviews', async () => {
+		const { initPlausibleAnalytics } = await import('$lib/services/analytics.services');
+
+		expect(enableAutoPageviews).toHaveBeenCalledTimes(0);
+
+		initPlausibleAnalytics();
+
+		expect(enableAutoPageviews).toHaveBeenCalledTimes(1);
+	});
+
+	it('should call trackEvent if tracker is initialized', async () => {
+		const { trackEvent, initPlausibleAnalytics } = await import('$lib/services/analytics.services');
+
+		initPlausibleAnalytics();
+
+		const params: TrackEventParams = {
+			name: 'test_event_name',
+			metadata: { eventName: 'eventValue' }
+		};
+
+		await trackEvent(params);
+
+		expect(trackEventMock).toHaveBeenCalledWith('test_event_name', {
+			props: { eventName: 'eventValue' }
+		});
+	});
+
+	it('should NOT call trackEvent or init anything if PROD is false', async () => {
+		vi.doMock('$lib/constants/app.constants', () => ({
+			PROD: false
+		}));
+
+		const { initPlausibleAnalytics, trackEvent } = await import('$lib/services/analytics.services');
+
+		initPlausibleAnalytics();
+
+		expect(Plausible).not.toHaveBeenCalled();
+		expect(enableAutoPageviews).not.toHaveBeenCalled();
+
+		const params: TrackEventParams = {
+			name: 'test_event_name',
+			metadata: { eventName: 'eventValue' }
+		};
+
+		await trackEvent(params);
+
+		expect(trackEventMock).not.toHaveBeenCalled();
+	});
+});

src/frontend/src/tests/routes/layout.spec.ts

@@ -0,0 +1,36 @@
+import * as analytics from '$lib/services/analytics.services';
+import App from '$routes/+layout.svelte';
+import { render } from '@testing-library/svelte';
+import { beforeAll, describe, expect, it, vi } from 'vitest';
+
+vi.mock('$lib/services/worker.auth.services', () => ({
+	initAuthWorker: vi.fn().mockResolvedValue({
+		syncAuthIdle: vi.fn()
+	})
+}));
+
+beforeAll(() => {
+	Object.defineProperty(window, 'matchMedia', {
+		writable: true,
+		value: vi.fn().mockImplementation((query) => ({
+			matches: false,
+			media: query,
+			onchange: null,
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			dispatchEvent: vi.fn()
+		}))
+	});
+});
+
+describe('App Layout', () => {
+	it('should initialize analytics tracking on mount', () => {
+		const spy = vi.spyOn(analytics, 'initPlausibleAnalytics');
+
+		expect(spy).not.toHaveBeenCalled();
+
+		render(App);
+
+		expect(spy).toHaveBeenCalledTimes(1);
+	});
+});

svelte.config.js

@@ -31,7 +31,8 @@ const config = {
 			$icp: './src/frontend/src/icp',
 			$sol: './src/frontend/src/sol',
 			'$icp-eth': './src/frontend/src/icp-eth',
-			$env: './src/frontend/src/env'
+			$env: './src/frontend/src/env',
+			$routes: './src/frontend/src/routes'
 		},
 
 		serviceWorker: {

tsconfig.spec.json

@@ -19,7 +19,9 @@
 			"$lib": ["./src/frontend/src/lib"],
 			"$lib/*": ["./src/frontend/src/lib/*"],
 			"$tests": ["./src/frontend/src/tests"],
-			"$tests/*": ["./src/frontend/src/tests/*"]
+			"$tests/*": ["./src/frontend/src/tests/*"],
+			"$routes": ["./src/frontend/src/routes"],
+			"$routes/*": ["./src/frontend/src/routes/*"]
 		},
 		"types": ["vitest/globals", "@testing-library/jest-dom"]
 	},