How to add analytics to a Framer site

Custom code needs a paid Framer site plan (Mini or above) and only runs on the published site — not in the canvas or Preview. Because Framer sites behave like a single-page app, many analytics tools need an extra "SPA mode" setting there; VisitTrack's script listens to the browser's History API out of the box, so the plain tag is all you need.

How to install VisitTrack on Framer

1. 1

   Step 1: Copy your site id

   Add your Framer domain as a site in VisitTrack and copy the snippet from the install step (or Settings → General). Replace SITE_ID below.

2. 2

   Step 2: Open Site Settings → General → Custom Code

   In your Framer project, open Site Settings, stay on General, and scroll to Custom Code. You'll see four boxes: start and end of <head>, start and end of <body>.

3. 3

   Step 3: Paste the tag into End of <head> tag

   Paste the snippet into End of <head> tag. Don't also add it per page in Page Settings — two copies would count every page twice.

   End of <head> tagCopy

   <script defer data-site="SITE_ID" src="https://visitrack.app/tracker.js"></script>

4. 4

   Step 4: Publish

   Click Publish (top right). Custom code isn't active in Preview, so check the result on the published URL.

How to check VisitTrack is working on Framer

1. Open the published site and click through two or three pages using your nav.
2. VisitTrack's live view shows you within seconds, and the Pages tab lists each page path — including CMS detail pages.
3. In DevTools → Network, each page change sends a POST to visitrack.app/api/collect without a full page reload.

Does VisitTrack track Framer page navigation?

Framer changes pages client-side, updating the URL with the History API. The tracker wraps history.pushState and replaceState and listens for popstate, so every page change — and the back button — is one pageview with the right path. You don't need Framer's framer:pageview events or a custom listener.

Scrolling to a section with an anchor link (/#pricing) doesn't change the path, so it isn't a new pageview. Use a scroll event (below) if you want to know who reached a section.

How to track custom events and goals in Framer

Automatic events need no setup: outbound link clicks feed the Outbound tab, and mailto:/tel: clicks, file downloads and form submits are recorded as events. If your form redirects to a thank-you page on success, create a page goal for that path in VisitTrack's Settings → Goals — the simplest conversion you can track on Framer.

For a specific button, add a code override (Assets → Code → New file → Override) and apply it to the button in the right panel. It calls window.visitrack() on click and keeps the button's own behavior.

import type { ComponentType } from "react";

declare global {
  interface Window { visitrack?: (name: string, props?: Record<string, unknown>) => void }
}

export function withSignupTracking(Component): ComponentType {
  return (props) => (
    <Component
      {...props}
      onClick={(e) => {
        window.visitrack?.("signup_click", { location: "hero" });
        props.onClick?.(e);
      }}
    />
  );
}

Wherever you can paste HTML (an Embed component), data-vt-goal="name" on an element and data-vt-scroll="name" on a section work without any code.

Script options you might need on Framer

All optional — add them to the same tag. Full reference: script configuration.

Framer troubleshooting

Not on Framer? See all 29 integration guides.