Angular

Angular has a dedicated wrapper: @vskstudio/takt-angular (provider, service, directive, badge/embed components, web component), built on the @vskstudio/takt-core core. Standalone APIs for Angular 17+.

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

The package is fully typed and SSR-safe: on the server provideTakt is inert and TaktService no-ops. It exposes two entry points:

• @vskstudio/takt-angular — provideTakt(), the injectable TaktService, the [taktEvent] directive, the TaktBadgeComponent / TaktEmbedComponent components and the TAKT_CONFIG token. It also re-exports createStats, badgeUrl, embedUrl and PublicApiError from the core.
• @vskstudio/takt-angular/element — the self-contained <takt-analytics> web component for plain HTML.

Setup with provideTakt()

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 https://taktlytics.com/api/event
      outbound: true, // auto-track outbound links
      files: true // auto-track downloads (or pass ['pdf', 'zip'])
      // spa: true, respectDnt: true, excludeLocalhost: true (defaults)
    })
  ]
})

TaktConfig options:

The semantics of these settings are detailed in Configuration.

TaktService

Inject TaktService anywhere to emit events imperatively. No method ever throws before init or on the server: track() and pageview() are then no-ops that emit a single console.warn, while optOut() / optIn() stay silent.

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() and takt.instance are also available.
}

[taktEvent] directive

For declarative click tracking, the taktEvent directive resolves the live instance at click time. Import it into a standalone component:

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

Widgets

Two standalone components render a site’s public widgets: TaktBadgeComponent (<takt-badge>, the server-rendered SVG image) and TaktEmbedComponent (<takt-embed>, the mini dashboard in an iframe). Both require a public and verified site.

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

@Component({
  standalone: true,
  imports: [TaktBadgeComponent, TaktEmbedComponent],
  template: `
    <takt-badge domain="example.com" variant="d"></takt-badge>
    <takt-embed domain="example.com" theme="dark"></takt-embed>
  `
})
export class PublicStatsComponent {}

domain is required. The badge also accepts variant, glyph, lang, host and alt; the embed accepts theme, lang, host, width, height and title. host points at the Takt address (defaults to https://taktlytics.com) — set it if you serve the widgets from a custom domain. To read the same figures in TypeScript, the package re-exports createStats, badgeUrl, embedUrl and PublicApiError from the core.

<takt-analytics> web component

For non-Angular pages (or a plain <script> tag), use the self-contained <takt-analytics> element. spa, respect-dnt and exclude-localhost are on by default: set them to "false" to disable. outbound, files, track404 and tagged are presence flags — the attribute alone turns them on.

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

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

Recognised attributes:

scrubUrl has no attribute form: go through provideTakt() for custom URL scrubbing.

Via CDN (bundles the core, no build step):

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