Two minutes, one script tag.

Step 1Get your site key

1. Create a free account.
2. Click Add site and enter your site's name and domain.
3. Open Settings for the site. The install snippet there already contains your site key.

Step 2Add the script

Paste the snippet into the <head> of every page you want to track. Replace YOUR_SITE_KEY with the key from Settings.

<script async src="https://sitecrumb.com/t.js" data-site="YOUR_SITE_KEY"></script>

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://sitecrumb.com/t.js" data-site="YOUR_SITE_KEY" strategy="afterInteractive" />
      </body>
    </html>
  );
}

<head>
  <meta charset="UTF-8" />
  <script async src="https://sitecrumb.com/t.js" data-site="YOUR_SITE_KEY"></script>
</head>

<script async src="https://sitecrumb.com/t.js" data-site="YOUR_SITE_KEY"></script>

Step 3Check it works

1. Open your site in a new tab and click around for a few seconds.
2. Go back to Settings in SiteCrumb. The install box turns green and shows Receiving data.
3. Your visit shows up under Recordings a few seconds later.

Single-page apps

No extra setup. SiteCrumb listens for pushState, replaceState and popstate, so every route change counts as a pageview and shows up in heatmaps, funnels and the recording timeline.

Custom events

Track the moments that matter to you, like a signup or a purchase. Events show up on the recording timeline and can be used as funnel steps, heatmap segments and recording filters.

ht('event', 'signup');
ht('event', 'purchase', { plan: 'pro', value: 49 }); // with properties

Without writing JavaScript

Add data-ht-event to any element. SiteCrumb sends the event each time it is clicked.

<button data-ht-event="pricing_cta">Start trial</button>

Calling ht() before the script loads

The script loads with async, so it may not be ready when your code runs. Add this line before any ht() call and early calls are queued until it is.

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

Custom values

Find recordings by a value from your own system, such as a user ID, a Discord ID or an order number. First add it on the Custom values page in the dashboard sidebar: a name to show (Discord ID) and the name you use in code (discordId). Then send it from your site once it is known, for example after sign-in:

ht('set', 'discordId', '80351110224678912');
ht('set', { discordId: '80351110224678912', plan: 'pro' }); // several at once

Each custom value gets its own search field on the Recordings page, a column in the CSV export, a heatmap segment, and a row next to each recording. Values match exactly, so send IDs as strings. Values sent before you add their name are found as well. Pages that still call the older ht('identify', id, traits) send userId plus the traits as custom values.

Feedback widget

Turn on the widget in the site's Settings. You can change the question and the color, swap the emoji faces for numbers 1 to 5, and add a Feedback tab on the left or right edge of the screen. Every answer is linked to the visitor's recording.

The tab is off by default. Open the widget from your own button or after a specific action:

ht('feedback');

Surveys

Create surveys under Surveys in the dashboard: NPS, star ratings, single or multiple choice, and open text. Choose the pages and devices, and whether the survey opens on load, after a delay, after scrolling or when the visitor is about to leave. Each visitor sees a survey once.

To keep a survey from some of your users, add a condition on a custom value, for example role is not owner, and send that value with ht('set') before the survey would open. A visitor without the value counts as “is not”. The value is remembered in the visitor's browser until ht('reset').

To try a survey on your live site, add ?ht_survey=SURVEY_ID to any page's address. To open one from your own code, set it to show only from code and call:

ht('survey', 'SURVEY_ID');

Hide content from recordings

Text typed into form fields is never shown in recordings. To hide other parts of the page:

• class="ht-mask" replaces the element's text with placeholder characters.
• class="ht-block" hides the whole element and shows an empty box of the same size.
• Mask all text in Settings masks every piece of text on the site.

Script options

Set these as attributes on the script tag.

Recording sample rate, heatmaps, text masking and the feedback widget are set per site in Settings, so you can change them without touching your code.

Allowed domains

In Settings, list the domains your site runs on. SiteCrumb then ignores data sent from anywhere else, so nobody can copy your snippet and fill your account with their traffic.

Leave the list empty while you are setting up and testing. Fill it in when the site goes live.