Analyze and Optimize

This content was generated with the assistance of AI and should be verified against the official Webflow documentation before being relied on in production.

This sub-section’s Webflow bibliography lists the reference material consulted while preparing these pages.

This page describes Webflow Analyze and Webflow Optimize as they were on 2026-10-28, the date on which their facts were checked against the official documentation. Both are features of the Webflow platform, which has no version numbers, so everything below is dated; the Product Changes and Deprecations page and the Webflow updates feed track later changes. Analyze and Optimize are sold as add-ons to a Webflow site and are not part of a Site plan by default; the Help Center articles on each feature, and the pricing page, list the tiers and limits that apply, and this page never quotes prices. The Browser API methods that Optimize and the consent controls use are part of the developer documentation, which is versioned separately from the product.

The running example is Fernbrook Gardens, the fictitious botanical garden of this sub-section. Its site is published in English, with Spanish (/es) and German (/de) locales (see Localization). The marketing team wants to know which pages visitors actually read, whether the "Plan your visit" button on the Home page is seen, which of three headlines sells more annual memberships, and whether visitors from Hamburg who arrive on the German pages should see a different call to action than visitors who arrive on the English pages.

Analyze and Optimize in one picture

Analyze answers the question "what are visitors doing?" and Optimize answers "what should different visitors see?". They share a measurement layer: both depend on the site’s tracking being enabled, both use the same notion of a goal, and both are governed by the same consent controls. A change made with Optimize is judged with the goals that Analyze reports.

Analyze Optimize

Question

What do visitors do on this site?

Which version of a page works best, and for whom?

Main objects

Metrics, clickmaps, scrollmaps, goals

Optimizations that contain variations; tests and personalizations

Where you work

The Insights panel and Analyze mode in the Designer

The Optimize area of the Designer and the visual page editor

Output

Reports and overlays on the real page

A winning or best-performing variation, or a personalized experience

Developer surface

Consent controls on the wf object

wf.onVariationRecorded(), wf.setAttributes() and the consent controls

Source: Webflow Analyze feature page, Intro to Webflow Optimize.

Who uses them

Different people use these features differently.

Person What they do

Site owner

Decides whether the add-ons are worth buying, chooses the tracking default for visitors and is accountable for the privacy policy

Marketer

Reads site-wide and page-level metrics, sets goals, designs tests and personalizations and decides when a result is trustworthy

Designer

Builds the variations on the canvas, keeps them accessible and checks them at every breakpoint

Content editor

Edits copy for a variation and reviews the result of a test of headlines

Developer

Sends variation data to other analytics tools, sets custom attributes and wires the site to a consent platform

Designer-level permissions or higher are needed to create goals, and only Workspace admins can purchase the add-ons; the roles themselves are described in Plans, Workspaces, Seats and Roles.

Plan and add-on requirements

Both features need the following before they produce data.

  • A site on a paid Site plan that can be published to a custom domain. A staging webflow.io site can be measured, but the default reports show only production-domain data and staging data is optional.

  • The Analyze add-on, for Analyze; the Optimize add-on, for Optimize. Add-ons are bought by a Workspace admin, and tiers are named in the Help Center and on the pricing page. Enterprise sites receive additional Optimize capabilities, for example the ability to create custom attributes.

  • Site tracking switched on in the site’s Insights settings. Tracking has to be on for the consent controls described in Privacy and consent to take effect.

  • Optimize does not consume Webflow AI credits; the credits described in AI Features and Credits apply to the AI assistants and builders only.

A team should compare the add-on tier with expected traffic before buying. Statistical tests need enough visits per variation to reach a result, so a site with a few hundred monthly visitors, such as a small garden, may learn more from Analyze and a single well-chosen test than from several simultaneous tests.

Source: Intro to Webflow Analyze, Intro to Webflow Optimize, Webflow pricing.

Analyze

Turning tracking on and choosing the data

Analyze records first-party visitor interactions on pages that load the Webflow site script. After the add-on is purchased, tracking is enabled in the Insights tab’s settings and the site is published; data begins to accumulate from the next page view. There is no code to paste and nothing to install in the page head. Reports separate production-domain data from staging data.

Analyze does not record sessions as video. Webflow Analyze offers no session replay; behaviour is shown through aggregated metrics and through the click and scroll overlays described below. A team that needs recordings of individual visits has to use another tool, loaded through custom code (see Custom Code in the Head, Footer and Embeds) and covered by the same consent policy.

