https://github.com/vskstudio/takt-angular
Idiomatic Angular wrapper for Takt privacy-friendly analytics
https://github.com/vskstudio/takt-angular
analytics angular cookieless frontend gdpr privacy privacy-friendly sdk self-hosted typescript web-analytics wrapper
Last synced: about 2 hours ago
JSON representation
Idiomatic Angular wrapper for Takt privacy-friendly analytics
- Host: GitHub
- URL: https://github.com/vskstudio/takt-angular
- Owner: vskstudio
- License: mit
- Created: 2026-06-12T15:08:24.000Z (23 days ago)
- Default Branch: main
- Last Pushed: 2026-07-01T05:02:19.000Z (5 days ago)
- Last Synced: 2026-07-01T05:09:01.024Z (5 days ago)
- Topics: analytics, angular, cookieless, frontend, gdpr, privacy, privacy-friendly, sdk, self-hosted, typescript, web-analytics, wrapper
- Language: TypeScript
- Size: 443 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - takt-angular - Idiomatic Angular wrapper for <b><code> 0⭐</code></b> <b><code> 0🍴</code></b> [Takt](https://github.com/vskstudio/takt-core)) privacy-friendly analytics. (Development Utilities / Analytics)
- awesome-angular - takt-angular - Idiomatic Angular wrapper for [Takt](https://github.com/vskstudio/takt-core) privacy-friendly analytics. (Development Utilities / Analytics)
README
# @vskstudio/takt-angular
Idiomatic Angular wrapper for [Takt](https://github.com/vskstudio/takt-core), privacy-friendly analytics. Standalone APIs for Angular 17+.
## Install
```bash
pnpm add @vskstudio/takt-angular @vskstudio/takt-core
```
## Setup
Register Takt once at bootstrap with `provideTakt`. It boots only in the browser, fires the initial pageview, wires up the requested autocapture, and disposes everything when the app is destroyed.
```ts
import { bootstrapApplication } from '@angular/platform-browser'
import { provideTakt } from '@vskstudio/takt-angular'
import { AppComponent } from './app/app.component'
bootstrapApplication(AppComponent, {
providers: [
provideTakt({
// domain defaults to location.hostname, endpoint to /api/event
outbound: true, // auto-track outbound links
files: true, // auto-track downloads (or pass ['pdf', 'zip'])
// spa: true, respectDnt: true, excludeLocalhost: true (defaults)
}),
],
})
```
SSR-safe: on the server `provideTakt` is inert and `TaktService` no-ops.
## Track events imperatively
Inject `TaktService` anywhere. Every method is a never-throwing no-op before init or on the server.
```ts
import { Component, inject } from '@angular/core'
import { TaktService } from '@vskstudio/takt-angular'
@Component({ /* ... */ })
export class CheckoutComponent {
private readonly takt = inject(TaktService)
buy() {
this.takt.track('Purchase', {
props: { plan: 'pro' },
revenue: { amount: '29.00', currency: 'EUR' },
})
}
// takt.pageview(), takt.optOut(), takt.optIn() are also available.
}
```
## Track clicks declaratively
The `taktEvent` directive resolves the live instance at click time.
```ts
import { TaktEventDirective } from '@vskstudio/takt-angular'
@Component({
standalone: true,
imports: [TaktEventDirective],
template: `
Sign up
`,
})
export class SignupComponent {}
```
## Widgets
Standalone, server-rendered widget components. The badge is an `![]()
` (SVG), the embed is a sandboxed `` (`sandbox="allow-scripts allow-same-origin"`, `referrerpolicy="strict-origin-when-cross-origin"`).
```ts
import { TaktBadgeComponent, TaktEmbedComponent } from '@vskstudio/takt-angular'
@Component({
standalone: true,
imports: [TaktBadgeComponent, TaktEmbedComponent],
template: `
`,
})
export class StatsComponent {}
```
Read public stats programmatically with `createStats`:
```ts
import { createStats } from '@vskstudio/takt-angular'
const stats = createStats({ domain: 'example.com' })
const summary = await stats.summary({ period: '7d' })
const series = await stats.timeseries({ period: '30d' })
```
The badge `alt` text is an overridable input (defaults to `"takt"`). The optional `host` input must be an absolute `http(s)` URL — core validates it and throws on anything else (e.g. a `javascript:` URL).
`badgeUrl`, `embedUrl`, `PublicApiError` and the widget/stats types are re-exported from core.
## Framework-agnostic custom element
For non-Angular pages (or a plain `` tag), use the self-contained `<takt-analytics>` element. Privacy attributes are on by default; set them to `false` to disable.
```ts
import { defineTaktElement } from '@vskstudio/takt-angular/element'
defineTaktElement() // also auto-runs on import
```
```html
<takt-analytics domain="example.com" outbound files></takt-analytics>
```
Via CDN (bundles core, no build step):
```html
<script type="module" src="https://unpkg.com/@vskstudio/takt-angular/dist/element/index.js">
```
## API
| Export | Description |
| --- | --- |
| `provideTakt(config?)` | `EnvironmentProviders` — install at bootstrap. |
| `TaktService` | Injectable: `track`, `pageview`, `optOut`, `optIn`, `instance`. |
| `TaktEventDirective` | `[taktEvent]` standalone directive for click tracking. |
| `TaktBadgeComponent` | `` standalone component — server-rendered SVG badge. |
| `TaktEmbedComponent` | `` standalone component — server-rendered iframe. |
| `createStats(opts?)` | Public stats client (`summary`/`timeseries`/`realtime`/`breakdown`). |
| `TAKT_CONFIG` | InjectionToken holding the resolved config. |
| `defineTaktElement` | Registers `` (from `./element`). |
### `TaktConfig`
| Option | Default | Description |
| --- | --- | --- |
| `domain` | `location.hostname` | Site identifier sent with every event. |
| `endpoint` | `/api/event` | Ingestion endpoint. |
| `scriptOrigin` | — | First-party origin (`{origin}/api/event`); `endpoint` takes precedence. |
| `outbound` | `false` | Auto-track outbound link clicks. |
| `files` | `false` | Auto-track file downloads (or pass `string[]` to restrict extensions). |
| `track404` | `false` | Report a `404` event on error pages (`[data-takt-404]` / ``). |
| `spa` | `true` | Track SPA navigations (pushState / replaceState / popstate). |
| `respectDnt` | `true` | Suppress events when the browser's Do Not Track is enabled. |
| `excludeLocalhost` | `true` | Suppress events on localhost and private IP ranges. |
| `enabled` | `true` | Set to `false` to disable tracking entirely. |
| `sampleRate` | `1` | Fraction of sessions to record, between `0` and `1`. |
| `trackQuery` | `false` | Include the query string in page URLs sent with events. |
| `queryParams` | `[]` | Allowlist of query-param names to keep when `trackQuery` is on. |
| `exclude` | `[]` | Path prefixes never tracked, e.g. `['/app', '/account']` (segment-bounded, checked at send time). |
| `scrubUrl` | — | Transform the URL before it is sent. Function prop — dev-controlled, config only (cannot be set via the `` element attribute). |
| `tagged` | `false` | Auto-track clicks on `[data-takt-tag]` elements. |
## License
MIT © VSK Studio