Skip to content
Akayashuu edited this page Jun 14, 2026 · 3 revisions

@vskstudio/takt-astro

Astro integration for Takt, privacy-friendly analytics. It injects a tiny browser runtime that boots Takt, fires the initial pageview, and tracks client-side navigations — including Astro View Transitions.

Install

pnpm add @vskstudio/takt-astro @vskstudio/takt-core

Usage

Pick one of the two paths below — not both. Both boot core's default instance, so combining them would just re-initialise.

Integration (recommended)

// astro.config.mjs
import { defineConfig } from 'astro/config'
import takt from '@vskstudio/takt-astro'

export default defineConfig({
  integrations: [takt({ domain: 'example.com' })],
})

<Takt /> component

For per-layout control, place the component in a layout <head>:

---
import Takt from '@vskstudio/takt-astro/Takt.astro'
---
<head>
  <Takt domain="example.com" />
</head>

Options

Both the integration and the component accept the same options:

Option Type Default Description
domain string location.hostname Site identifier sent with every event.
endpoint string /api/event Ingestion endpoint.
outbound boolean false Auto-track outbound link clicks.
files boolean false Auto-track file downloads.
spa boolean true Track client-side navigations.
respectDnt boolean true Suppress events when Do Not Track is on.
excludeLocalhost boolean true Suppress events on localhost / private IPs.

View Transitions

Astro's client router navigates via history.pushState. Core's SPA tracking patches pushState, so a single pageview fires per client navigation — including View Transitions DOM swaps — while init() fires the one initial pageview. That single source means navigations are never double-counted. The runtime is SSR/prerender safe — it only runs in the browser.

Custom events

Re-exported from core for convenience:

import { track } from '@vskstudio/takt-astro'

track('Signup', { revenue: { amount: '9.00', currency: 'USD' } })

Widgets

Thin wrappers around Takt's server-rendered badge SVG and embed iframe.

---
import Badge from '@vskstudio/takt-astro/Badge.astro'
import Embed from '@vskstudio/takt-astro/Embed.astro'
---
<Badge domain="example.com" variant="d" />
<Embed domain="example.com" theme="dark" />

Badge renders an <img> with props domain, variant ('a' | 'b' | 'd'), glyph ('unplug' | 'dash' | 'off' | 'eyeoff'), lang ('fr' | 'en'), and host. Its alt defaults to "takt" and can be overridden.

Embed renders an <iframe> with props domain, theme ('light' | 'dark' | 'auto'), lang, host, width (default 404), height (default 264), and title (default "takt"). The iframe is sandboxed (sandbox="allow-scripts allow-same-origin") and ships a fixed referrerpolicy="strict-origin-when-cross-origin"; both are locked and cannot be weakened by a consumer.

Extra attributes pass through to the underlying element, but the built src is locked and cannot be overridden. The optional host must be an absolute http(s) URL — core validates it and throws on anything else (e.g. a javascript: URL), and reduces it to its origin (dropping path/query). An empty host resolves same-origin.

License

MIT


Links