---
title: "How to add Web Experiment to a Framer site"
description: "Install Amplitude Web Experiment on a Framer site and test a pricing CTA variant."
canonical: "https://amplitude.com/en-us/build/framer-web-experiment"
---

# How to add Web Experiment to a Framer site

Install Amplitude Web Experiment on a Framer site and test a pricing CTA variant.

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

---

# How to add Web Experiment to a Framer site

Install Amplitude Web Experiment on a Framer site and test a pricing CTA variant. Check targeting, preview, and impression events before launch.

- Framer
- Published site
- Browser SDK 2
- 30 min

Chris Tam · Last updated 19 October 2026

Suppose visitors reach your Framer pricing page but rarely click its plan button. Amplitude [Web Experiment](https://amplitude.com/web-experimentation) lets you test whether changing the button's wording affects that next step.

In this tutorial, you'll use a small product website to compare two versions of a pricing-page button. You'll install the experiment script, preview both variants, and check impressions alongside the click metric before launch.

A pricing-page experiment with an unchanged control and a treatment that changes the CTA text. You'll preview both variants and verify impressions alongside the conversion metric.

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](https://amplitude.com/docs/apis/authentication). Use the project's US data region for the code below.
- Web Experiment access in the same project. If your metric is `Pricing CTA Clicked`, install the custom listener from the Framer product analytics tutorial first.

[Sign up for free](https://app.amplitude.com/signup) to create a project. Check your project's product access and quotas before moving beyond the test.

## 1. Add the experiment loader

If your site requires consent before storing data on a visitor's device, configure [Web Experiment consent gating](https://amplitude.com/docs/web-experiment/cookies-and-consent-management) before installing this script.

Use the [Web Experiment implementation guide](https://amplitude.com/docs/web-experiment/implementation). Add the synchronous experiment tag at the start of the head, above your existing analytics snippet. Don't add `async` to this tag. Keep the analytics loader and initialization.

```html
<!-- 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). -->
<!-- EU project: use https://cdn.eu.amplitude.com/script/ instead. -->
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.experiment.js"></script>
```

For a fresh site, add the analytics snippet in step two as well. Use the same project key for both products.

## 2. Keep analytics on the page

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](https://amplitude.com/docs/get-started/amplitude-quickstart) 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.

```html
<!-- 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. To disable session replay, 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.

**Why.** Framer can navigate between pages without reloading the document. Running initialization once lets the SDK handle page views across those transitions without adding another listener on every route.

## 3. Create the control and treatment

Publish the custom code. In Amplitude, choose **Experiments > Create Experiment > Web Experiment**. Name the test, choose your test project, and enter your public `/pricing` URL. The hypothesis is that `Try the test plan` makes the next step clearer than `Start test`, leading more visitors to click. The experiment will measure that hypothesis.

Open the visual editor and explicitly select the treatment variant. Select the `Start test` CTA text and change its copy to `Try the test plan`. Keep the control unchanged. Apply the changes, exit the visual editor, and save changes on the experiment settings page.

Inspect the generated selector. Prefer a stable attribute you control, or a destination-based selector for this fixture, over a full generated Framer class name. The selector below targets the paragraph inside the pricing link; verify it matches the intended text at each breakpoint.

```css
/* Web Experiment visual editor: treatment text selector */
a[href="./thank-you"] p, a[href="/thank-you"] p
```

## 4. Define the page and conversion metric

Restrict Page Targeting to your published pricing URL. Check both the hostname and path, and test that the home and thank-you pages don't match.

Publish the CTA listener, open the pricing page, and click `Start test` once. Confirm `Pricing CTA Clicked` appears in the intended Amplitude project before selecting it in the metric builder. If it is missing, resolve ingestion before continuing.

Choose a primary metric before launch. If you followed the product analytics page, use `Pricing CTA Clicked` as a click conversion. If the project has no saved metric yet, choose **Create a custom metric**, name it `Framer pricing CTA click conversion`, choose unique conversions (shown as **Uniques** in the metric builder), and add `Pricing CTA Clicked` as the event. Save the metric, set it as the primary metric, then save the experiment settings. Otherwise define a verified event for the outcome you want to measure. Keep a click metric labeled as a click; a successful lead submission needs an event from a confirmed success point.

```text
Experiment setup
Control: Start test
Treatment: Try the test plan
Page: https://your-site.framer.app/pricing
Primary metric: Pricing CTA Clicked (click conversion)
Exposure: Amplitude Impression
```

## 5. Preview both variants before launch

Use **Test & Preview** and open each variant's preview link. This tests the variant without starting the experiment for regular visitors. Confirm the CTA text and destination, then repeat at phone width and after internal navigation.

Check the impression event in your test project. Web Experiment sends `$impression`, which Amplitude transforms into `[Experiment] Impression`. After the previews and metric are verified, choose the intended rollout and start the experiment. Evaluate outcomes after collecting enough real traffic for your analysis.

## 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. **Variants:** the control shows `Start test`, the treatment shows `Try the test plan`, and both still navigate to `/thank-you`.
5. **Targeting:** the pricing page matches. Home and thank-you do not.
6. **Impressions and conversion:** confirm `[Experiment] Impression` for the variant and your chosen conversion event. Synthetic previews validate behavior; they don't establish a winning variant.

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

### The visual editor reports that the script is missing

Verify the published URL and matching project key. Check script loading and blockers. Adding custom code to the Framer canvas preview doesn't instrument the published page.

### The treatment stops applying after publishing a redesign

Inspect its selector against the new DOM. Replace fragile generated classes with a stable selector and preview every responsive layout again.

### A preview doesn't update immediately

The setup docs allow up to 60 seconds for caches to refresh. If it still fails, inspect the page and audience targeting with the Amplitude Chrome extension.

## Full code reference

For a fresh site, the experiment tag precedes the analytics installation. For an existing site, add only the experiment tag and preserve the rest of your snippet. Keep the custom CTA listener from the product analytics page if your metric uses it.

Full code reference

```html
<!-- 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). -->
<!-- EU project: use the documented EU CDN hosts and serverZone settings. -->
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.experiment.js"></script>
<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.

Using Cursor or Claude Code? Paste this prompt

```text
Follow https://amplitude.com/build/framer-web-experiment 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.
Configure consent before adding the experiment script if required. Explicitly edit treatment, preserve control, scope to the test hostname, and verify impressions. Do not declare a winner from test traffic.
```

## What this unlocks

[Session replay](https://amplitude.com/session-replay) lets you inspect a recorded visit around `[Amplitude] Page Viewed` after replay capture is configured.

[Heatmaps](https://amplitude.com/heatmaps) show aggregate pricing-page interactions after heatmap capture and sufficient traffic are available.

[Experimentation](https://amplitude.com/amplitude-experiment) lets you compare variants using a defined conversion metric, alongside the experiment's exposure event.

[Guides and surveys](https://amplitude.com/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

[FoundationFramer product analyticsAdd a named pricing CTA event.](https://amplitude.com/build/framer-product-analytics)[BehaviorFramer session replayReview a visit while keeping form fields masked.](https://amplitude.com/build/framer-session-replay)[FeedbackFramer guides and surveysAsk a question on a specific published page.](https://amplitude.com/build/framer-guides-surveys)

Reference docs

[Implement Web Experiment →](https://amplitude.com/docs/web-experiment/implementation)[Set up a web experiment →](https://amplitude.com/docs/web-experiment/set-up-a-web-experiment)[Define experiment goals →](https://amplitude.com/docs/feature-experiment/workflow/define-goals)[Track impressions →](https://amplitude.com/docs/web-experiment/tracking)[Cookies and consent →](https://amplitude.com/docs/web-experiment/cookies-and-consent-management)[Browser SDK 2 →](https://amplitude.com/docs/sdks/analytics/browser/browser-sdk-2)

Use [Amplitude MCP](https://amplitude.com/mcp) to inspect your project's existing event taxonomy before naming custom events.

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/framer-web-experiment.md)[llms.txt](/llms.txt)

## Ship the instrumentation, then read the data

Once events are flowing, build a funnel for your pricing flow and use the checks above to verify the additional products you enable.

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