Compare commits

...

2 Commits

Author SHA1 Message Date
8baf017171 Umami tracking events
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
ci/woodpecker/push/deploy Pipeline was successful
2026-02-17 12:12:32 -03:00
d3f6747116 Umami setup for mifi-links
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
ci/woodpecker/push/deploy Pipeline was successful
2026-02-17 10:59:35 -03:00
10 changed files with 61 additions and 13 deletions

View File

@@ -9,5 +9,13 @@
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
<img
src="https://analytics.mifi.holdings/pixel.gif"
alt=""
width="1"
height="1"
role="presentation"
loading="eager"
/>
</body> </body>
</html> </html>

View File

@@ -34,6 +34,7 @@
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
aria-describedby={link.description ? descriptionId : undefined} aria-describedby={link.description ? descriptionId : undefined}
data-umami-event={`contact panel ${link.label} link`}
> >
{#if link.icon} {#if link.icon}
<LinkIcon href={link.href} icon={link.icon} label={link.label} /> <LinkIcon href={link.href} icon={link.icon} label={link.label} />

View File

@@ -35,6 +35,7 @@
contactOpen = true; contactOpen = true;
shareOpen = false; shareOpen = false;
}} }}
data-umami-event="header contact button"
> >
<IconContact size={20} /> <IconContact size={20} />
</button> </button>
@@ -47,6 +48,7 @@
shareOpen = true; shareOpen = true;
contactOpen = false; contactOpen = false;
}} }}
data-umami-event="header share button"
> >
<IconShare size={20} /> <IconShare size={20} />
</button> </button>
@@ -98,6 +100,7 @@
contactOpen = true; contactOpen = true;
shareOpen = false; shareOpen = false;
}} }}
data-umami-event="hero contact button"
> >
<IconContact size={20} /> <IconContact size={20} />
<span>Contact</span> <span>Contact</span>
@@ -111,6 +114,7 @@
shareOpen = true; shareOpen = true;
contactOpen = false; contactOpen = false;
}} }}
data-umami-event="hero share button"
> >
<IconShare size={20} /> <IconShare size={20} />
<span>Share</span> <span>Share</span>

View File

@@ -5,7 +5,7 @@
let { href, icon, label, description }: ProcessedLink = $props(); let { href, icon, label, description }: ProcessedLink = $props();
</script> </script>
<a {href} rel="noopener noreferrer" target="_blank" class="link"> <a {href} rel="noopener noreferrer" target="_blank" class="link" data-umami-event={`${label} link`}>
<span class="icon" aria-hidden="true"> <span class="icon" aria-hidden="true">
<LinkIcon {href} {icon} {label} /> <LinkIcon {href} {icon} {label} />
</span> </span>

View File

