Angular

Angular a un wrapper dédié : @vskstudio/takt-angular (provider, service, directive, composants badge/embed, web component), bâti sur le cœur @vskstudio/takt-core. APIs standalone pour Angular 17+.

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

Le package est entièrement typé et sûr au SSR : côté serveur, provideTakt est inerte et TaktService no-ope. Il expose deux points d’entrée :

• @vskstudio/takt-angular — provideTakt(), le TaktService injectable, la directive [taktEvent], les composants TaktBadgeComponent / TaktEmbedComponent et le token TAKT_CONFIG. Il réexporte aussi createStats, badgeUrl, embedUrl et PublicApiError du cœur.
• @vskstudio/takt-angular/element — le web component <takt-analytics> autonome, pour du HTML pur.

Setup avec provideTakt()

Enregistre Takt une seule fois au bootstrap avec provideTakt. Il ne boote que dans le navigateur, émet le pageview initial, câble l’autocapture demandée et libère tout quand l’application est détruite.

import { bootstrapApplication } from '@angular/platform-browser'
import { provideTakt } from '@vskstudio/takt-angular'
import { AppComponent } from './app/app.component'

bootstrapApplication(AppComponent, {
  providers: [
    provideTakt({
      // domain par défaut = location.hostname, endpoint = https://taktlytics.com/api/event
      outbound: true, // suit les liens sortants
      files: true // suit les téléchargements (ou passe ['pdf', 'zip'])
      // spa: true, respectDnt: true, excludeLocalhost: true (défauts)
    })
  ]
})

Options de TaktConfig :

La sémantique de ces réglages est détaillée dans Configuration.

TaktService

Injecte TaktService n’importe où pour émettre des events impérativement. Aucune méthode ne lève avant l’init ou côté serveur : track() et pageview() sont alors sans effet et émettent un console.warn unique, optOut() / optIn() sont silencieux.

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() et takt.instance sont aussi dispo.
}

Directive [taktEvent]

Pour du suivi de clic déclaratif, la directive taktEvent résout l’instance active au moment du clic. Importe-la dans un composant standalone :

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

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

Widgets

Deux composants standalone affichent les widgets publics d’un site : TaktBadgeComponent (<takt-badge>, l’image SVG rendue par le serveur) et TaktEmbedComponent (<takt-embed>, le mini-tableau de bord en iframe). Ils demandent un site public et vérifié.

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

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

domain est requis. Le badge accepte en plus variant, glyph, lang, host et alt ; l’embed theme, lang, host, width, height et title. host pointe l’adresse de Takt (par défaut https://taktlytics.com) — renseigne-le si tu sers les widgets depuis un domaine personnalisé. Pour lire les mêmes chiffres en TypeScript, le paquet réexporte createStats, badgeUrl, embedUrl et PublicApiError du cœur.

Web component <takt-analytics>

Pour des pages non-Angular (ou un simple <script>), utilise l’élément <takt-analytics> autonome. spa, respect-dnt et exclude-localhost sont actifs par défaut : mets-les à "false" pour les couper. outbound, files, track404 et tagged sont des drapeaux de présence — l’attribut seul suffit à les activer.

import { defineTaktElement } from '@vskstudio/takt-angular/element'
defineTaktElement() // s'exécute aussi automatiquement à l'import

<takt-analytics domain="exemple.fr" outbound files></takt-analytics>

Attributs reconnus :

scrubUrl n’a pas d’équivalent en attribut : passe par provideTakt() pour une réécriture d’URL sur mesure.

Via CDN (embarque le cœur, aucun build) :

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