How to add web analytics to a Webflow site

Webflow lets you publish a site without a JavaScript build step. Web analytics connects those visits to the pages people read and the campaigns that brought them.

In this tutorial, I'll add Amplitude through Webflow's site settings, keep one page-view source, and check a test campaign on a published page. You'll use the same integration for the other Webflow tutorials.

What you'll build

Prerequisites

• A Webflow site you can publish, with a plan or Workspace that permits custom code. Webflow lists eligible plans in its custom code instructions.
• Permission to edit Site settings and publish to a Webflow staging domain. Use a test site before changing production.
• Your Amplitude project API key from Settings > Projects > your project > General > Manage next to API Key. A manager or admin can copy it. The key is public and its scope is limited to the minimum needed to ingest data. Keep secret keys out of Webflow.

A free account covers the Amplitude setup in this tutorial. Sign up for free to get your project API key. Webflow custom-code access has its own plan requirements.

1. Install Amplitude in Webflow's head

Open Site settings > Custom code. Put the SDK in Head code once for the whole site, following the Amplitude snippet Quickstart. Replace AMPLITUDE_API_KEY in both places with the same project key. Save changes, then publish to the staging domain.

Keep the external script and its configuration together, in this order. Leave async and defer off this tag so the next script can use Amplitude's queue. Keep one Amplitude integration: remove an old duplicate only after checking which features it owns, including any GTM installation.

The CDN path includes Web Experiment. The replay plugin below records all test sessions. After QA, change sampleRate to your intended production rate; 0 requests no replay capture. Check project-level replay settings too, since remote settings can override SDK configuration. Guides and surveys use a separate script.

<!-- Webflow Site settings > Custom code > Head code -->
<!-- Keep lines other Webflow pages added here: replay privacyConfig (/build/webflow-session-replay), engagement after webflowAmplitudeReady (/build/webflow-guides-surveys), experimentConfig before this loader (/build/webflow-web-experiment). -->
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.js"></script>
<script>
(() => {
  if (!window.amplitude || !window.sessionReplay) {
    console.warn("Amplitude did not load. Check the CDN request and site policy.");
    return;
  }
  window.amplitude.add(window.sessionReplay.plugin({ sampleRate: 1 }));
  window.webflowAmplitudeReady = window.amplitude.init("AMPLITUDE_API_KEY", {
    remoteConfig: { fetchRemoteConfig: true },
    autocapture: {
      attribution: true,
      pageViews: { trackHistoryChanges: "pathOnly" },
      sessions: true,
      formInteractions: true,
      fileDownloads: true,
      elementInteractions: false,
      frustrationInteractions: false,
      networkTracking: false,
      webVitals: false
    }
  }).promise;
})();
</script>

For an EU project, use https://cdn.eu.amplitude.com/script/AMPLITUDE_API_KEY.js and add serverZone: "EU" to the init options. Keep every SDK on the same project and region.

If your site waits for consent before collection or storage, configure your consent platform before enabling these scripts. The project-specific loader starts SDKs itself, so gate loading the entire Amplitude snippet on consent. Waiting to call your own init() while loading the script earlier does not provide that guarantee. Follow Browser SDK consent guidance. Use a synthetic test site for the steps below.

2. Create two pages with ordinary links

In the Designer, use Home and a page with slug pricing. Add a Link element on Home pointing to /pricing, then add a Home link on Pricing. Use Webflow's link settings for destinations. The HTML below describes the resulting links; it is also usable in a Code Embed.

<!-- Home page: Code Embed, or equivalent native Link elements -->
<nav aria-label="Test navigation">
  <a href="/">Home</a>
  <a href="/pricing">Pricing</a>
</nav>

Publish both pages. Autocapture records the initial page view after each full page load. The pathOnly setting also counts History API path changes if your site has custom navigation, without treating hash-only changes as another page.

3. Visit with a test campaign

Open the published Home URL with these query parameters. Replace the origin with your staging domain and keep the full URL through any redirect that runs before Amplitude loads.

# Browser address bar
https://YOUR-SITE.webflow.io/?utm_source=build_qa&utm_medium=test&utm_campaign=webflow-build-qa

