Skip to content

Installation

Jump to bottom
Akayashuu edited this page Jun 12, 2026 · 1 revision

Installation

Three ways to add Takt to your site, depending on your stack.

  • CDN — A single <script> tag. Ideal for a static site, plain HTML, WordPress, Webflow…
  • npm — An import in your bundle. Ideal for a React, Vue, Svelte, Next app…
  • Queue — Captures takt() calls fired before the script is ready.

CDN (recommended)

The simplest method: a single tag in the <head>. The file is served from a global CDN, cached and versioned.

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

unpkg works too: replace cdn.jsdelivr.net/npm with unpkg.com.

To pin a specific version (and avoid any surprise on update), pin it in the URL: @vskstudio/takt-core@1.0.0/dist/takt.js.

npm

If you already have a bundler, install the package and drive Takt from code. This is the preferred path for framework applications.

pnpm add @vskstudio/takt-core
# or: npm install @vskstudio/takt-core
# or: yarn add @vskstudio/takt-core
# or: bun add @vskstudio/takt-core
import { init, track } from '@vskstudio/takt-core'

// Once, at app startup: fires the initial pageview,
// wires up SPA navigation and creates the shared instance.
init({ domain: 'example.com' })

// Everywhere else: emit your events.
track('Signup', { props: { plan: 'pro' } })

All init() options are detailed in the configuration.

Framework wrappers

Using React, Vue or Svelte? Rather than driving the core by hand, reach for the dedicated wrapper — component, hooks/composables, directive/action and web component included, all SSR-safe:

  • [React](/en/docs/wrappers/react) — [`@vskstudio/takt-react`](https://github.com/vskstudio/takt-react) (provider, hooks, ``).
  • [Vue](/en/docs/wrappers/vue) — [`@vskstudio/takt-vue`](https://github.com/vskstudio/takt-vue) (component, composable, directive, plugin).
  • [Svelte](/en/docs/wrappers/svelte) — [`@vskstudio/takt-svelte`](https://github.com/vskstudio/takt-svelte) (component, `use:taktEvent` action).

Each builds on @vskstudio/takt-core and exposes an /element subpath for the <takt-analytics> web component, usable even outside your framework.

Queue (calls before load)

Because the script is loaded with defer, it may not be ready when your code calls takt(). This shim creates a queue: calls are stored then replayed once the script loads. No event is lost.

<script>
  window.takt = window.takt || function () { (window.takt.q = window.takt.q || []).push(arguments) }
</script>

With the CDN snippet, this queue is already handled for you: you can call window.takt(...) immediately. This shim is only useful if you load the script in a custom way.

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

Takt — @vskstudio/takt-core

React · Vue · Svelte wrappers: see the docs site.

Clone this wiki locally