Idiomatic Angular wrapper for Takt, privacy-friendly analytics. Standalone APIs for Angular 17+.

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

@vskstudio/takt-core is a peer dependency. Since 0.8.0 (route redaction), it must be >=0.10.0.

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.

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.

Inject TaktService anywhere. Every method is a never-throwing no-op on the server, and before init except consent: optOut(), optIn() and isOptedOut() go straight to the stored choice, so a consent banner works before provideTakt has booted.

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.
}

Since 0.8.0 (with @vskstudio/takt-core 0.10.0). Query strings are stripped by default, but path segments are sent as they are: /verify/abc123 leaks the token. List the sensitive routes with redactRoutes and a matching path is sent as its pattern, while every other path keeps its real value.

provideTakt({
  redactRoutes: ['/verify/:token', '/invoices/:id'],
})

/verify/abc123 is then sent as /verify/:token. Patterns accept Angular syntax (:param, :param?, *, **) as well as [param], [[optional]], [...rest] and (group). The rule covers the page URL, same-origin referrers, outbound and download links, and 404 paths.

For a fully private app, routeTemplates: true sends every page as its route template (/users/42 becomes /users/:id). Give it a routeTemplate resolver: it runs in the injection context of provideTakt, so it can inject() the router, and routeTemplateFromSnapshot turns the router snapshot into a template.

import { inject } from '@angular/core'
import { provideRouter, Router } from '@angular/router'
import { provideTakt, routeTemplateFromSnapshot } from '@vskstudio/takt-angular'

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideTakt({
      routeTemplates: true,
      routeTemplate: () => routeTemplateFromSnapshot(inject(Router).routerState.snapshot.root),
    }),
  ],
})

routeTemplateFromSnapshot follows firstChild from the root, joins the non-empty routeConfig.path values (layout routes with path: '' are skipped) and returns / when none is set. In this mode the initial pageview waits for the app to become stable, so the initial navigation has matched its route before the template is read. When the resolver returns nothing, redactRoutes still applies and the real path is sent otherwise. The package does not depend on @angular/router: the helper only reads the snapshot shape.

On a public site, prefer redactRoutes: routeTemplates merges every article into one row. The CDN snippet of @vskstudio/takt-core does not support these options. Details and pattern syntax: core wiki, Privacy.

The taktEvent directive resolves the live instance at click time.

import { TaktEventDirective } from '@vskstudio/takt-angular'

@Component({
  standalone: true,
  imports: [TaktEventDirective],
  template: `
    <button
      taktEvent="Signup"
      [taktProps]="{ plan: 'pro' }"
      [taktRevenue]="{ amount: '29.00', currency: 'EUR' }"
    >
      Sign up
    </button>
  `,
})
export class SignupComponent {}

Standalone, server-rendered widget components. The badge is an <img> (SVG); the embed is a sandboxed <iframe> (sandbox="allow-scripts allow-same-origin", referrerpolicy="strict-origin-when-cross-origin"). Both lazy-load.

import { TaktBadgeComponent, TaktEmbedComponent } from '@vskstudio/takt-angular'

@Component({
  standalone: true,
  imports: [TaktBadgeComponent, TaktEmbedComponent],
  template: `
    <takt-badge domain="example.com" variant="d" glyph="dash" lang="fr" alt="Visits" />
    <takt-embed domain="example.com" theme="dark" [width]="404" [height]="264" />
  `,
})
export class StatsComponent {}

<takt-badge> inputs: domain (required), variant ('a' | 'b' | 'd'), glyph ('unplug' | 'dash' | 'off' | 'eyeoff'), lang ('fr' | 'en'), host, and alt — an overridable label that defaults to "takt".

<takt-embed> inputs: domain (required), theme ('light' | 'dark' | 'auto'), lang, host, width (404), height (264), title ("takt").

The optional host input must be an absolute http(s) URL — core validates it (throwing on anything else, e.g. a javascript: URL) and reduces a valid host to its origin (dropping any path or query). An empty host targets the same origin. The embed src is built by core's trusted URL builder and only then passed through bypassSecurityTrustResourceUrl, so the sanitizer bypass only ever trusts a scheme-checked URL.

Read public stats programmatically with createStats:

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' })

For non-Angular pages (or a plain <script> tag), use the self-contained <takt-analytics> element. Privacy attributes are on by default; set them to false to disable.

import { defineTaktElement } from '@vskstudio/takt-angular/element'
defineTaktElement() // also auto-runs on import

<takt-analytics domain="example.com" outbound files></takt-analytics>

Add a debug attribute to log each payload; debug="false" or "0" turns it off.

Add redact-routes with a comma-separated list of patterns to send sensitive paths as their pattern: <takt-analytics redact-routes="/verify/:token, /reset/:code"></takt-analytics>. The element has no router, so it does not support routeTemplates.

Via CDN (bundles core, no build step):

<script type="module" src="https://unpkg.com/@vskstudio/takt-angular/dist/element/index.js"></script>
<takt-analytics></takt-analytics>

domain?, endpoint?, outbound = false, files = false (or string[]), spa = true, respectDnt = true, excludeLocalhost = true, exclude = [] (path prefixes never tracked, e.g. ['/app', '/account'], segment-bounded, checked at send time), scrubUrl? (transforms the page URL, the referrer, and the url prop of outbound-link and file-download events), debug = false (logs each payload with console.debug before sending), redactRoutes = [] (route patterns sent as the pattern instead of the real path, e.g. ['/verify/:token'], see Route redaction), routeTemplates = false (send every page as its route template; needs routeTemplate), routeTemplate? (returns the current route template; runs in the injection context, so it can inject(Router)).

MIT © VSK Studio

• Repository: github.com/taktlytics/takt-angular
• npm: @vskstudio/takt-angular
• Core: takt-core · its wiki