takt

Svelte

Svelte a un wrapper dédié : @vskstudio/takt-svelte (composant, action, web component), bâti sur le cœur @vskstudio/takt-core.

Le cœur est une dépendance peer : installe les deux paquets.

pnpm add @vskstudio/takt-svelte @vskstudio/takt-core
# ou : npm install @vskstudio/takt-svelte @vskstudio/takt-core
# ou : yarn add @vskstudio/takt-svelte @vskstudio/takt-core
# ou : bun add @vskstudio/takt-svelte @vskstudio/takt-core

Le package expose trois styles d’intégration :

  • @vskstudio/takt-svelte — le composant <Takt> + le hook useTakt().
  • @vskstudio/takt-svelte/actions — l’action use:taktEvent + les fonctions init/track… réexportées du cœur.
  • @vskstudio/takt-svelte/element — le web component <takt-analytics> pour du HTML pur.
Seuls <Takt> et <takt-analytics> sont sûrs au SSR : ils n'initialisent qu'au montage, côté navigateur. Le init() du sous-chemin /actions touche history dès l'appel — l'exécuter dans le <script> d'un composant SvelteKit le fait tourner au rendu serveur et lève ReferenceError: history is not defined. Appelle-le depuis onMount.

Cette page est la référence des options. Pour l’intégration de bout en bout dans une application SvelteKit et son piège principal — useTakt() appelé dans le <script> d’un composant, donc avant le montage de <Takt> — voir le guide analytics sans cookie dans une application SvelteKit.

Composant <Takt> + useTakt()

Place <Takt> une fois (typiquement dans +layout.svelte) : il initialise l’instance au montage, émet le pageview initial et câble la navigation SPA. Le composant ne rend aucun balisage — c’est un point de câblage, pas un conteneur, et il n’a donc pas d’enfants. useTakt() récupère l’instance depuis n’importe où dans l’application (un store de module sert de relais), pas seulement sous <Takt>.

<!-- +layout.svelte -->
<script>
  import { Takt } from '@vskstudio/takt-svelte'
</script>

<Takt domain="exemple.fr" outbound files />
<slot />

Appelle useTakt() dans le gestionnaire, pas dans le <script> : le <script> s’exécute à l’initialisation du composant, donc avant le onMount de <Takt>. Une instance capturée là serait le no-op définitif, et tous les events partiraient dans le vide.

<script>
  import { useTakt } from '@vskstudio/takt-svelte'
</script>

<button onclick={() => useTakt().track('Signup', { props: { plan: 'pro' } })}>
  S'inscrire
</button>

<button
  onclick={() =>
    useTakt().track('Purchase', {
      props: { plan: 'pro' },
      revenue: { amount: '29', currency: 'EUR' }
    })}
>
  Acheter
</button>

Props du composant <Takt> :

PropTypeDéfautRôle
domainstringlocation.hostnameIdentifiant du site
endpointstringhttps://taktlytics.com/api/eventURL d’ingestion. Passe /api/event pour un proxy first-party same-origin.
scriptOriginstring—Origine first-party dont dériver l’endpoint (l’origine suivie de /api/event). endpoint l’emporte.
outboundbooleanfalseSuit les liens sortants
filesboolean \| string[]falseSuit les téléchargements (liste d’extensions optionnelle)
spabooleantrueSuit la navigation client (pageviews auto)
track404booleanfalseSignale un événement 404 sur les pages d’erreur (marqueur [data-takt-404] / <meta name="takt:404">, ou statut HTTP 404).
taggedbooleanfalseSuit automatiquement les éléments [data-takt-event]
respectDntbooleantrueRespecte Do Not Track
excludeLocalhostbooleantrueIgnore localhost / IP privées
enabledbooleantrueInterrupteur général — false coupe toute mesure
sampleRatenumber1Fraction de sessions échantillonnées (0–1)
trackQuerybooleanfalseConserve la query string dans les URL
queryParamsstring[]—Paramètres conservés quand trackQuery est false (liste blanche)
excludestring[]—Préfixes de chemin jamais suivis. Bornés au segment : /app couvre /app et /app/… mais pas /application.
scrubUrl(url: string) => string—Transforme chaque URL avant envoi
Le composant forwarde toutes ces options au cœur : les réglages avancés (enabled, sampleRate, trackQuery, queryParams, exclude, scrubUrl) sont disponibles en props, sans passer par le sous-chemin /actions. Seul debug n'est pas exposé.

useTakt() ne lève pas : appelé avant le montage de <Takt> ou pendant le SSR, il renvoie une instance no-op — et avertit une fois en console (useTakt() called before <Takt /> mounted). Ce message est le symptôme du piège ci-dessus.

Action use:taktEvent

Sans composant, initialise toi-même via init(), puis attache taktEvent à un élément cliquable. init() doit être appelé depuis onMount : au niveau du <script>, il s’exécuterait au rendu serveur et lèverait ReferenceError: history is not defined.

<script>
  import { onMount } from 'svelte'
  import { init, taktEvent } from '@vskstudio/takt-svelte/actions'

  onMount(() => init({ domain: 'exemple.fr', sampleRate: 0.5, trackQuery: false }))
</script>

<button use:taktEvent={{ name: 'Signup', props: { plan: 'pro' } }}>
  S'inscrire
</button>

<button use:taktEvent={{ name: 'Purchase', revenue: { amount: '29', currency: 'EUR' } }}>
  Acheter
</button>

L’action est réactive : si les paramètres changent, les clics suivants utilisent les nouvelles valeurs. Le listener est retiré à la destruction de l’élément.

Web component <takt-analytics>

Pour du HTML pur ou un framework non-Svelte, importe l’élément (auto-enregistré) :

<script type="module">
  import '@vskstudio/takt-svelte/element'
</script>

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

Les attributs miroir des props :

  • Drapeaux (présence = actif, valeur ignorée) : outbound, files, track-404, tagged.
  • Actifs par défaut, mets ="false" pour les couper : spa, respect-dnt, exclude-localhost. Les graphies historiques en un mot respectdnt et excludelocalhost restent acceptées.
  • Valeurs : domain, endpoint, script-origin, enabled, sample-rate, track-query, ainsi que query-params et exclude qui prennent une liste séparée par des virgules.

files ne prend pas de liste d’extensions ici, et scrubUrl n’a pas d’équivalent : ce sont des fonctions et des tableaux que le composant Svelte reçoit en props, hors de portée d’un attribut HTML.