Metrics

The Insights panel reports site-wide and page-level metrics. The foundational ones are the volume of visitors and page views, how visitors reached the site, which pages they entered and left on, which devices and locations they came from, and how many completed a goal. Metrics can be filtered by date range, by page and by locale, which matters for Fernbrook: the Spanish and German locales have their own page paths, so a marketer compares /es/visita and /de/besuch with the English Visit page directly.

Metric group Typical use at Fernbrook Gardens

Visitors and page views

Trend after the spring event is announced

Sources and referrers

Whether the partner garden in Hamburg sends visitors to the German pages

Entry and exit pages

Which page loses visitors before the ticket link

Devices and locations

Whether the mobile breakpoints deserve more design time

Goal completions

How many visits end in a ticket click or a newsletter sign-up

Clickmaps

A clickmap overlays the real page with how many times each clickable element was clicked. It is shown in Analyze mode, an on-canvas view opened from the Pages panel and the top bar of the Designer. Because the overlay sits on the actual elements, the counts follow the Designer’s structure: a card that is one link shows one number, while a card with three separate links shows three.

For Fernbrook the Home page clickmap shows that the "Plan your visit" button gets a fraction of the clicks of the decorative hero image, which visitors evidently mistake for a link. The fix is a design one: make the image a link to the Visit page, or remove the affordance.

Scrollmaps

Scrollmaps were added on 2025-07-02 and are included for every site that has Analyze enabled. They show an average fold line, a heat-style gradient and a scroll ruler that indicates what share of visitors reached each part of the page. A scrollmap is the quickest way to see whether the Events section at the bottom of the Home page is ever reached, and where to move content that matters.

Clickmaps and scrollmaps are views of the production page. A responsive design has different layouts at each breakpoint, so the marketer checks the overlays on the device sizes that carry most traffic rather than only on desktop.

Goals

A goal is an action that counts as a success: clicking a button, submitting a form, reaching a page. Goals are what turn raw clicks into conversions, and Optimize uses them to judge a test.

  • Create goals in the Designer with Designer-level permission or higher.

  • Prefer a goal that describes a business outcome, such as "Clicked buy tickets" or "Submitted newsletter form", over a goal that simply counts every click.

  • Keep goal names stable. A report that spans months is only meaningful if the same goal definition applies throughout.

Forms are described in Forms; a form submission is one of the most reliable goals because it reflects a completed action.

Reading Insights responsibly

Aggregated numbers describe behaviour but not intent. A few rules keep a small site honest.

  • Compare like with like: the same weeks of the year, the same locale, the same device group.

  • Do not draw conclusions from a handful of visits; a scrollmap with two hundred visits is a hint, not a result.

  • Check events and campaigns. A burst of visits after a newsletter says more about the newsletter than about the page.

Source: Intro to Webflow Analyze, Get page-level insights with Analyze mode, Webflow updates: Scrollmaps, Webflow blog: Visual analytics.

Optimize

Optimizations and variations

An optimization is a container for one or more variations. If the garden wants to test three headlines on the Home page, it creates one optimization on the Home page with three variations, one per headline. Variations are edited on the real page, so a variation can change text, images, styles or visibility of elements without a separate page.

Two types of optimization exist, and each of them can use AI to choose the winner.

Type What it does

Test

Shows variations to visitors at random in set proportions and reports which variation does best against a goal

Personalization

Shows a variation to visitors who match audience conditions, such as a locale, device or campaign

A/B/n tests

A traditional A/B/n test splits traffic between a control and one or more variations, then reports a result once it is statistically significant. The practical rules are the usual ones for experiments.

  1. Choose one clear goal before starting; a test that is judged by several goals tends to find a winner by chance.

  2. Change one idea per test. Three headlines are a valid test; a headline, an image and a button label together are not.

  3. Run until the platform reports a result rather than stopping at the first lead.

  4. Never run two tests that change the same element on the same page at once.

Personalization

A personalization shows a different variation to a defined audience. The conditions available include where the visitor is, which device is used, how they arrived and attributes that the site supplies. At Fernbrook the English Home page shows an English call to action, and a visitor who arrives from the Hamburg partner garden gets a variation that mentions the exchange programme. Custom attributes, described below, let the site pass its own information, for example a membership status, to Optimize; creating attributes in Optimize is available on Enterprise sites.

AI-optimized delivery

