added listeners

Author: dani-polani

bitext/src/lib/analytics/affiliate-link-tracking.ts

@@ -0,0 +1,36 @@
+import { browser } from '$app/environment';
+
+/**
+ * GA4 custom event for partner / referral outbound links.
+ * @see https://developers.google.com/analytics/devguides/collection/ga4/events
+ * Custom params (partner, product, …) may need to be registered as custom dimensions in GA4 to appear in standard reports; they still show in DebugView / BigQuery.
+ */
+const EVENT_NAME = 'affiliate_click';
+
+function onDocumentClickCapture(e: MouseEvent): void {
+	const target = e.target;
+	if (!(target instanceof Node)) return;
+	const el = (target as Element).closest?.('a.affiliate-link');
+	if (!(el instanceof HTMLAnchorElement)) return;
+	const g = (window as Window & { gtag?: (...args: unknown[]) => void }).gtag;
+	if (typeof g !== 'function') return;
+
+	const linkText = (el.textContent ?? '')
+		.trim()
+		.replace(/\s+/g, ' ')
+		.slice(0, 120);
+
+	g('event', EVENT_NAME, {
+		partner: el.dataset.partner ?? '',
+		product: el.dataset.product ?? '',
+		link_url: el.href,
+		link_text: linkText
+	});
+}
+
+/** Register capture-phase listener; returns cleanup for $effect. */
+export function registerAffiliateLinkClickTracking(): () => void {
+	if (!browser) return () => {};
+	document.addEventListener('click', onDocumentClickCapture, true);
+	return () => document.removeEventListener('click', onDocumentClickCapture, true);
+}

bitext/src/lib/components/partners/PartnerBannerPreply.svelte

@@ -9,6 +9,8 @@
 	title="Preply — language tutors"
 	{href}
 	ctaLabel="Open Preply"
+	partner="preply"
+	product="language_tutors"
 	toneClass="border-l-[#FF7AAC] bg-[#FF7AAC]/10 dark:bg-[#FF7AAC]/15"
 >
 	<p class="m-0">

bitext/src/lib/components/partners/PartnerBannerRailway.svelte

@@ -8,6 +8,8 @@
 	title="Railway - easy deployment"
 	{href}
 	ctaLabel="Open Railway"
+	partner="railway"
+	product="hosting"
 	toneClass="border-l-[#853bce] bg-[#853bce]/10 dark:bg-[#853bce]/15"
 >
 	<p class="m-0">

bitext/src/lib/components/partners/PartnerBannerShell.svelte

@@ -7,13 +7,19 @@
 		href,
 		ctaLabel,
 		toneClass,
+		partner,
+		product,
 		children
 	}: {
 		title: string;
 		href: string;
 		ctaLabel: string;
 		/** Left accent bar + pale tinted surface (light/dark), e.g. border-l-[#hex] bg-[#hex]/10 */
 		toneClass: string;
+		/** GA4 `affiliate_click` — stable slug, e.g. preply */
+		partner: string;
+		/** GA4 `affiliate_click` — offer/category slug, e.g. language_tutors */
+		product: string;
 		children: Snippet;
 	} = $props();
 
@@ -54,8 +60,10 @@
 			{@render children()}
 		</div>
 		<a
-			class="{linkClass} mt-1 max-sm:mt-2 sm:col-start-2 sm:row-start-1 sm:mt-0 sm:justify-self-end sm:text-right"
+			class="affiliate-link {linkClass} mt-1 max-sm:mt-2 sm:col-start-2 sm:row-start-1 sm:mt-0 sm:justify-self-end sm:text-right"
 			href={href}
+			data-partner={partner}
+			data-product={product}
 			target="_blank"
 			rel="noopener noreferrer sponsored"
 		>

bitext/src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 	import { browser } from '$app/environment';
 	import { afterNavigate } from '$app/navigation';
 	import '../app.css';
+	import { registerAffiliateLinkClickTracking } from '$lib/analytics/affiliate-link-tracking.js';
 	import { GA_MEASUREMENT_ID } from '$lib/brand.js';
 	import { flowbiteTheme } from '$lib/flowbite-theme.js';
 	import { settingsStore } from '$lib/state/settings.svelte.js';
@@ -25,6 +26,11 @@
 		document.documentElement.classList.toggle('dark', isDark);
 	});
 
+	$effect(() => {
+		if (!browser) return;
+		return registerAffiliateLinkClickTracking();
+	});
+
 	/** SPA navigations: initial `enter` is already counted by the snippet in app.html */
 	afterNavigate(({ to, type }) => {
 		if (!browser || type === 'enter' || !to) return;