How to add analytics to Framer

Framer lets you add code to the head of every page from the site settings. Framer sites navigate client-side, and those page changes are tracked.

No cookies, no banner ~3 KB script About 2 minutes

Before you start

Create a free Cool Analytics account and add your site. You'll get a site ID — replace YOUR_SITE_ID in the code below with it. The dashboard shows the snippet with your ID already filled in.

Install on Framer

  1. 1Open your project and go to Site Settings → General.
  2. 2Scroll to Custom Code and paste the snippet into the field for the end of <head>.
  3. 3Publish your site to push the change live.
Site Settings → General → Custom Code
<script defer src="https://coolanalytics.dev/hb.js" data-site="YOUR_SITE_ID"></script>

Check that it works

Open your live site in a new tab, then open your Cool Analytics dashboard. Your visit appears on the live map within seconds — with the page you're on, where you came from and your browser.

Nothing showing up? Make sure you're looking at the published site (not a preview or editor), that an ad blocker isn't blocking the script, and that you're not testing on localhost.

Track signups, purchases and clicks

Pageviews, sources, countries and outbound link clicks are tracked automatically. For the moments that matter to you, send a custom event. Events named like a signup show up as signups, and events with an amount show up as revenue — on the live map and per traffic source.

custom events
// anywhere in your Framer site's browser code
window.hb?.track("signup");

// with an amount, it shows up as revenue
window.hb?.track("purchase", { amount: 49 });

Framer tips

  • Client-side route changes are tracked automatically — the script listens to the browser history, so there's no router hook to wire up.
  • Custom code isn't active in the canvas preview — check the published site.
  • Depending on your plan, custom code may require a paid site plan; Framer shows a prompt if it's not included.

Want to keep your own visits out of the stats? Open your site once with #hb-ignore at the end of the URL. That browser is excluded until you visit with #hb-track.

Framer analytics FAQ

Why not just use Framer's built-in analytics?+

Framer analytics covers basics. Cool Analytics adds live visitor journeys, sources including AI assistants, and revenue from custom events.

Can I track button clicks in Framer?+

Yes, with a code override or a small embed that calls window.hb?.track('cta_click').

Does it work with Framer's localization?+

Yes. Localized pages have their own paths, so you'll see each language separately.

See who's on your Framer site right now.

One line of code. No cookies. 7 days free.