An AI-optimized optimization does not wait for a fixed experiment to end. It learns which variation performs best for the goal and gradually sends more traffic to it. For a test this replaces the fixed split; for a personalization it learns which variation suits each audience. It suits sites with enough traffic to learn from, and a team that prefers a clear before-and-after decision should keep the classic test. As noted above, Optimize does not draw on Webflow AI credits.

Non-Webflow sites

Optimize can also be used on a site that is not built or hosted on Webflow, such as the garden’s separate ticketing site. The site loads a JavaScript snippet that Optimize provides for the account, and variations are then applied in the visitor’s browser. The snippet contains the account ID; the exact text is generated in the Optimize settings and must be copied from there, so the example below shows its shape with a placeholder instead of a real snippet.

<!-- Place in the <head> of every page of the non-Webflow site.
     Paste the snippet that Optimize generates for your account. It
     contains your Optimize account ID in place of 123456789. -->
<script>
  /* Optimize snippet for account 123456789 goes here */
</script>

Source: Optimize for non-Webflow sites.

Two points apply to every non-Webflow installation.

  • The snippet has to be on every page that is part of a test. A test on a checkout page that loads the snippet only on the landing page measures nothing.

  • The consent integration is the site’s own work. The Help Center has separate articles for connecting Optimize to the OneTrust and TrustArc consent platforms, in an opt-in version that loads the snippet only after the visitor accepts functional cookies and an opt-out version that loads it and stops it if the visitor declines.

Site goals and the link back to Analyze

Goals are defined once per site and are reused by tests, personalizations and the Analyze reports. A change that raises a goal in Optimize should be visible as a change in the same goal in Analyze a few weeks later; if only one of them moves, suspect the sample size or the audience.

Source: Intro to Webflow Optimize.

Developer controls

Sending the applied variation to another tool

Optimize adds JavaScript functions to the global wf object; they are available automatically on a site that has Optimize enabled and need no installation. wf.onVariationRecorded() registers a callback that receives the variation each time one is recorded, and the callback fires on each recording rather than once per page. A team that keeps its own analytics, for example a data warehouse, uses it to label every event with the variation the visitor saw.

// Site settings, custom code in the footer. Placeholder analytics object.
wf.ready(function () {
  wf.onVariationRecorded(function (variation) {
    window.fernbrookAnalytics.track("optimize_variation", variation);
  });
});

Source: Browser API: Track variations.

Custom attributes

wf.setAttributes() supplies attributes that personalizations can use. The scope is either "pageview", available for the duration of a pageview, or "user", available for the duration of a user’s session; a session ends after 30 minutes of sustained inactivity.

wf.ready(function () {
  wf.setAttributes("user", {
    customerSegment: "member",
    preferredLanguage: "de"
  });
});

Source: Browser API: Personalize experiences with custom attributes.

Attributes are visitor information. Pass only what the privacy policy covers, and not before the visitor has consented where consent is required.

Privacy and consent

Analyze and Optimize process information about visitors, so privacy law applies to them like to any analytics tool. Webflow’s documentation states that the site owner is responsible for deciding which requirements, for example the GDPR or the CCPA, apply to the site. The platform provides controls; it does not make the site compliant on its own.

Tracking defaults

The site’s tracking settings offer three ways to start, which differ in when tracking begins.

Default Behaviour

Track by default

Tracking runs from the first page view; a consent tool may let a visitor opt out. Tracking before consent can be a compliance problem for visitors in regions that require opt-in.

Let visitors opt out

Tracking runs unless the visitor declines through a consent tool.

Do not track by default

Nothing is tracked until the visitor opts in, so a consent banner must call the allow function.

For Fernbrook, whose visitors include residents of Germany, the safe choice is not to track by default and to enable tracking only after a visitor accepts the banner. German-language visitors are the group most likely to expect an opt-in. Analyze and Optimize do not use cookies to apply variations, and third-party sources describe Analyze as using local storage; the privacy policy should still describe local storage and similar technologies, since privacy rules cover them too.

The consent controls

Three functions on the wf object read and set the visitor’s choice. They apply only to Analyze and Optimize, site tracking must be enabled for them to work, and the consent script goes in the site’s head custom code. Always call them inside wf.ready(), which waits for the Browser API to load.

Function Purpose

wf.getUserTrackingChoice()

Returns the visitor’s current choice; examples compare it with "allow" and "deny"

wf.allowUserTracking()

Opts the visitor into tracking; an optional options object such as { activate: true } may be passed

