SDKs

JavaScript SDK

Install the Tracklyne browser SDK, capture events, configure autocapture, persistence and privacy options.

Install

Use the script tag, or the npm package with a bundler. Both expose the same methods; the script tag puts the instance on window.tracklyne.

Terminal

npm install @tracklyne/js

app.ts

import tracklyne from "@tracklyne/js";

tracklyne.init("tl_your_project_token", {
  api_host: "https://tracklyne.com",
  capture_pageview: "history", // also on client-side navigation (SPAs)
  persistence: "cookie",       // "cookie" | "localStorage" | "memory"
});

Option	Default	What it does
`autocapture`	`true`	Clicks, form submits and changes
`capture_pageview`	`true`	`"history"` also captures on `pushState` and `popstate`
`capture_exceptions`	`true`	Unhandled errors and rejections go to error tracking
`enable_heatmaps`	`true`	Click positions for heatmaps
`disable_session_recording`	`false`	Replay is also controlled from project settings
`mask_all_inputs`	`true`	Masks every input in replays
`disable_surveys`	`false`	Popover surveys
`opt_out_by_default`	`false`	Send nothing until `opt_in_capturing()`

With the script tag, use data attributes: data-persistence="memory", data-capture-pageview="history", data-autocapture="false"…

Capture events

Name events after what the user did, in the past tense, and attach the properties you will want to break down by later.

app.ts

tracklyne.capture("project created", { template: "blank", members: 3 });

tracklyne.register({ app_flavor: "beta" }); // super properties, sent with every event

Cookies and persistence

Mode	Stores	Use when
`cookie` (default)	Ids and flags in a first-party cookie `tl_<token>` on your top domain	Visitors should be recognised across subdomains and visits
`localStorage`	The same state in local storage	One domain, no cookie
`memory`	Nothing; a new anonymous id per page load	You do not want a cookie banner for analytics

Opt out and privacy

app.ts

tracklyne.opt_out_capturing(); // stop sending anything from this browser
tracklyne.opt_in_capturing();  // resume

Add the class tl-no-capture (or the attribute data-tl-no-capture) to an element to exclude it, and its children, from autocapture, heatmaps and replays. Text that looks like a card number is never captured.

Errors

Unhandled errors and promise rejections are sent as $exception events. Report caught errors yourself:

checkout.ts

try {
  await checkout();
} catch (err) {
  tracklyne.captureException(err, { step: "payment" });
}