Optimizely implementation atlas

One lab. Every experimentation path.

Compare browser, server, mobile, edge, and direct-API implementations. Make decisions, fire conversions, inspect payloads, and validate the complete path from visitor to results.

24implementation pages

9runnable web surfaces

12official SDK quickstarts

1shared visitor journey

Interactive feature experiment

Configure it. See it change. Track it.

One complete workflow with the implementation code and debugging evidence beside it.

Simulation modeNo account required

1
ConfigureFlag and visitor
2
ApplySee the change
3
InspectCode and decision
4
TrackVerify the event

Experiment setupChanging a field resets the decision

Experiment

Visitor ID

Plan attribute

Treatment rollout50%

Treatment headline

Button color

Flag key: checkout_experience

What do these controls mean?

Visitor ID: Keeps one person in a stable variation.
Attribute: Describes who is eligible for an audience.
Rollout: The percentage of visitors eligible for treatment.

Live page previewWaiting for a decision

NorthstarNew Bags TravelBag · 1

€129 · Free delivery

Weekend carryall

A carryall made for everywhere.

Control page · experiment not applied

No change yet.Run the decision to bucket this visitor and apply the result.

Feature Experimentation codeThis is the implementation behind the preview.

SDK

const user = client.createUserContext('debug-visitor', { plan: 'pro' })
const decision = user.decide('checkout_experience')

if (decision.enabled) applyTreatment(decision.variables)
user.trackEvent('demo_purchase', { value: 99, currency: 'EUR' })

Open the full SDK lab ↗

Decision debuggerUse this evidence to reproduce a visitor result.

Waiting for a decisionThe complete payload and reason will appear here.

TrackingSend and verify the conversion.

0 events

OptimizelydataLayerGA4SegmentPostHog

No events yetApply the experiment first.

Audience simulator

Test the rollout across 100 visitors.

See whether bucketing behaves the way you expect before connecting a real project.

Run the audience test to sample 100 deterministic visitor decisions.

Debug health

Know what is working.

These checks update as you move through the playground.

✓Configuration is valid

○Decision returned a variation

○Preview matches the decision

○Conversion reached dataLayer

window.__OPTIPILOT_DEBUG__Human-readable here, machine-readable in the browser.

Integration event demos

Fire an analytics event and watch the Optimizely event it becomes

Browser · Amplitude Browser SDK 2 enrichment plugin↗

Amplitude events into Optimizely Web

Fire an Amplitude event and watch the Optimizely custom event it becomes — the allowlist, the revenue conversion to integer cents, and the full push payload.

Browser · Shopify Web Pixels API custom pixel↗

Shopify events into Optimizely Web

Fire a Shopify Web Pixels API event and watch the Optimizely custom event it becomes — the allowlist, the revenue conversion to integer cents, and the full push payload.

Browser · WooCommerce and WPForms dataLayer bridge↗

WordPress dataLayer events into Optimizely Web

Fire a WooCommerce or WPForms dataLayer event and watch the Optimizely custom event it becomes — including the nested and flat shapes arriving through one map.

Browser · capture-phase submit listener on data-name↗

Webflow form submissions into Optimizely Web

Submit a Webflow form and watch the Optimizely custom event it becomes — with the allowlist keyed by the form name a designer controls.

Browser · wrapped _hsq queue↗

HubSpot behavioral events into Optimizely Web

Fire a HubSpot custom behavioral event and watch the Optimizely custom event it becomes — portal-prefixed names, revenue in integer cents, and the full push payload.

Browser · MktoForms2 onSuccess callback↗

Marketo form submissions into Optimizely Web

Submit a Marketo Engage form and watch the Optimizely custom event it becomes — with the allowlist keyed by form id, which is what a cloned form quietly changes.

Browser · wrapped _learnq queue↗

Klaviyo track events into Optimizely Web

Fire a Klaviyo onsite track event and watch the Optimizely custom event it becomes — including the highest-volume event, deliberately dropped.

Browser · Adobe Client Data Layer listener↗

Adobe Commerce events into Optimizely Web

Fire an Adobe Client Data Layer event and watch the Optimizely custom event it becomes — the allowlist, the revenue conversion to integer cents, and the full push payload.

Index↗