Setup guide

Up and running in minutes.

One script tag gives you analytics, session replay, heatmaps and bot filtering. Uptime monitoring is set up separately from the dashboard.

1. Add your website

Create a free account, add your website in the dashboard and copy your tracking ID.

2. Paste the script

Add this inside the <head> of every page, and replace YOUR_ID with your tracking ID.

index.html

<script async
  src="https://i.karoys.com/insights.js"
  data-tracking-id="YOUR_ID"
  data-endpoint="https://i.karoys.com/api/event"
  data-collect-biometrics="false"
></script>

Using a framework? Put the same tag in your root HTML template: index.html for React, Vue and Angular, app.html for SvelteKit, or your layout file for Astro. On WordPress and Shopify, paste it into your theme's header. For Next.js:

import Script from "next/script";

// In app/layout.tsx, inside <body>:
<Script
  src="https://i.karoys.com/insights.js"
  strategy="afterInteractive"
  data-tracking-id="YOUR_ID"
  data-endpoint="https://i.karoys.com/api/event"
/>

3. Check that it works

Open your website in a new tab, then open the Real-time view in your dashboard. Your visit should appear shortly. Replays and heatmaps fill in as sessions finish.

Track custom events

Call this anywhere after the script has loaded, for example when a visitor signs up.

insights.track("signup", { plan: "pro" });

Replay and heatmap options

Session replay and heatmaps are on by default. Add any of these attributes to the script tag to change that.

data-replay="false" Turn session replay off.

data-replay-sample="0.25" Record a share of sessions (0 to 1). The default is every session.

data-replay-errors="1" Also capture the moments before an error or rage click in sessions that are not otherwise recorded.

data-replay-consent="required" Wait for your consent banner. Recording starts after you call insights.setConsent(true).

data-heatmap="false" Turn click and scroll heatmaps off.

data-api-errors="false" Turn off tracking of failed API calls (status 400+, network errors, timeouts) to your own site.

Protect sensitive content

Form inputs are masked and password and payment fields are never recorded. To hide anything else, add an attribute to the element.

<div data-replay-block>Hidden from recordings</div>
<p data-replay-mask>Text here is masked</p>

If you use a consent banner, set data-replay-consent="required" and call this once the visitor agrees:

insights.setConsent(true);