In Instrumentation Explorer, inspect attribution user properties such as utm_source and utm_campaign. The CDN manages SDK versions, so inspect the actual event properties instead of assuming newer SDK defaults apply. Navigate to Pricing through the internal link. Leave internal links free of campaign tags so they don't create a second campaign touch.

4. Check delivery and visitor continuity

Run this in the browser Console on Home, note the returned device ID, then run it again after opening Pricing and refreshing. Check whether the same browser retains its identity on this origin.

// Browser Console on the published Webflow site
window.amplitude.getDeviceId();
window.amplitude.flush();

Use separate test visits for your staging and production origins. Don't treat those hosts as one visitor unless you have deliberately configured cross-domain identity.

Verify it worked

1. Published site: Open the staging URL directly. Check that the SDK request succeeds and the Console has no integration errors. Saved custom code reaches the live site only after publishing.
2. Network: Confirm an event POST to api2.amplitude.com returns 200 for a US project. EU ingestion uses api.eu.amplitude.com. Use Network for delivery status; large event batches can be compressed.
3. Instrumentation Explorer: Read the event names and properties in the Chrome extension. Note device_id and run the action once to check the count.
4. User profile: In Amplitude, open Users > User Profiles, search the device ID, and check the event stream. Allow ten seconds to one minute. Data > Sources > Ingestion Debugger shows request and event counts, rather than individual events.

Troubleshooting

Nothing happens after saving the code

Publish the site and open its staging URL directly. Check Site settings and Page settings for duplicate scripts. A change in the settings editor is not a deployment.

The SDK request fails or events never upload

Check the key, region, browser extensions, and Console. Follow the relevant SDK's endpoint and CSP guidance for a blocked request; keep existing security policies in place.

You see two page views for one navigation

Check for a second installation in page code, embeds, and GTM. Keep the site-wide initializer and let autocapture send page views; remove your manual page-view call.

The observed tracking differs from the snippet

Review Data > Settings > Autocapture. Remote settings take precedence over the local autocapture options when remote configuration is enabled.

FAQ

Do I need npm for Webflow analytics?

No. Add the CDN script through Site settings > Custom code and publish the site.

Should I track a page view when someone clicks a navigation link?

Let autocapture track the destination page. Use a custom click event only when the click itself is a separate action you want to measure.

Full code reference

Keep existing sibling-page additions named in the comments.

<!-- Webflow Site settings > Custom code > Head code -->
<!-- Keep lines other Webflow pages added here: replay privacyConfig (/build/webflow-session-replay), engagement after webflowAmplitudeReady (/build/webflow-guides-surveys), experimentConfig before this loader (/build/webflow-web-experiment). -->
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.js"></script>
<script>
(() => {
  if (!window.amplitude || !window.sessionReplay) {
    console.warn("Amplitude did not load. Check the CDN request and site policy.");
    return;
  }
  window.amplitude.add(window.sessionReplay.plugin({ sampleRate: 1 }));
  window.webflowAmplitudeReady = window.amplitude.init("AMPLITUDE_API_KEY", {
    remoteConfig: { fetchRemoteConfig: true },
    autocapture: {
      attribution: true,
      pageViews: { trackHistoryChanges: "pathOnly" },
      sessions: true,
      formInteractions: true,
      fileDownloads: true,
      elementInteractions: false,
      frustrationInteractions: false,
      networkTracking: false,
      webVitals: false
    }
  }).promise;
})();
</script>

Hand it to your agent

Use this prompt with the tutorial content attached.

Agent task: Webflow web analytics.
Install the documented CDN snippet once in site-wide Head code. Merge into existing code. Preserve replay privacyConfig, the engagement after webflowAmplitudeReady, experimentConfig before the loader, and the product analytics Footer code. Never delete another Webflow Build page's additions. Use ordinary / and /pricing routes, automatic page views, and a tagged test visit. Report actual SDK versions and event counts. If consent is required, gate loading the whole snippet. Test the published URL.

What this unlocks

Product analytics measures the next action after a campaign visit.

Session replay shows the visit behind a page view once replay capture is enabled and verified.

Heatmaps aggregates replay interactions when your project meets its capture requirements.

Web Experiment tests a change to the landing page using a conversion event you define.

Next steps

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.