Re-add custom page_view event

Author: misode

index.html

@@ -8,6 +8,7 @@
 		function gtag(){dataLayer.push(arguments);}
 		gtag('js', new Date());
 		gtag('config', 'G-S982VZS08T', {
+			send_page_view: false,
 			theme: localStorage.getItem('theme') || 'default',
 			version: localStorage.getItem('schema_version') || '1.21.2',
 			locale: localStorage.getItem('language') || 'en',

src/app/Analytics.ts

@@ -4,6 +4,13 @@ import type { VersionId } from './services/index.js'
 export type Method = 'menu' | 'hotkey'
 
 export namespace Analytics {
+	export function pageview(url: string) {
+		gtag('event', 'page_view', {
+			page_location: url,
+			page_title: document.title,
+		})
+	}
+
 	export function setLocale(locale: string) {
 		gtag('set', {
 			locale,

src/app/App.tsx

@@ -1,13 +1,22 @@
+import type { RouterOnChangeArgs } from 'preact-router'
 import { Router } from 'preact-router'
 import '../styles/global.css'
 import '../styles/nodes.css'
+import { Analytics } from './Analytics.js'
 import { Header } from './components/index.js'
 import { Changelog, Convert, Customized, Generator, Generators, Guide, Guides, Home, LegacyPartners, Partners, Sounds, Transformation, Versions, WhatsNew, Worldgen } from './pages/index.js'
+import { cleanUrl } from './Utils.js'
 
 export function App() {
+	const changeRoute = (e: RouterOnChangeArgs) => {
+		window.dispatchEvent(new CustomEvent('replacestate'))
+		// Needs a timeout to ensure the title is set correctly
+		setTimeout(() => Analytics.pageview(cleanUrl(e.url)))
+	}
+
 	return <>
 		<Header />
-		<Router>
+		<Router onChange={changeRoute}>
 			<Home path="/" />
 			<Generators path="/generators" />
 			<Worldgen path="/worldgen" />

src/app/Utils.ts

@@ -64,7 +64,7 @@ export function hashString(s: string) {
 }
 
 export function cleanUrl(url: string) {
-	return `/${url}/`.replaceAll('//', '/')
+	return `/${url}/`.replaceAll(/\/\/+/g, '/')
 }
 
 export function getPath(url: string) {