How to add Web Experiment to a Webflow site

Webflow controls the published design of your site. Web Experiment lets you test a change to that design and measure whether visitors take the action you care about.

In this tutorial, I'll target the Pricing page, give its CTA a stable selector, and preview a copy change. You'll use the confirmed native-form event as the conversion and check impressions before launching a test.

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.
• The shared CDN head snippet and Pricing page. This path uses the Unified Script, which already includes Web Experiment.
• The product analytics footer, native inline-success demo form, and Demo Request Confirmed event from the product analytics tutorial.
• Access to create a Web Experiment in the same Amplitude test project.

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. Check the existing script and consent setup

The Unified Script reference says the project-specific .js loader includes Web Experiment. Keep that existing loader. Don't append a second .experiment.js tag to this integration.

If Web Experiment needs consent gating, place this configuration above the existing loader in Head code. Merge into an existing experimentConfig if one is present.

<!-- Webflow Site settings > Custom code > Head code, ABOVE the existing Amplitude loader -->
<script>
  window.experimentConfig = {
    ...window.experimentConfig,
    consentOptions: {
      consentRequired: true,
      consentStatus: "pending"
    }
  };
</script>

Wire the consent platform's decision callback to the documented runtime API:

// Your consent platform callback, after the Web Experiment script has loaded
window.webExperiment?.setConsentStatus("granted"); // Use "denied" for a denial.

For a decision already available before the loader runs, set consentStatus in the config to that decision. If your callback can run before the script loads, retain the decision in your consent platform and apply it after load; an optional-chained call made too early has no effect.

Web Experiment's gate controls its own storage and impressions. It does not gate analytics or replay. If your site needs no collection or storage before consent, defer loading the entire shared Amplitude snippet until consent and test that behavior separately. Later loading changes when variants can apply.

2. Add a stable selector to the CTA

In the Designer, select the Pricing CTA. Add data-experiment="pricing-cta" in Element settings > Custom attributes, preserving the product analytics attribute and any guide attribute. Publish.

<!-- Pricing CTA: preserve your existing link destination and classes -->
<a href="#demo" data-analytics="pricing-cta" data-experiment="pricing-cta">
  Request a demo
</a>

Use [data-experiment="pricing-cta"] in the Visual Editor. It keeps targeting tied to the attribute when you change Webflow's style classes.

3. Create the experiment and its goal

In Amplitude Experiment, go to Experiments > Create Experiment > Web Experiment. Name it Webflow pricing CTA QA, enter the published Pricing URL, and choose the same test project. Select Element Changes and edit the CTA text for the treatment to See the product with an expert. Keep the control unchanged.

Confirm the selected element uses this selector:

/* Amplitude Visual Editor: selector */
[data-experiment="pricing-cta"]

Scope page targeting to the test Pricing URL. In Metrics, choose Create a custom metric if the project has no saved metric for this outcome. Name it Webflow demo request conversion, count unique users who perform Demo Request Confirmed, and select that event with Add Event. Save the metric, attach it as the primary metric, and save the experiment configuration. Use a metric based on Pricing CTA Clicked as a secondary action if useful. A click and a confirmed submission answer different questions, so keep their event names distinct.

4. Preview both variants and inspect impressions

Choose Test & Preview. Open each variant's preview URL and verify the CTA text, link destination, and native form success. Test & Preview doesn't start the experiment for ordinary visitors. Allow up to 60 seconds for preview caches to refresh when changes are delayed.

// Browser Console after one synthetic confirmed submission
window.amplitude.flush();
window.amplitude.getDeviceId();

In browser-side inspection, impressions can appear as $impression. After ingestion, Amplitude transforms them to [Experiment] Impression, with experiment flag and variant properties. Check the actual impression events and Demo Request Confirmed on each intended test visitor. Preview rendering alone doesn't prove that both variants produce impressions. In particular, an unchanged control has no element-change action; the tracking reference ties impressions to applying a variant action and does not settle this control case. If control produces no impression, keep analysis unverified and resolve the expected tracking behavior before launching. Don't add a fabricated impression to make the check pass. Preview doesn't establish a winning result. Review targeting and goals before choosing to launch.

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.

Verify both preview variants and confirmed conversions, then separately confirm the required ingested [Experiment] Impression events. A rendered control without a verified impression is an unresolved analysis prerequisite. Leave the test unlaunched until targeting and goals have been reviewed.

Troubleshooting

The Visual Editor can't open the page

Use the published URL and confirm the project key. Check blockers and Console errors, including CSP and cross-window restrictions. Follow the implementation docs rather than weakening security headers without review.

The treatment looks correct but conversions are absent

Confirm the native form reaches Success and that the footer sends Demo Request Confirmed. Check ingested impressions and the experiment's selected project and metric.

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 to add the standalone experiment script as well?

This tutorial uses the Unified Script, which includes Web Experiment. Keep one installation path.

Why does the event name differ between the browser and Amplitude?

Web Experiment sends $impression; ingestion transforms it to [Experiment] Impression and standardizes its properties.

Full code reference

Only the consent configuration is added to Head code here. Keep it above your existing loader. Unchanged from earlier pages; keep your versions: loader, analytics initialization, replay privacy settings, engagement registration, and Footer code.

<!-- Webflow Site settings > Custom code > Head code, ABOVE the existing Amplitude loader -->
<script>
  window.experimentConfig = {
    ...window.experimentConfig,
    consentOptions: {
      consentRequired: true,
      consentStatus: "pending"
    }
  };
</script>

Hand it to your agent

Use this prompt with the tutorial content attached.

Agent task: Webflow Web Experiment.
Use the existing Unified Script loader, which includes Web Experiment. Do not install another loader. Preserve analytics init, replay privacyConfig, the engagement plugin, and Footer code. Add the stable data-experiment selector alongside existing attributes. Configure a test experiment for the staging Pricing URL, use Demo Request Confirmed as the primary metric, and preview both variants without launching to ordinary visitors. Verify transformed impressions in Amplitude. Keep analytics and Web Experiment consent separate.

What this unlocks

Product analytics supplies Demo Request Confirmed as the conversion metric.

Session replay shows the interaction around a test visitor's form submission.

Heatmaps helps you inspect engagement on the pricing page when enough replay data exists.

Guides and surveys gathers feedback that can inform the next copy test.

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.