Developer

Migrating a test from Kameleoon

Move a Kameleoon JavaScript and CSS test into Apex, preview it safely, and finish its targeting, goals, and QA.

What carries over

The JavaScript and CSS pair you use in Kameleoon carries over to an Apex variation. Apex stores the files as src/index.js and src/index.scss. You can edit them in the variation code workspace, then build the variation without rewriting the test into a different format.

Step by step

  1. Create an experiment and add a treatment variation.
  2. Open the variation's code editor. To work from your terminal or an AI client instead, use the CLI experiment filesystem or MCP tools.
  3. Paste the test JavaScript into src/index.js and the styles into src/index.scss.
  4. Build the variation. Fix every build or artifact safety error before continuing.
  5. Open the preview link. Apex preview sessions work for 1 to 168 hours and do not require the Apex SDK on the previewed site.
  6. Set the experiment's audience and targeting and goals.
  7. Complete the QA checklist. Check the intended URL, desktop and mobile layouts, interactions, goal tracking, and the control experience before starting traffic.

Differences that bite

Artifact safety. Apex rejects dynamic innerHTML = values and assignments to .src or .href. Build DOM with createElement and textContent. Clone an existing image when you need its source instead of assigning a URL.

Hydrating storefronts. For a React, Vue, Nuxt, or similar storefront, use spa.applyTiming=after_hydration with spa.domChangeTrigger=true. This avoids applying the change before the framework finishes rendering. Follow framework coexistence and SPA and router modes.

Shopify Dawn forms. Dawn can render a second, hidden add-to-cart form. Select the visible form and name the intended product form in your code instead of using the first matching form.

Baqend Speed Kit. Speed Kit can serve cached HTML that changes what an experiment sees. Follow Speed Kit's A/B testing guidance before QA and launch.

Flicker and selectors. Configure anti-flicker behavior for the page's render timing. Anchor selectors on stable attributes rather than generated classes or fragile element positions.

Parity table

Kameleoon capabilityApex surfaceGuide
ExperimentsExperiments and variation builderVariation builder
PersonalizationsPersonalization experimentsPersonalization
GoalsExperiment metrics and goalsMetrics and goals
Audiences and targetingExperiment targetingTargeting and audiences
QA previewsQA workspace and preview linksQA and previews
GuardrailsAuto-pause guardrailsGuardrails and auto-pause
Backlog ideasIdeas and backlogIdeas and backlog
HeatmapsBehavior tabExperiment results
Clarity session taggingSettings, IntegrationsNo guide yet
SurveysOn the roadmapNot available yet

A prompt for your AI assistant

text
Convert this storefront test for an Apex variation.
 
Return exactly two files: src/index.js and src/index.scss. Do not use a dynamic
value on the right side of innerHTML =. Do not assign to any element's src or
href property. Create DOM with createElement and textContent, and clone an
existing image if one is needed. Make apply idempotent so repeated calls do not
duplicate elements, handlers, or styles. Anchor selectors on stable attributes,
not generated classes or element position. Name the exact, visible add-to-cart
target the script will modify and explain how the script avoids hidden duplicate
forms. Keep all styles in src/index.scss.
 
Source test:
[paste the Kameleoon JavaScript and CSS here]

Where to get help

Start with the builder guide for workspace and build errors, then use the QA guide for preview or launch checks. If the test still fails, contact the Apex team with the experiment ID, variation ID, target URL, build error, and the shortest steps that reproduce the problem.