Docs

Connect the tigr SDK in 5 minutes

One core, installed with a single line for Vue, React, Nuxt, and Next. Pick your stack below, copy the code, paste it, and events start flowing into your workspace.

  • Under 8KB, async
  • Automatic event capture
  • User identification in one call
View the SDKs on GitHub
tigr mascot
Never set up analytics before?Hand this guide to your AI agent, it detects your stack, wires the API key, installs the SDK, and adds your first events.Open the setup guide
Recommended

Don't write the events, let your AI agent add them

You installed the SDK. Now skip the manual wiring: point your AI coding agent (Claude Code) at any page and the tigr skill walks your whole component tree, every button, form, and store, and adds meaningful, detailed events exactly where they matter.

  • Vue & Nuxt/tigr-vue app/pages/checkout.vue

    Reads the page, follows every child component and composable, then writes the track / setUser / reset calls for you.

  • React & Next.js/tigr-react app/checkout/page.tsx

    Traverses the page down to the components and stores that own each action, then instruments them.

  • React Native/tigr-react-native src/screens/checkout.tsx

    Walks the screen and its child components, wires pageview on the navigator, and instruments the key actions.

Each skill proposes the events first, never touches unrelated code, and the SDK no-ops if it can't reach the network, so instrumentation never crashes your app.

See it run

Watch a page get instrumented, then go live

Two steps, end to end: the agent walks your component tree and writes the events, then those exact events stream into your tigr dashboard in real time.

agent · instrumenting
tigr dashboard live

Waiting for events…

Never set up analytics before?Hand this guide to your AI agent, it detects your stack, wires the API key, installs the SDK, and adds your first events.Open the setup guide

The SDK runs in the browser only, in plain Vue apps, just register the plugin directly.

1. Install

Add the package to your project.

terminal
npm install tigr-vue

2. Register the plugin

Set it up once when the app is created, apiKey is all you need.

main.ts
import { createApp } from 'vue'
import { TigrPlugin } from 'tigr-vue'
import App from './App.vue'

createApp(App)
  .use(TigrPlugin, {
    apiKey: 'tigr_pk_live_8f2a',
  })
  .mount('#app')

3. Send events

Get the client with useTigr() and send any custom event you want.

UpgradeButton.vue
<script setup lang="ts">
import { useTigr } from 'tigr-vue'

const tigr = useTigr()

function upgrade() {
  tigr.track('upgrade_clicked', { plan: 'pro' })
}
</script>

4. Identify the user

On login, link the anonymous visitor to a real user with setUser, call reset on logout.

UserMenu.vue
<script setup lang="ts">
import { useTigr } from 'tigr-vue'

const tigr = useTigr()

function onLogin(user) {
  tigr.setUser(user.id, { name: user.name, email: user.email })
}

function onLogout() {
  tigr.reset()
}
</script>
Identify users

Link events to people

By default, every event is tied to an anonymous visitorId. When a user logs in, call setUser, from then on, every event matches the real user and a profile is built automatically from the traits you send. Usage for each framework is in the "Identify the user" step above.

  • setUser(userId, traits?)Call on login. Links the anonymous visitor to a real user and saves profile traits (name, email, plan…).
  • identify(userId, traits?)Does exactly the same as setUser, both identify the user. Use whichever name you prefer.
  • reset()Call on logout. Forgets the user and starts a new anonymous session.
Configuration

Config options

All shared across Vue, React, Nuxt, Next, and React Native, they use the same core.

OptionDefaultDescription
apiKeyrequiredProject API key. Determines which project receives the data.
autoCapturetruetrue / false, or per signal: { rageClick: false, error: true }.
flushInterval2000How many ms after the first queued event a batch is sent.
batchSize20Send immediately when the queue reaches this size.
debugfalseLogs every event and flush to the console.
devModefalseWhen true the SDK does nothing, turn it on in development so your own activity doesn't pollute your analytics.
Auto captured events

Signals you get with zero code

These are collected out of the box. You define everything else with track('event_name', { ...props }).

  • pageview

    Every page view (including SPA route changes).

  • session_start

    When a new session starts (renews after 30 min of inactivity).

  • rage_click

    3+ rapid clicks in the same spot, the user is frustrated or the button is broken.

  • scroll_depth

    When the user reaches the bottom of the page.

  • error

    Uncaught JS errors and promise rejections.

  • page_leave

    When the user leaves the page/tab.

Open source

The SDKs live on GitHub

Every tigr SDK is open source. Read the code before you install it, open an issue when something breaks, or send a pull request.

github.com/UseTigrAll SDKs, issues and releases in one place.