---
title: "How to add Web Experiment to a Webflow site"
description: "Add Web Experiment to Webflow. Preview a CTA copy test, configure consent, and verify impressions and confirmed form conversions."
canonical: "https://amplitude.com/en-us/build/webflow-web-experiment"
---

# How to add Web Experiment to a Webflow site

Add Web Experiment to Webflow. Preview a CTA copy test, configure consent, and verify impressions and confirmed form conversions.

Source: https://amplitude.com/en-us/build/webflow-web-experiment

---

# How to add Web Experiment to a Webflow site

Test a Webflow CTA in Amplitude Web Experiment and verify impressions against confirmed form conversions. Allow about 25 minutes for setup and preview.

- Webflow
- Custom code
- Browser SDK 2
- CDN
- 25 min

Chris Tam · Last updated 19 October 2026

Webflow controls the published design of your site. [Web Experiment](https://amplitude.com/web-experimentation) 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

A Web Experiment with control and treatment CTA copy, targeting the published Pricing page and measuring `Demo Request Confirmed`.

## 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](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags).
- 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](https://app.amplitude.com/signup) 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](https://amplitude.com/docs/sdks/analytics/browser/browser-unified-sdk#unified-script-cdn) 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.

```html
<!-- 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

```javascript
// 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.

```html
<!-- 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:

```css
/* 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

```javascript
// 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.

**MCP.** Ask your coding agent to inspect existing event names with the [Amplitude MCP server](https://amplitude.com/docs/amplitude-ai/amplitude-mcp) before adding tracking. Reuse the project's taxonomy when this tutorial's example names already have equivalents.

## 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.

Full code reference

```html
<!-- 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.

Using Cursor or Claude Code? Paste this prompt

```text
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](https://amplitude.com/amplitude-analytics) supplies `Demo Request Confirmed` as the conversion metric.

[Session replay](https://amplitude.com/session-replay) shows the interaction around a test visitor's form submission.

[Heatmaps](https://amplitude.com/heatmaps) helps you inspect engagement on the pricing page when enough replay data exists.

[Guides and surveys](https://amplitude.com/guides-and-surveys) gathers feedback that can inform the next copy test.

## Next steps

[WebflowHow to add web analytics to a Webflow siteA published Webflow site with automatic page views and sessions, plus a test visit attributed to \`utm\_campaign=webflow-build-qa\`.](https://amplitude.com/build/webflow-web-analytics)[WebflowHow to add product analytics to a Webflow siteA \`Pricing CTA Clicked\` event and a \`Demo Request Confirmed\` event, with fixed properties and no form field values in your custom events.](https://amplitude.com/build/webflow-product-analytics)[WebflowHow to add session replay to a Webflow siteA replay of a Home-to-Pricing visit with synthetic form input masked, a private text region masked, and an excluded region blocked.](https://amplitude.com/build/webflow-session-replay)

Reference docs

[Browser unified sdk →](https://amplitude.com/docs/sdks/analytics/browser/browser-unified-sdk)[Define goals →](https://amplitude.com/docs/feature-experiment/workflow/define-goals)[Cookies and consent management →](https://amplitude.com/docs/web-experiment/cookies-and-consent-management)[Set up a web experiment →](https://amplitude.com/docs/web-experiment/set-up-a-web-experiment)[Tracking →](https://amplitude.com/docs/web-experiment/tracking)[Amplitude MCP server →](https://amplitude.com/docs/amplitude-ai/amplitude-mcp)

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

For agents

[View raw .md](/build/webflow-web-experiment.md)[llms.txt](/llms.txt)

## Ship the instrumentation, then read the data

Use the verification steps above to check the events and product behavior you enabled.

[Create a free account](https://app.amplitude.com/signup)[Browse all Build tutorials](https://amplitude.com/build)