takt

Vanilla JS

@vskstudio/takt-core est le cœur agnostique sur lequel tous les wrappers sont bâtis. Entièrement typé, zéro dépendance, il fonctionne dans n'importe quel bundler — et embarque aussi le snippet CDN.

L'import est sûr côté serveur : le module ne touche aucune API navigateur au chargement, et track() / pageview() / optOut() / optIn() sont des no-op tant que init() n'a pas tourné. En revanche init() lui-même s'appelle dans le navigateur : il câble history et lit location.

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

init() + track()

Appelle init() une seule fois au démarrage : il crée l’instance partagée, émet le pageview initial et câble la navigation SPA (pushState/replaceState/popstate/hashchange). Ces deux derniers points sont pilotés par l’option auto : avec auto: false, ni le patch d’historique ni le pageview de boot ne sont posés. Ensuite, émets tes events de n’importe où avec track().

import { init, track } from '@vskstudio/takt-core'

// Une fois, au démarrage de l'app.
init({ domain: 'exemple.fr', outbound: true })

// Partout ailleurs.
track('Signup', { props: { plan: 'pro' } })

init() est idempotent : un second appel détache les listeners de l’instance précédente avant d’en créer une nouvelle. La liste complète des options vit dans la configuration et la référence API.

Revenue

track() accepte un objet revenue en plus des props — le montant est une chaîne qui matche \d+(\.\d{1,2})?, la devise un code à 3 lettres (envoyée en majuscules) :

import { track } from '@vskstudio/takt-core'

track('Purchase', {
  props: { plan: 'pro' },
  revenue: { amount: '29.00', currency: 'EUR' }
})

Si le montant ou la devise ne valide pas, le revenue est abandonné (avertissement en console) mais l’event est quand même envoyé.

L’instance renvoyée par init() — ou par createTakt(), qui construit une instance isolée sans singleton — expose exactement la même signature, utile si tu préfères ne pas dépendre du singleton :

const takt = init({ domain: 'exemple.fr' })

takt.track('Purchase', { revenue: { amount: '29.00', currency: 'EUR' } })

pageview() + consentement

pageview() émet un pageview à la main — rarement utile tant que auto est actif, puisque la navigation est alors suivie toute seule ; c’est en revanche le bon outil quand tu as désactivé auto (c’est ce que fait l’intégration Astro). optOut() / optIn() pilotent le consentement par visiteur, persisté dans localStorage sous la clé takt_ignore :

import { pageview, optOut, optIn } from '@vskstudio/takt-core'

optOut() // aucun event envoyé
optIn()  // reprend le tracking
pageview()

Voir Vie privée pour l’ordre exact des garde-fous.

Snippet CDN

Pas de bundler ? Le même package fournit un script prêt à l’emploi — une seule balise dans le <head>, l’init se fait depuis les attributs data-* :

<script defer src="https://cdn.jsdelivr.net/npm/@vskstudio/takt-core/dist/takt.js" data-domain="exemple.fr"></script>

Sans data-endpoint ni data-script-origin, le snippet envoie vers https://taktlytics.com/api/event — comme le SDK npm. Passe data-endpoint="/api/event" pour un proxy first-party same-origin.

Côté snippet, seul window.takt(...) (la fonction track) est exposé — voir Installation pour le shim de file d’attente et la référence API pour le global.

Source sur GitHub : github.com/vskstudio/takt-core · package sur npm : @vskstudio/takt-core.