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
- Create an experiment and add a treatment variation.
- Open the variation's code editor. To work from your terminal or an AI client instead, use the CLI experiment filesystem or MCP tools.
- Paste the test JavaScript into
src/index.jsand the styles intosrc/index.scss. - Build the variation. Fix every build or artifact safety error before continuing.
- Open the preview link. Apex preview sessions work for 1 to 168 hours and do not require the Apex SDK on the previewed site.
- Set the experiment's audience and targeting and goals.
- 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 capability | Apex surface | Guide |
|---|---|---|
| Experiments | Experiments and variation builder | Variation builder |
| Personalizations | Personalization experiments | Personalization |
| Goals | Experiment metrics and goals | Metrics and goals |
| Audiences and targeting | Experiment targeting | Targeting and audiences |
| QA previews | QA workspace and preview links | QA and previews |
| Guardrails | Auto-pause guardrails | Guardrails and auto-pause |
| Backlog ideas | Ideas and backlog | Ideas and backlog |
| Heatmaps | Behavior tab | Experiment results |
| Clarity session tagging | Settings, Integrations | No guide yet |
| Surveys | On the roadmap | Not available yet |
A prompt for your AI assistant
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.