Heatmaps and A/B tests for single-page apps.

React, Vue or Svelte with Vite

1. Sign in to Cuttl, or create a free account. Add your site with its domain. Open the site’s Install tab and copy the Cuttl Tag. It starts with <!-- Start Cuttl -->.
2. Open index.html in your project’s root folder.
3. Paste the Cuttl Tag inside <head>.
4. Build and deploy.
5. In Cuttl, turn on Journey Insights for heatmaps and recordings, or Web Experiments for A/B tests. Admins can do it on the product’s page or in Settings → Plan & usage. A new workspace starts with both off, and until one is on, Cuttl keeps nothing from your site.

Other setups

• Create React App: paste it inside <head> in public/index.html.
• SvelteKit: paste it inside <head> in src/app.html.
• Astro: paste it in your base layout’s <head> and add is:inline to the script tag (<script is:inline>), so Astro leaves it as it is.
• Next.js: see the Next.js guide.

Check it works

1. Open any page of your live site in a browser.
2. In Cuttl, open the site’s Install tab. It shows when data last arrived, usually within a minute.
3. Nothing yet? View the live page’s source and search for app.cuttl.io to check the Cuttl Tag is there. Then check that the site’s domain in Cuttl matches the address in your browser.

Check on your deployed site. Cuttl only takes data from your site’s domain, so pages on localhost won’t show up.

Good to know

• Don’t add the Cuttl Tag from a component or useEffect. It would run after the page appears, and A/B tests could flash.
• React Router, Vue Router and other routers need no setup: each route change counts as a page view.
• To leave out your own sessions, open any page of your site once with ?cuttl_ignore=1 at the end of the address.