add tracking

website/src/lib/calculatorWidget.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { slide } from 'svelte/transition';
+	import { trackEvent } from '../routes/tracking';
 	import type { Calculator } from './calculator';
 	import { setOption } from './calculatorModule';
 	import {
@@ -63,6 +64,7 @@
 			}
 			return;
 		}
+		trackEvent('calculator', 'submit', submittedByBlur ? 'by blur' : 'by enter');
 		if (submitOnBlur) {
 			calculator.submitCalculation(currentInput);
 			currentInput = '';

website/src/lib/history.ts

@@ -1,3 +1,4 @@
+import { trackEvent } from '../routes/tracking';
 import type { Calculation } from './calculator';
 
 const tutorialCalculations: Calculation[] = [
@@ -60,6 +61,7 @@ export class History {
 		this.entries = this.entries.filter((c) => c.id !== id);
 		this.save();
 		this.notifyChangeListeners();
+		trackEvent('history', 'delete');
 	}
 
 	private doWithEntry(
@@ -79,12 +81,14 @@ export class History {
 			entry.isBookmarked = true;
 			entry.bookmarkName = name;
 		});
+		trackEvent('history', 'bookmark');
 	}
 
 	renameBookmark(id: string, name?: string) {
 		this.doWithEntry(id, (entry) => {
 			entry.bookmarkName = name;
 		});
+		trackEvent('history', 'renameBookmark');
 	}
 
 	removeBookmark(id: string) {
@@ -154,6 +158,7 @@ export class History {
 		];
 		this.save();
 		this.notifyChangeListeners();
+		trackEvent('history', 'clear');
 	}
 
 	isEmpty() {

website/src/lib/historyItem.svelte

@@ -8,6 +8,7 @@
 	} from '@fortawesome/free-solid-svg-icons';
 	import type { Calculation } from './calculator';
 	import type { History } from './history';
+	import { trackEvent } from '../routes/tracking';
 
 	export let calculation: Calculation;
 	export let history: History;
@@ -26,12 +27,13 @@
 	let copyAnimated = false;
 	function copyClick() {
 		navigator.clipboard.writeText(
-			decodeHTMLentities(calculation.output.replace(/<[^>]*>/g, '')),
+			decodeHTMLentities(calculation.output.replace(/<[^>]*>/g, ''))!,
 		);
 		copyAnimated = true;
 		setTimeout(() => {
 			copyAnimated = false;
 		}, 1000);
+		trackEvent('history', 'copy');
 	}
 
 	function deleteClick() {
@@ -179,7 +181,10 @@
 	<button
 		class="response"
 		on:mousedown={() => onabouttoselect()}
-		on:click={() => onselectcalculation(calculation.rawInput)}
+		on:click={() => {
+			onselectcalculation(calculation.rawInput);
+			trackEvent('history', 'select');
+		}}
 		style={`transform: translateX(${shiftX}px)`}
 	>
 		{#if calculation.bookmarkName}
@@ -208,7 +213,12 @@
 		{/if}
 	</button>
 	<div class="mouseActions" style={`transform: translateX(${shiftX}px)`}>
-		<button title="Copy result" class="copyButton" class:animated={copyAnimated} on:click={copyClick}>
+		<button
+			title="Copy result"
+			class="copyButton"
+			class:animated={copyAnimated}
+			on:click={copyClick}
+		>
 			<FontAwesomeIcon icon={faClone} />
 		</button>
 		<button title="Remove" class="deleteButton" on:click={deleteClick}>

website/src/lib/settings.ts

@@ -22,6 +22,8 @@ export class Settings {
 
 	additionalOptions = '';
 
+	sendUsageStatistics = true;
+
 	load() {
 		if (typeof window === 'undefined') return;
 		const savedSettings = window.localStorage?.getItem(
@@ -45,6 +47,7 @@ export class Settings {
 		this.useDecimalPoint =
 			settings.useDecimalPoint ?? getLocaleDecimalPoint() === '.';
 		this.additionalOptions = settings.additionalOptions ?? false;
+		this.sendUsageStatistics = settings.sendUsageStatistics ?? true;
 	}
 
 	save() {
@@ -56,6 +59,7 @@ export class Settings {
 				useUnitPrefixes: this.useUnitPrefixes,
 				useDecimalPoint: this.useDecimalPoint,
 				additionalOptions: this.additionalOptions,
+				sendUsageStatistics: this.sendUsageStatistics,
 			}),
 		);
 	}

website/src/lib/settingsWidget.svelte

@@ -151,6 +151,15 @@
 	/>
 </div>
 
+<label>
+	<input
+		type="checkbox"
+		bind:checked={settings.sendUsageStatistics}
+	/>
+	Send anonymous usage statistics<br />
+	<span class="damped">(We don't record your calculations)</span>
+</label>
+
 <style>
 	label,
 	.setting {
@@ -185,4 +194,9 @@
 	.furtherInfoLink {
 		font-size: 0.9em;
 	}
+
+	.damped {
+		font-size: 0.8em;
+		opacity: 0.8;
+	}
 </style>

website/src/routes/+layout.svelte

@@ -13,10 +13,8 @@
 	import LoadingIndicator from '$lib/loadingIndicator.svelte';
 	import { config } from '@fortawesome/fontawesome-svg-core';
 	import '@fortawesome/fontawesome-svg-core/styles.css';
-	import {
-		addNewsReadLister,
-		newsAvailable,
-	} from './news/version';
+	import { addNewsReadLister, newsAvailable } from './news/version';
+	import { setupTracking } from './tracking';
 
 	config.autoAddCss = false;
 
@@ -80,6 +78,8 @@
 	addNewsReadLister(() => {
 		newsUpdateAvailable = false;
 	});
+
+	setupTracking(calculator.settings.sendUsageStatistics);
 </script>
 
 <svelte:window on:touchstart={touchstart} />

website/src/routes/tracking.ts

@@ -0,0 +1,52 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable no-underscore-dangle */
+
+// eslint-disable-next-line import/no-unresolved, import/extensions
+import { page } from '$app/stores';
+
+const isClient = typeof window !== 'undefined';
+let trackingEnabled = false;
+
+const _paq: (string | number)[][] = (isClient && (window as any)._paq) || [];
+if (isClient) (window as any)._paq = _paq;
+
+export function setupTracking(enable: boolean) {
+	if (enable && isClient && process.env.NODE_ENV !== 'development') {
+		trackingEnabled = true;
+		_paq.push(['enableLinkTracking']);
+		(function createTracking() {
+			const u = '//analytics.tonalio.com/';
+			_paq.push(['setTrackerUrl', `${u}matomo.php`]);
+			_paq.push(['setSiteId', '2']);
+			const d = document;
+			const g = d.createElement('script');
+			const s = d.getElementsByTagName('script')[0];
+			g.async = true;
+			g.src = `${u}matomo.js`;
+			s.parentNode!.insertBefore(g, s);
+		})();
+		page.subscribe(({ url }) => {
+			_paq.push(['setCustomUrl', url.pathname]);
+			_paq.push(['setDocumentTitle', document.title]);
+			_paq.push(['trackPageView']);
+			_paq.push(['enableLinkTracking']);
+		});
+	}
+}
+
+export function trackEvent(
+	category: string,
+	action: string,
+	name?: string,
+	value?: number,
+) {
+	if (!trackingEnabled) return;
+	const eventArgs: (string | number)[] = [category, action];
+	if (name) {
+		eventArgs.push(name);
+		if (value) {
+			eventArgs.push(value);
+		}
+	}
+	_paq.push(['trackEvent', ...eventArgs]);
+}