@@ -57,7 +57,12 @@
/> />
</div> </div>
{/if} {/if}
<button type="button" class="panel-btn" onclick={copyLink}> <button
type="button"
class="panel-btn"
onclick={copyLink}
data-umami-event="share panel copy"
>
<IconCopy size={20} /> <IconCopy size={20} />
{copied ? 'Copied!' : 'Copy link'} {copied ? 'Copied!' : 'Copy link'}
</button> </button>
@@ -67,12 +72,18 @@
onclick={onclose} onclick={onclose}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
data-umami-event="share panel email link"
> >
<IconEmail size={20} /> <IconEmail size={20} />
Email link Email link
</a> </a>
{#if canShare} {#if canShare}
<button type="button" class="panel-btn" onclick={share}> <button
type="button"
class="panel-btn"
onclick={share}
data-umami-event="share panel device share"
>
<IconShare size={20} /> <IconShare size={20} />
Share… Share…
</button> </button>

View File

@@ -45,6 +45,7 @@
aria-label="Close theme menu" aria-label="Close theme menu"
tabindex="-1" tabindex="-1"
onclick={() => (expanded = false)} onclick={() => (expanded = false)}
data-umami-event="theme toggle close"
></button> ></button>
{/if} {/if}
@@ -64,6 +65,7 @@
aria-current={current === 'light' ? 'true' : undefined} aria-current={current === 'light' ? 'true' : undefined}
title="Light" title="Light"
onclick={() => handleClick('light')} onclick={() => handleClick('light')}
data-umami-event="theme toggle light"
> >
<Sun size={24} /> <Sun size={24} />
</button> </button>
@@ -75,6 +77,7 @@
aria-current={current === 'dark' ? 'true' : undefined} aria-current={current === 'dark' ? 'true' : undefined}
title="Dark" title="Dark"
onclick={() => handleClick('dark')} onclick={() => handleClick('dark')}
data-umami-event="theme toggle dark"
> >
<Moon size={24} /> <Moon size={24} />
</button> </button>
@@ -86,6 +89,7 @@
aria-current={current === 'auto' ? 'true' : undefined} aria-current={current === 'auto' ? 'true' : undefined}
title="Auto (system)" title="Auto (system)"
onclick={() => handleClick('auto')} onclick={() => handleClick('auto')}
data-umami-event="theme toggle auto"
> >
<SunMoon size={24} /> <SunMoon size={24} />
</button> </button>

View File

@@ -2,6 +2,8 @@
* App config: own-property hostnames for UTM attribution, variant hostnames, GA IDs. * App config: own-property hostnames for UTM attribution, variant hostnames, GA IDs.
*/ */
import { ContentVariant } from './data/constants';
export const OWN_PROPERTY_HOSTS = [ export const OWN_PROPERTY_HOSTS = [
'mifi.ventures', 'mifi.ventures',
'cal.mifi.ventures', 'cal.mifi.ventures',
@@ -9,20 +11,25 @@ export const OWN_PROPERTY_HOSTS = [
'mifi.bio', 'mifi.bio',
] as const; ] as const;
export const VARIANT_HOSTS: Record<'dev' | 'bio', string> = { export const VARIANT_HOSTS: Record<ContentVariant, string> = {
dev: 'mifi.dev', [ContentVariant.DEV]: 'mifi.dev',
bio: 'mifi.bio', [ContentVariant.BIO]: 'mifi.bio',
}; };
export const GA_MEASUREMENT_IDS: Record<'dev' | 'bio', string> = { export const GA_MEASUREMENT_IDS: Record<ContentVariant, string> = {
dev: 'G-P8V832WDM8', [ContentVariant.DEV]: 'G-P8V832WDM8',
bio: 'G-885B0KYWZ1', [ContentVariant.BIO]: 'G-885B0KYWZ1',
};
export const UMAMI_MEASUREMENT_IDS: Record<ContentVariant, string> = {
[ContentVariant.DEV]: 'ac7e751b-4ce3-49f2-80e0-f430b292b72a',
[ContentVariant.BIO]: 'cf44669d-10c1-4982-ad79-282aed4237e5',
}; };
/** theme-color meta values per variant (match tokens-{variant}.css --color-bg) */ /** theme-color meta values per variant (match tokens-{variant}.css --color-bg) */
export const THEME_COLORS: Record<'dev' | 'bio', { light: string; dark: string }> = { export const THEME_COLORS: Record<ContentVariant, { light: string; dark: string }> = {
dev: { light: '#f5f4f8', dark: '#131118' }, // hsl(260 20% 98%) / hsl(260 18% 8%) [ContentVariant.DEV]: { light: '#f5f4f8', dark: '#131118' }, // hsl(260 20% 98%) / hsl(260 18% 8%)
bio: { light: '#f4f6f9', dark: '#111318' }, // hsl(220 22% 98%) / hsl(220 18% 8%) [ContentVariant.BIO]: { light: '#f4f6f9', dark: '#111318' }, // hsl(220 22% 98%) / hsl(220 18% 8%)
}; };
export const UTM_MEDIUM = 'link'; export const UTM_MEDIUM = 'link';

View File

@@ -1,5 +1,10 @@
import contentData from '$lib/data/links.json'; import contentData from '$lib/data/links.json';
import { VARIANT_HOSTS, GA_MEASUREMENT_IDS, THEME_COLORS } from '$lib/config'; import {
VARIANT_HOSTS,
GA_MEASUREMENT_IDS,
THEME_COLORS,
UMAMI_MEASUREMENT_IDS,
} from '$lib/config';
import type { Site, ContentData, ProcessedLink } from '$lib/data/types'; import type { Site, ContentData, ProcessedLink } from '$lib/data/types';
import type { LayoutServerLoad } from './$types'; import type { LayoutServerLoad } from './$types';
import { ContentVariant, HeroLayout } from '$lib/data/constants'; import { ContentVariant, HeroLayout } from '$lib/data/constants';
@@ -18,6 +23,7 @@ export type LayoutServerDataOut = {
}; };
variant: string; variant: string;
gaMeasurementId: string; gaMeasurementId: string;
umamiMeasurementId: string;
/** theme-color meta values for current variant */ /** theme-color meta values for current variant */
themeColorLight: string; themeColorLight: string;
themeColorDark: string; themeColorDark: string;
@@ -67,6 +73,7 @@ export const load: LayoutServerLoad<LayoutServerDataOut> = (): LayoutServerDataO
links: { sections }, links: { sections },
variant, variant,
gaMeasurementId: GA_MEASUREMENT_IDS[variant], gaMeasurementId: GA_MEASUREMENT_IDS[variant],
umamiMeasurementId: UMAMI_MEASUREMENT_IDS[variant],
themeColorLight: themeColors.light, themeColorLight: themeColors.light,
themeColorDark: themeColors.dark, themeColorDark: themeColors.dark,
}; };