wf.denyUserTracking()

Opts the visitor out of tracking

A minimal consent banner for the garden, with plain buttons wired to those functions, looks like this.

<div id="consent-banner" hidden>
  <p>Fernbrook Gardens measures visits to improve this site.</p>
  <button id="consent-accept" type="button">Accept</button>
  <button id="consent-decline" type="button">Decline</button>
  <a href="/privacy-policy">Learn more</a>
</div>
<script>
  wf.ready(function () {
    var banner = document.getElementById("consent-banner");
    if (!wf.getUserTrackingChoice()) {
      banner.hidden = false;
    }
    document.getElementById("consent-accept").addEventListener("click", function () {
      wf.allowUserTracking({ activate: true });
      banner.hidden = true;
    });
    document.getElementById("consent-decline").addEventListener("click", function () {
      wf.denyUserTracking();
      banner.hidden = true;
    });
  });
</script>

Source: Browser API: Site tracking and consent management.

The banner text must exist in each locale, and German and Spanish visitors must see it in their language; see Localization. Whether getUserTrackingChoice() is empty before a choice has been made is how the example above decides to show the banner, so test it in a private browser window on the staging site.

Connecting a consent platform

If the site already uses a consent management platform, the platform’s callback calls the same functions. The developer documentation provides samples for OneTrust and for TrustArc; they are provided as they are, are not supported by Webflow and need adaptation. The general pattern is to read the platform’s category for functional or analytics cookies and to map it to allow or deny.

// Placeholder consent platform: replace "cmp" with your platform's API.
function syncTracking(consent) {
  wf.ready(function () {
    if (consent.analytics === true) {
      wf.allowUserTracking();
    } else {
      wf.denyUserTracking();
    }
  });
}
cmp.onConsentChanged(syncTracking);
syncTracking(cmp.getConsent());

Source: Browser API: Site tracking and consent management.

Webflow has no consent banner of its own, so a custom banner or a third-party platform is always needed. Marketplace and integration options are discussed on Integrations and Marketplace Apps.

Source: Analyze and Optimize compliance with privacy laws.

Pitfalls

  • Tracking switched on but not published. The setting takes effect only after the site is published. Data does not appear for the period before.

  • Staging mistaken for production. Reports default to production-domain data, so a team that tests only on the staging domain sees an empty report.

  • Consent code placed in the footer. The banner script belongs in the head custom code so that tracking is not started before the choice is read.

  • Consent banner not localized. A banner that appears only in English on /de fails its purpose.

  • Too many simultaneous tests. Overlapping tests on the same element contaminate each other.

  • Stopping a test early. A lead after a day is usually noise.

  • Variations that harm accessibility. A variation with lower contrast or a missing label is still published to real visitors; see Accessibility.

  • Heavy snippets. Extra scripts affect loading; see Performance Optimization.

  • Expecting recordings. Analyze has no session replay.

  • Personal data in attributes. Pass segments, never names or email addresses.

History and where older material is wrong

Analyze and Optimize have gained visual tools since their introduction: clickmaps and the Analyze mode, then scrollmaps on 2025-07-02, plus AI-optimized delivery and the Browser API methods for Optimize. The details of each change are tracked on Product Changes and Deprecations.

The requester-provided book, Webflow by Example, predates both features. It treats analytics as an external concern, connecting Google Analytics through custom code, and has no testing or personalization. That approach still works and is described on Third-Party Libraries and Scripts, but it is no longer the only choice, and it does not cover the consent rules above. Where the book and the official documentation differ, this sub-section follows the official documentation; see Where Older Books and Tutorials Are Outdated.

A rollout checklist for Fernbrook Gardens

  1. Decide the questions: which pages are read, whether the ticket button is seen, which headline sells more memberships.

  2. Buy the Analyze add-on first; add Optimize only when Analyze shows a page worth testing.

  3. Choose the tracking default: do not track until the visitor opts in.

  4. Build the localized consent banner and publish it from the head custom code.

  5. Create goals: ticket link clicked, newsletter form submitted, membership page reached.

  6. Publish and let Analyze collect a few weeks of data before changing anything.

  7. Read clickmaps and scrollmaps on the Home and Visit pages at desktop and mobile sizes.

  8. Create one test of three Home page headlines against the membership goal; check variations for contrast and labels.

  9. Add a personalization for visitors who arrive from the partner garden.

  10. Review the privacy policy so that it names the tools and the purposes.

Where to go next

References