feat(website): Umami analytics (conversion + CTA events)
Add the Umami tracker (cookieless, no consent banner) in the document head, limited to the production hostnames via data-domains so dev traffic doesn't pollute the stats. Pageviews are auto-tracked per page and locale. Custom events on the key funnel: - demo-request (demo form submit, with teamSize) - partner-application (partner form submit, with type) - book-demo (every "Book a demo" CTA click) via data-umami-event - login (clicks through to the app) Also fix the mobile nav menu links, which weren't localized (would drop Danish visitors back to English).
This commit is contained in:
@@ -13,6 +13,6 @@ const localePath = useLocalePath()
|
|||||||
<template>
|
<template>
|
||||||
<LandingPageHeader :label="copy.pages.comingSoonKicker" :title="title" :intro="body" />
|
<LandingPageHeader :label="copy.pages.comingSoonKicker" :title="title" :intro="body" />
|
||||||
<LandingContainer pad="clamp(32px, 5vw, 48px) clamp(20px, 5vw, 64px) clamp(56px, 8vw, 160px)">
|
<LandingContainer pad="clamp(32px, 5vw, 48px) clamp(20px, 5vw, 64px) clamp(56px, 8vw, 160px)">
|
||||||
<LandingBtn variant="primary" size="lg" @click="navigateTo(localePath('/demo'))">{{ copy.pages.ctaDemo }} →</LandingBtn>
|
<LandingBtn variant="primary" size="lg" data-umami-event="book-demo" @click="navigateTo(localePath('/demo'))">{{ copy.pages.ctaDemo }} →</LandingBtn>
|
||||||
</LandingContainer>
|
</LandingContainer>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ const localePath = useLocalePath()
|
|||||||
</h2>
|
</h2>
|
||||||
<div :style="{ marginTop: '28px', maxWidth: 'min(100%, 520px)', fontFamily: '\'Inter\', sans-serif', fontSize: '19px', color: 'rgba(244,243,238,0.7)' }">{{ copy.finalCta.sub }}</div>
|
<div :style="{ marginTop: '28px', maxWidth: 'min(100%, 520px)', fontFamily: '\'Inter\', sans-serif', fontSize: '19px', color: 'rgba(244,243,238,0.7)' }">{{ copy.finalCta.sub }}</div>
|
||||||
<div :style="{ marginTop: '40px' }">
|
<div :style="{ marginTop: '40px' }">
|
||||||
<button @click="navigateTo(localePath('/demo'))" :style="{
|
<button data-umami-event="book-demo" @click="navigateTo(localePath('/demo'))" :style="{
|
||||||
background: C.signal, color: C.carbon, border: 'none',
|
background: C.signal, color: C.carbon, border: 'none',
|
||||||
padding: '20px 32px', fontFamily: '\'Inter\', sans-serif',
|
padding: '20px 32px', fontFamily: '\'Inter\', sans-serif',
|
||||||
fontSize: '16px', fontWeight: 600, borderRadius: '4px', cursor: 'pointer',
|
fontSize: '16px', fontWeight: 600, borderRadius: '4px', cursor: 'pointer',
|
||||||
|
|||||||
@@ -47,7 +47,7 @@ const brush = {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div :style="{ display: 'flex', gap: '12px', marginTop: '40px', flexWrap: 'wrap' }">
|
<div :style="{ display: 'flex', gap: '12px', marginTop: '40px', flexWrap: 'wrap' }">
|
||||||
<LandingBtn variant="primary" size="lg" @click="navigateTo(localePath('/demo'))">{{ copy.hero.cta }} →</LandingBtn>
|
<LandingBtn variant="primary" size="lg" data-umami-event="book-demo" @click="navigateTo(localePath('/demo'))">{{ copy.hero.cta }} →</LandingBtn>
|
||||||
<LandingBtn variant="secondary" size="lg">{{ copy.hero.sub_cta }}</LandingBtn>
|
<LandingBtn variant="secondary" size="lg">{{ copy.hero.sub_cta }}</LandingBtn>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -97,8 +97,8 @@ function segStyle(code: 'en' | 'da') {
|
|||||||
<button :style="segStyle('en')" @click="switchTo('en')">EN</button>
|
<button :style="segStyle('en')" @click="switchTo('en')">EN</button>
|
||||||
<button :style="segStyle('da')" @click="switchTo('da')">DA</button>
|
<button :style="segStyle('da')" @click="switchTo('da')">DA</button>
|
||||||
</div>
|
</div>
|
||||||
<a :href="APP_URL" :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: t.fgMuted }">{{ copy.nav.login }}</a>
|
<a :href="APP_URL" data-umami-event="login" :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: t.fgMuted }">{{ copy.nav.login }}</a>
|
||||||
<LandingBtn variant="primary" @click="navigateTo(localePath('/demo'))">{{ copy.nav.cta }} →</LandingBtn>
|
<LandingBtn variant="primary" data-umami-event="book-demo" @click="navigateTo(localePath('/demo'))">{{ copy.nav.cta }} →</LandingBtn>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Hamburger — visible only on mobile via scoped CSS -->
|
<!-- Hamburger — visible only on mobile via scoped CSS -->
|
||||||
@@ -147,7 +147,7 @@ function segStyle(code: 'en' | 'da') {
|
|||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
v-for="(it, i) in items" :key="i" :to="it.href"
|
v-for="(it, i) in items" :key="i" :to="loc(it.href)"
|
||||||
:style="{
|
:style="{
|
||||||
fontFamily: '\'Inter\', sans-serif', fontSize: '16px', color: t.fgMuted,
|
fontFamily: '\'Inter\', sans-serif', fontSize: '16px', color: t.fgMuted,
|
||||||
letterSpacing: '-0.005em', padding: '14px 0',
|
letterSpacing: '-0.005em', padding: '14px 0',
|
||||||
@@ -164,10 +164,11 @@ function segStyle(code: 'en' | 'da') {
|
|||||||
</div>
|
</div>
|
||||||
<a
|
<a
|
||||||
:href="APP_URL"
|
:href="APP_URL"
|
||||||
|
data-umami-event="login"
|
||||||
:style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: t.fgMuted }"
|
:style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: t.fgMuted }"
|
||||||
@click="mobileOpen = false"
|
@click="mobileOpen = false"
|
||||||
>{{ copy.nav.login }}</a>
|
>{{ copy.nav.login }}</a>
|
||||||
<LandingBtn variant="primary" @click="() => { navigateTo(localePath('/demo')); mobileOpen = false }">{{ copy.nav.cta }} →</LandingBtn>
|
<LandingBtn variant="primary" data-umami-event="book-demo" @click="() => { navigateTo(localePath('/demo')); mobileOpen = false }">{{ copy.nav.cta }} →</LandingBtn>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ const localePath = useLocalePath()
|
|||||||
<p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '20px', lineHeight: 1.5, maxWidth: '640px', color: t.fgMuted, margin: 0, textWrap: 'pretty' }">{{ copy.pricing.lede }}</p>
|
<p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '20px', lineHeight: 1.5, maxWidth: '640px', color: t.fgMuted, margin: 0, textWrap: 'pretty' }">{{ copy.pricing.lede }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div :style="{ marginTop: '36px', display: 'flex', alignItems: 'center', gap: '16px' }">
|
<div :style="{ marginTop: '36px', display: 'flex', alignItems: 'center', gap: '16px' }">
|
||||||
<LandingBtn variant="primary" size="lg" @click="navigateTo(localePath('/demo'))">{{ copy.pricing.cta }} →</LandingBtn>
|
<LandingBtn variant="primary" size="lg" data-umami-event="book-demo" @click="navigateTo(localePath('/demo'))">{{ copy.pricing.cta }} →</LandingBtn>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div :style="{ background: t.surface, border: `1px solid ${t.border}`, borderRadius: '6px', padding: '36px 36px' }">
|
<div :style="{ background: t.surface, border: `1px solid ${t.border}`, borderRadius: '6px', padding: '36px 36px' }">
|
||||||
|
|||||||
@@ -45,6 +45,14 @@ export function useLocalizeHref() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Fire a custom Umami event. No-op on the server and when the tracker isn't
|
||||||
|
// active (e.g. localhost dev, where data-domains limits it to dezky.eu).
|
||||||
|
export function track(event: string, data?: Record<string, unknown>) {
|
||||||
|
if (!import.meta.client) return
|
||||||
|
const u = (window as unknown as { umami?: { track: (e: string, d?: unknown) => void } }).umami
|
||||||
|
u?.track(event, data)
|
||||||
|
}
|
||||||
|
|
||||||
// Smooth-scroll to an in-page anchor, accounting for the sticky 72px nav.
|
// Smooth-scroll to an in-page anchor, accounting for the sticky 72px nav.
|
||||||
// Non-anchor / placeholder links (#) are ignored.
|
// Non-anchor / placeholder links (#) are ignored.
|
||||||
export function scrollToAnchor(hash: string) {
|
export function scrollToAnchor(hash: string) {
|
||||||
|
|||||||
@@ -49,6 +49,17 @@ export default defineNuxtConfig({
|
|||||||
meta: [
|
meta: [
|
||||||
{ name: 'theme-color', content: '#FAFAF7' },
|
{ name: 'theme-color', content: '#FAFAF7' },
|
||||||
],
|
],
|
||||||
|
// Umami — privacy-friendly, cookieless analytics (matches the cookie
|
||||||
|
// policy; no consent banner needed). data-domains limits tracking to the
|
||||||
|
// production hostnames so localhost/dev traffic doesn't pollute stats.
|
||||||
|
script: [
|
||||||
|
{
|
||||||
|
src: 'https://umami.coolify.lastcloud.io/script.js',
|
||||||
|
defer: true,
|
||||||
|
'data-website-id': '639dcd4c-1cb3-4edb-a2a2-6e9cf69348d4',
|
||||||
|
'data-domains': 'dezky.eu,www.dezky.eu',
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -57,7 +57,7 @@ useHead({ title: () => `${copy.value.pages.contact.label} · dezky` })
|
|||||||
<div>
|
<div>
|
||||||
<h2 :style="h2">{{ c.demoHeading }}</h2>
|
<h2 :style="h2">{{ c.demoHeading }}</h2>
|
||||||
<p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '18px', lineHeight: 1.6, color: t.fgMuted, margin: '18px 0 28px', textWrap: 'pretty' }">{{ c.demoBody }}</p>
|
<p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '18px', lineHeight: 1.6, color: t.fgMuted, margin: '18px 0 28px', textWrap: 'pretty' }">{{ c.demoBody }}</p>
|
||||||
<LandingBtn variant="primary" size="lg" @click="navigateTo(localePath('/demo'))">{{ copy.pages.ctaDemo }} →</LandingBtn>
|
<LandingBtn variant="primary" size="lg" data-umami-event="book-demo" @click="navigateTo(localePath('/demo'))">{{ copy.pages.ctaDemo }} →</LandingBtn>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
// info@dezky.eu (zero backend, no US tools). Swap this for the self-built
|
// info@dezky.eu (zero backend, no US tools). Swap this for the self-built
|
||||||
// embedded scheduler later — the copy + layout can stay.
|
// embedded scheduler later — the copy + layout can stay.
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed } from 'vue'
|
||||||
import { useTheme, useCopy } from '~/composables/useLanding'
|
import { useTheme, useCopy, track } from '~/composables/useLanding'
|
||||||
|
|
||||||
definePageMeta({ layout: 'page' })
|
definePageMeta({ layout: 'page' })
|
||||||
|
|
||||||
@@ -28,6 +28,7 @@ function submit() {
|
|||||||
'',
|
'',
|
||||||
message.value,
|
message.value,
|
||||||
].join('\n')
|
].join('\n')
|
||||||
|
track('demo-request', { teamSize: team.value })
|
||||||
window.location.href = `mailto:info@dezky.eu?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`
|
window.location.href = `mailto:info@dezky.eu?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ useHead({ title: () => `${copy.value.pages.migration.label} · dezky` })
|
|||||||
|
|
||||||
<p :style="{ marginTop: '64px', fontFamily: '\'Inter\', sans-serif', fontSize: '16px', color: t.fg }">{{ c.note }}</p>
|
<p :style="{ marginTop: '64px', fontFamily: '\'Inter\', sans-serif', fontSize: '16px', color: t.fg }">{{ c.note }}</p>
|
||||||
<div :style="{ marginTop: '32px' }">
|
<div :style="{ marginTop: '32px' }">
|
||||||
<LandingBtn variant="primary" size="lg" @click="navigateTo(localePath('/demo'))">{{ copy.pages.ctaDemo }} →</LandingBtn>
|
<LandingBtn variant="primary" size="lg" data-umami-event="book-demo" @click="navigateTo(localePath('/demo'))">{{ copy.pages.ctaDemo }} →</LandingBtn>
|
||||||
</div>
|
</div>
|
||||||
</LandingContainer>
|
</LandingContainer>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { useTheme, useCopy } from '~/composables/useLanding'
|
import { useTheme, useCopy, track } from '~/composables/useLanding'
|
||||||
|
|
||||||
definePageMeta({ layout: 'page' })
|
definePageMeta({ layout: 'page' })
|
||||||
|
|
||||||
@@ -35,6 +35,7 @@ function submitPartner() {
|
|||||||
'',
|
'',
|
||||||
pMessage.value,
|
pMessage.value,
|
||||||
].join('\n')
|
].join('\n')
|
||||||
|
track('partner-application', { type: pType.value })
|
||||||
window.location.href = `mailto:info@dezky.eu?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`
|
window.location.href = `mailto:info@dezky.eu?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -197,7 +198,7 @@ useHead({ title: () => `${copy.value.pages.partners.label} · dezky` })
|
|||||||
<p :style="{ marginTop: '20px', fontFamily: '\'Inter\', sans-serif', fontSize: '18px', lineHeight: 1.6, color: t.fgMuted, maxWidth: '420px', textWrap: 'pretty' }">{{ c.form.lede }}</p>
|
<p :style="{ marginTop: '20px', fontFamily: '\'Inter\', sans-serif', fontSize: '18px', lineHeight: 1.6, color: t.fgMuted, maxWidth: '420px', textWrap: 'pretty' }">{{ c.form.lede }}</p>
|
||||||
<button
|
<button
|
||||||
:style="{ marginTop: '28px', background: 'transparent', border: 'none', padding: 0, cursor: 'pointer', fontFamily: '\'Inter\', sans-serif', fontSize: '15px', color: t.fgMuted, textDecoration: 'underline', textUnderlineOffset: '3px' }"
|
:style="{ marginTop: '28px', background: 'transparent', border: 'none', padding: 0, cursor: 'pointer', fontFamily: '\'Inter\', sans-serif', fontSize: '15px', color: t.fgMuted, textDecoration: 'underline', textUnderlineOffset: '3px' }"
|
||||||
@click="navigateTo(localePath('/demo'))"
|
data-umami-event="book-demo" @click="navigateTo(localePath('/demo'))"
|
||||||
>{{ c.cta }} →</button>
|
>{{ c.cta }} →</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user