SPA lifecycle

​

The flow

1. Cleanup phase. For each experiment currently active whose Location no longer matches the new URL, run its onCleanup handlers (LIFO), disconnect any observers, remove <style data-abtestly-exp="..."> tags.
2. Re-evaluate targeting. For each experiment, check Location and Audience against the new URL. Mid-session bucketing runs the deterministic hash, a visitor who was in Variant B on route one is still in Variant B on route two.
3. CSS re-inject. For experiments that now apply, inject their <style> blocks.
4. Apply. Run onApply handlers with an ApplyContext parameterized with the new route.
5. Re-eval page-visit goals. A page-visit goal for /checkout fires when the visitor navigates to /checkout, whether that navigation was a full load or a client-side push.
6. Re-arm triggered activations. Click and view triggers are re-installed for eligible experiments on the new route.

​

What triggers a route change

• history.pushState, wrapped.
• history.replaceState, wrapped.
• popstate, listened to.
• hashchange, listened to.

​

The ApplyContext

abtestly.onApply(ABTESTLY_EXP_ID, (ctx) => {
  ctx.experimentId;   // UUID
  ctx.experimentKey;  // short key
  ctx.variantKey;     // 'control' | 'variant-1' | …
  ctx.routeRevision;  // monotonic counter, ticks on every real nav
  ctx.libs;           // dev library accessor — ctx.libs.get('splide')
});

​

routeRevision, detecting supersession

abtestly.onApply(ABTESTLY_EXP_ID, async (ctx) => {
  const startRev = ctx.routeRevision;
  const data = await fetch('/api/details').then(r => r.json());
  if (ctx.routeRevision !== startRev) return; // superseded, abort quietly
  render(data);
});

​

Cleanup

abtestly.onApply(ABTESTLY_EXP_ID, () => {
  const el = document.querySelector('.hero h1');
  const original = el.textContent;
  el.textContent = 'Try the new headline';

  abtestly.onCleanup(ABTESTLY_EXP_ID, () => {
    el.textContent = original;
  });
});

​

CSS is auto-torn-down

​

The route-change event

window.addEventListener('abtestly:routechange', (e) => {
  console.log(e.detail.url);
  console.log(e.detail.activeExperiments);
  console.log(e.detail.deactivatedExperiments);
});

​

Turning it on