View File

@@ -1,5 +1,6 @@
import { describe, it, expect, vi, afterEach } from 'vitest'; import { describe, it, expect, vi, afterEach } from 'vitest';
import { load } from '../+layout.server'; import { load } from '../+layout.server';
import { UMAMI_MEASUREMENT_IDS } from '$lib/config';
import { ContentVariant } from '$lib/data/constants'; import { ContentVariant } from '$lib/data/constants';
import type { ContentData } from '$lib/data/types'; import type { ContentData } from '$lib/data/types';
@@ -95,7 +96,9 @@ describe('+layout.server', () => {
it('gaMeasurementId matches variant', () => { it('gaMeasurementId matches variant', () => {
process.env.CONTENT_VARIANT = ContentVariant.DEV; process.env.CONTENT_VARIANT = ContentVariant.DEV;
expect(load().gaMeasurementId).toMatch(/^G-/); expect(load().gaMeasurementId).toMatch(/^G-/);
expect(load().umamiMeasurementId).toBe(UMAMI_MEASUREMENT_IDS[ContentVariant.DEV]);
process.env.CONTENT_VARIANT = ContentVariant.BIO; process.env.CONTENT_VARIANT = ContentVariant.BIO;
expect(load().gaMeasurementId).toMatch(/^G-/); expect(load().gaMeasurementId).toMatch(/^G-/);
expect(load().umamiMeasurementId).toBe(UMAMI_MEASUREMENT_IDS[ContentVariant.BIO]);
}); });
}); });

View File

@@ -15,9 +15,12 @@ describe('+layout (LayoutData)', () => {
links: { sections: [] }, links: { sections: [] },
variant: 'dev', variant: 'dev',
gaMeasurementId: 'G-xxx', gaMeasurementId: 'G-xxx',
umamiMeasurementId: 'UM-xxx',
}; };
expect(mockData.site).toHaveProperty('title'); expect(mockData.site).toHaveProperty('title');
expect(mockData.site).toHaveProperty('url'); expect(mockData.site).toHaveProperty('url');
expect(mockData).toHaveProperty('umamiMeasurementId');
expect(mockData).toHaveProperty('gaMeasurementId');
expect(mockData).toHaveProperty('variant'); expect(mockData).toHaveProperty('variant');
expect(mockData.links).toHaveProperty('sections'); expect(mockData.links).toHaveProperty('sections');
}); });