How to add web analytics to a Framer site

A visitor can arrive at your Framer site through a campaign, read about the product, and open its pricing page. Amplitude web analytics connects that journey with the campaign that brought them there.

In this tutorial, you'll use a small product website to capture campaign attribution, follow navigation to pricing, and check a native form. You'll verify form delivery separately from its interaction events.

The example site follows a visitor evaluating a product: the home page introduces it, /pricing describes one plan, and a Start test button represents the decision to try that plan. For this demo, the button opens /thank-you so you can follow the navigation without creating an account or taking a payment.

Prerequisites

• A Framer site where you can add custom code and publish changes.
• A published home page, /pricing, and /thank-you. On /pricing, add a Start test link to /thank-you.
• An Amplitude test project and its project API key from your project settings. Use the project's US data region for the code below.

Sign up for free to create a project. Check your project's product access and quotas before moving beyond the test.

1. Install Amplitude site-wide

In Framer, open Settings > Code > Add. Name the snippet Amplitude, set Placement to Start of <head>, choose All pages, and set Run to Once. Use the Amplitude Quickstart's script installation for this site without a build step.

Replace every AMPLITUDE_API_KEY with the same project API key. The key is public and has the scope needed for ingestion. Framer injects this value into the published page; keep secret and management keys out of it.

If Amplitude is already installed, merge the additions into that snippet. Keep one SDK loader and one amplitude.init() call, including lines added by other Framer tutorials. Use the browser snippet in Framer's site settings, outside an Embed component or canvas preview.

<!-- Framer Settings > Code: Start of <head>, All pages, Once -->
<!-- Keep lines other Framer pages added here: Pricing CTA Clicked listener
(/build/framer-product-analytics), attribution.trackingMethod
(/build/framer-web-analytics), sessionReplay privacyConfig
(/build/framer-session-replay), replay sampling used by heatmaps
(/build/framer-heatmaps), experiment.js (/build/framer-web-experiment),
engagement.js and engagement.plugin() (/build/framer-guides-surveys). -->
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.js"></script>
<script>
if (!window.__amplitudeFramerInitialized) {
  window.__amplitudeFramerInitialized = true;
  window.amplitude.add(window.sessionReplay.plugin({ sampleRate: 1 }));
  window.amplitude.init("AMPLITUDE_API_KEY", {
    remoteConfig: { fetchRemoteConfig: true },
    autocapture: {
      attribution: { trackingMethod: ["userProperty", "eventProperty"] },
      fileDownloads: true,
      formInteractions: true,
      pageViews: true,
      sessions: true,
      elementInteractions: true,
      networkTracking: true,
      webVitals: true,
      frustrationInteractions: true
    }
  });
}
</script>

This test configuration also starts session replay with sampleRate: 1. That requests capture of every eligible session; project settings and quotas still apply. For an analytics-only installation, remove the sessionReplay.plugin(...) registration. Before a production rollout, choose the replay sampling and privacy settings you want.

Remote autocapture settings can override individual local options. If the expected page, click, or form events are missing, check Data > Settings > Autocapture in the project.

2. Open a tagged landing URL

Publish the snippet, copy your public home URL, and append these test parameters. Use your own hostname in place of your-site.framer.app.

https://your-site.framer.app/?utm_source=build-test&utm_medium=qa&utm_campaign=framer-web-analytics

Open the link in a fresh test browser context. Check the landing [Amplitude] Page Viewed event for the three campaign values. The explicit trackingMethod configuration supports event and user attribution on Browser SDK versions that support event-property attribution, including 2.40.0 and later.

3. Check Framer navigation

Click the home CTA to /pricing, then the pricing CTA to /thank-you. Use Back, then reload. Check one page view per tested navigation.

pageViews: true enables the SDK's page-view handling, including History API changes. Avoid a second track() call for each Framer route. Check the landing event's campaign properties separately from later pages: a route's URL and campaign context can change during navigation.

Expected paths
/
/pricing
/thank-you
/pricing   (Back)
/pricing   (reload)

4. Configure and test a native form

On /pricing, add a required test input and a submit button using Framer's native Form. Set a destination you control, then set the Form inspector's Redirect to /thank-you. Publish the changes.

Submit a synthetic value, confirm the destination received it, and check the redirect. In Amplitude, inspect [Amplitude] Form Started and [Amplitude] Form Submitted. Use destination confirmation to validate delivery; use the events to analyze interaction with the form.

Framer Form inspector
Destination: a test email, webhook, or Google Sheet you control
Redirect: /thank-you
Test input: synthetic-test

Verify it worked

1. Published site: use the public Framer URL. Open developer tools and confirm the Amplitude scripts load. Canvas preview isn't the published installation.
2. Network: confirm an event ingestion POST succeeds with HTTP 200. For the US endpoint, filter on api2.amplitude.com. Requests can be compressed, so use Instrumentation Explorer for event contents.
3. Instrumentation Explorer: inspect the event names, properties, and device ID. In Amplitude, find that device in User Profiles and check its activity. Use your test project, not another project in the organization.
4. Attribution: the tagged landing event contains utm_source: "build-test", utm_medium: "qa", and utm_campaign: "framer-web-analytics".
5. Navigation: the tested page sequence has one page view for each transition. Inspect [Amplitude] Page Path for the route and [Amplitude] Page Location for the full URL.
6. Form delivery: verify both the destination and success redirect, separately from the form interaction events.

Troubleshooting

The published page has no events

Confirm the snippet is saved, published, assigned to All pages, and uses the intended project key. Check browser console errors and whether an extension blocks the script or ingestion request.

One navigation produces two page views

Remove duplicate installations from site and page code, tag managers, and components. Keep one init call and let autocapture.pageViews track navigation. Inspect a fresh page load after publishing.

A form event arrives, but no submission arrives at its destination

Form autocapture records an interaction. Configure the native Framer form's destination and its Redirect field separately, then verify delivery at that destination. A link on the form layer doesn't configure the success redirect.

UTMs don't appear on the landing event

Check the actual published URL after navigation or redirects. Parameter names and values are case-sensitive. Reopen the tagged link in a fresh test context and inspect the first landing event.

The report groups every campaign URL separately

Choose [Amplitude] Page URL when you want the URL without query parameters. [Amplitude] Page Location includes the query string.

Full code reference

The complete fresh-install snippet is below. Keep custom event listeners and any engagement or experiment additions already installed. The form's destination and redirect are Framer settings, not extra JavaScript.

<!-- Keep lines other Framer pages added here: Pricing CTA Clicked listener
(/build/framer-product-analytics), attribution.trackingMethod
(/build/framer-web-analytics), sessionReplay privacyConfig
(/build/framer-session-replay), replay sampling used by heatmaps
(/build/framer-heatmaps), experiment.js (/build/framer-web-experiment),
engagement.js and engagement.plugin() (/build/framer-guides-surveys). -->
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.js"></script>
<script>
if (!window.__amplitudeFramerInitialized) {
  window.__amplitudeFramerInitialized = true;
  window.amplitude.add(window.sessionReplay.plugin({ sampleRate: 1 }));
  window.amplitude.init("AMPLITUDE_API_KEY", {
    remoteConfig: { fetchRemoteConfig: true },
    autocapture: {
      attribution: { trackingMethod: ["userProperty", "eventProperty"] },
      fileDownloads: true,
      formInteractions: true,
      pageViews: true,
      sessions: true,
      elementInteractions: true,
      networkTracking: true,
      webVitals: true,
      frustrationInteractions: true
    }
  });
}
</script>

Hand it to your agent

Use this prompt with an agent that can inspect your Framer settings and the published page.

Follow https://amplitude.com/build/framer-web-analytics on my Framer test site.
Merge changes into existing custom code. Preserve the additions listed in its
keep-lines comment, and never delete lines another Amplitude Build page added.
Use one analytics loader and one init call. Create /pricing and /thank-you if
missing, and add a pricing CTA pointing to /thank-you. Ask for the project API
key if it isn't available; never insert a secret or management key. Don't reset
anonymous visitors or double-track autocaptured page views. Check the published
site after saving and publishing custom code. Report events and properties you
observed, separate docs checks from runtime tests, and list unresolved checks.
Verify UTMs on the landing event. Check actual form delivery and the native Form Redirect field separately from autocaptured submit events.

What this unlocks

Session replay lets you inspect a recorded visit around [Amplitude] Page Viewed after replay capture is configured.

Heatmaps show aggregate pricing-page interactions after heatmap capture and sufficient traffic are available.

Experimentation lets you compare variants using a defined conversion metric, alongside the experiment's exposure event.

Guides and surveys let you ask a targeted question on the pricing page after you install the engagement SDK and configure the experience.

Next steps

Use Amplitude MCP to inspect your project's existing event taxonomy before naming custom events.

Amplitude is the leading all-in-one analytics platform for building better products. Product and engineering teams use Amplitude to connect product analytics and web analytics with session replay, heatmaps, experimentation, feature flags, and guides and surveys in one unified workflow, with AI agents working across all of it. Learn how Amplitude is building self-improving products with Wave, helping teams turn product data into PRs.