' bHtml += '' bHtml += '' bHtml += '

' bar.innerHTML = bHtml document.documentElement.appendChild(bar) document.getElementById('__lab_dbg_btn').addEventListener('click', function (e) { e.stopPropagation() togglePanel() }) document.getElementById('__lab_close_btn').addEventListener('click', function () { panel.remove() bar.remove() }) } // ── Panel ───────────────────────────────────────────────────────────────── function openPanel() { var p = document.getElementById('__lab_panel') if (p && p.style.display === 'none') togglePanel() else renderPanel() } function togglePanel() { var p = document.getElementById('__lab_panel') var btn = document.getElementById('__lab_dbg_btn') if (!p) return var opening = p.style.display === 'none' p.style.display = opening ? 'block' : 'none' if (btn) btn.innerHTML = opening ? '▼ Debug' : '▲ Debug' if (opening) renderPanel() } function row(label, value) { return '

' + '' + label + '' + '' + value + '' + '

' } function badge(text, color) { color = color || '#334155' return '' + esc(text) + '' } function renderPanel() { var p = document.getElementById('__lab_panel') if (!p) return if (!assignment) { p.innerHTML = '

● Waiting for loader response...

' return } var a = assignment var statusColor = a._statusColor || '#475569' var statusText = a._statusText || '● loading' var html = '' // ── Header ────────────────────────────────────────────────────────────── html += '

' html += '

' html += '' + esc(a.experimentName) + '' html += '' + esc(a.experimentKey) + '' html += badge(a.variantName + ' (' + a.variantKey + ')', '#166534') html += '' + statusText + '' html += '

' html += '

' // ── Checks section ─────────────────────────────────────────────────────── // What a visitor of this page would need to see the variant. var checks = (a.checks || []).concat(a._audience || []) if (checks.length > 0) { html += '

' html += '

Would a visitor of this page see it?

' checks.forEach(function (c) { var mark = c.passed ? '✓ ' + esc(c.check) + '' : '✗ ' + esc(c.check) + '' html += row(mark, esc(c.detail)) }) html += '

' } // ── Config section ─────────────────────────────────────────────────────── html += '

' html += '

Experiment config

' // Targeting rules var rules = a.targetingRules || [] var rulesText = rules.length === 0 ? 'All pages' : rules.map(function (r) { if (r.type === 'all_pages') return 'All pages' return r.type.replace(/_/g, ' ') + ': ' + (r.value || '') }).join(' OR ') html += row('Page targeting', esc(rulesText)) // Traffic html += row('Traffic allocation', esc(String(a.trafficAllocation)) + '%') // Audience conditions var conds = a.audienceConditions || [] var condsText = conds.length === 0 ? 'All visitors' : conds.map(describeCondition).join(' AND ') html += row('Audience', esc(condsText)) // Trigger var triggerText = a.triggerType if (a.triggerConfig) triggerText += ' ' + JSON.stringify(a.triggerConfig) html += row('Trigger', esc(triggerText)) html += '

' // ── Script section ─────────────────────────────────────────────────────── html += '

' html += '

Variant script

' if (a.script) { html += '

' + esc(a.script) + '

' html += '

' html += '' if (a._error) { html += '⚠ ' + esc(a._error) + '' } html += '

' } else { html += 'No script — feature flag or control variant' } html += '

' p.innerHTML = html if (a.script) { var rerunBtn = document.getElementById('__lab_rerun') if (rerunBtn) { rerunBtn.addEventListener('click', function () { try { execScript(a.script, a.triggerType, a.triggerConfig) a._error = null renderPanel() } catch (e) { a._error = String(e) renderPanel() } }) } } } function setStatus(icon, text, color) { var el = document.getElementById('__lab_status') if (el) el.innerHTML = '' + icon + ' ' + esc(text) + '' if (assignment) { assignment._statusText = icon + ' ' + esc(text) assignment._statusColor = color var p = document.getElementById('__lab_panel') if (p && p.style.display !== 'none') renderPanel() } } // ── Audience conditions evaluation (client-side, AND logic) ─────────────── function describeCondition(c) { if (c.type === 'device') return 'Device ' + (c.operator || 'is') + ' ' + (c.value || '') if (c.type === 'cookie') return 'Cookie ' + (c.name || '') + ' ' + (c.operator || '') + ' ' + (c.value || '') if (c.type === 'query_param') return 'Param ' + (c.name || '') + ' ' + (c.operator || '') + ' ' + (c.value || '') if (c.type === 'visitor_type') return 'Visitor is ' + (c.value || '') if (c.type === 'custom_js') return 'Custom JS' return c.type } function matchesCondition(cond) { try { if (cond.type === 'device') { var ua = navigator.userAgent var isTablet = /iPad|Tablet|Android(?!.*Mobile)/i.test(ua) var isMobile = !isTablet && /Mobi|Android/i.test(ua) var device = isTablet ? 'tablet' : (isMobile ? 'mobile' : 'desktop') return cond.operator === 'is_not' ? device !== cond.value : device === cond.value } if (cond.type === 'cookie') { var cv = getCookie(cond.name) if (cond.operator === 'exists') return cv !== null if (cond.operator === 'equals') return cv === cond.value if (cond.operator === 'contains') return cv !== null && cv.indexOf(cond.value) !== -1 return false } if (cond.type === 'query_param') { var qp = new URLSearchParams(window.location.search) if (cond.operator === 'exists') return qp.has(cond.name) if (cond.operator === 'equals') return qp.get(cond.name) === cond.value return false } if (cond.type === 'visitor_type') { return cond.value === 'new' ? isNewVisitor : !isNewVisitor } if (cond.type === 'custom_js') { return !!(0, eval)('(function(){' + cond.code + '})()') } return true } catch (e) { console.warn('[Lab] audience condition error', e) return false } } /** Each condition with whether this visitor meets it; all of them must. */ function audienceChecks(conditions) { return (conditions || []).map(function (cond) { return { check: 'audience', passed: matchesCondition(cond), detail: describeCondition(cond) } }) } // ── Script execution ─────────────────────────────────────────────────────── // Triggers still waiting (scroll, element visible) belong to the page that // set them; a client-side navigation cancels them so they never fire on // the next page. var pendingTriggers = [] function cancelPendingTriggers() { pendingTriggers.forEach(function (cancel) { cancel() }) pendingTriggers = [] } /** * Runs the script when an element matching the selector comes into view: * the first time, or, with repeat, every time one does. Elements that * appear later (a modal, a step of a form, a section React renders) are * watched as they arrive. */ function watchElement(selector, repeat, run) { var watched = new WeakSet() var done = false var view = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { if (done || !entry.isIntersecting) return if (!repeat) stop() run() }) }) function look() { if (done) return var found try { found = document.querySelectorAll(selector) } catch (e) { console.warn('[Lab] element trigger: not a valid selector', selector) stop() return } for (var i = 0; i < found.length; i++) { if (watched.has(found[i])) continue watched.add(found[i]) view.observe(found[i]) } } function stop() { if (done) return done = true view.disconnect() unwatchPage(look) } look() if (!done) watchPage(look) pendingTriggers.push(stop) } // Every element trigger of the page shares one observer of its changes. A // change only asks for a look; the looks run on the next frame, and at most // once every LOOK_GAP_MS, so a page that never stops changing (a carousel, // an animation toggling classes) costs a few scans a second, not one a frame. var LOOK_GAP_MS = 100 var pageLooks = [] var pageChanges = null var lookQueued = false var lastLook = 0 function lookAgain() { lookQueued = false lastLook = Date.now() pageLooks.slice().forEach(function (look) { look() }) } function askForLook(records) { if (lookQueued) return // Only a new node, or a class or id that changed, can make an element match. var relevant = records.some(function (r) { return r.type === 'attributes' || r.addedNodes.length > 0 }) if (!relevant) return lookQueued = true var wait = Math.max(0, lastLook + LOOK_GAP_MS - Date.now()) setTimeout(function () { requestAnimationFrame(lookAgain) }, wait) } function watchPage(look) { pageLooks.push(look) if (pageChanges) return pageChanges = new MutationObserver(askForLook) // A class or id put on an element already there can make it match too, // like a modal shown by adding its class. pageChanges.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['class', 'id'] }) } function unwatchPage(look) { var i = pageLooks.indexOf(look) if (i !== -1) pageLooks.splice(i, 1) if (pageLooks.length === 0 && pageChanges) { pageChanges.disconnect() pageChanges = null } } function runScript(script) { try { (0, eval)(script) } catch (e) { console.warn('[Lab]', e) } } function execScript(script, triggerType, triggerConfig) { if (!script) return function run() { runScript(script) } if (triggerType === 'scroll' && triggerConfig && triggerConfig.scrollPct) { var pct = triggerConfig.scrollPct / 100 var fired = false function onScroll() { if (fired) return var ratio = (window.scrollY + window.innerHeight) / document.documentElement.scrollHeight if (ratio >= pct) { fired = true; window.removeEventListener('scroll', onScroll); run() } } window.addEventListener('scroll', onScroll, { passive: true }) pendingTriggers.push(function () { window.removeEventListener('scroll', onScroll) }) } else if (triggerType === 'element_visible' && triggerConfig && triggerConfig.selector) { watchElement(triggerConfig.selector, triggerConfig.repeat === true, run) } else if (triggerType === 'custom' && triggerConfig && triggerConfig.code) { try { var matches = (0, eval)('(function(){' + triggerConfig.code + '})()') if (matches) run() } catch (e) { console.warn('[Lab] custom trigger', e) } } else { run() } } // ── Loader call ──────────────────────────────────────────────────────────── // MAX_EXPOSURES in backend/experiments/lab.routes.ts var MAX_EXPOSURES = 20 // Runs on the first page and again on each client-side navigation // (LabNavigation), since Next keeps the layout, and this script, mounted. // Only the latest load may act: a slower answer for a page the visitor has // already left must not run its scripts or record its exposures here. var currentLoad = 0 var inFlight = null function load() { if (!isPreviewMode && !hasConsent()) return var userId = isPreviewMode ? 'preview' : visitorId() // A client-side navigation ends the previous page. flushPage() startPage() var thisPage = page cancelPendingTriggers() var thisLoad = ++currentLoad if (inFlight) inFlight.abort() inFlight = typeof AbortController === 'function' ? new AbortController() : null var pathname = window.location.pathname fetch('/api/lab/loader', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ userId: userId, url: pathname, host: window.location.host, previews: previews || {} }), signal: inFlight ? inFlight.signal : undefined }) .then(function (r) { if (!r.ok) throw new Error('loader answered ' + r.status) return r.json() }) .then(function (res) { if (thisLoad !== currentLoad) return if (!isPreviewMode && !hasConsent()) return var assignments = (res && res.data) ? res.data : [] var exposures = [] var running = [] if (!isPreviewMode) { // Only a real answer may forget experiments the visitor saw. if (res && Array.isArray(res.goals)) { runningGoals = res.goals pruneExposed() } // The proxy exposed split URL visitors before the page loaded: this // page is where they landed when it's one of the test's pages. var exposed = exposedIds() runningGoals.forEach(function (exp) { ;(exp.pages || []).forEach(function (p) { if (p.path !== pathname && p.path + '/' !== pathname) return // Only visitors the proxy split: those it exposed, or the team's, // which it splits but never marks as exposed. var entered = exposed.indexOf(exp.experimentId) !== -1 if (!entered && !isInternal()) return running.push({ experimentId: exp.experimentId, experimentKey: exp.experimentKey, variantKey: p.variantKey, kind: 'split' }) if (!entered) return thisPage.landing.push(exp.experimentId) tagExposure(exp.experimentKey, p.variantKey) }) }) } if (capturing) { // Whatever its trigger or audience: the capture needs the change now. var forced = assignments[0] if (!forced) { captureApplied({ ok: false, error: 'The variant is not on this page' }) return } var changes = watchChanges() try { if (forced.script) (0, eval)(forced.script) } catch (e) { changes() captureApplied({ ok: false, error: "The variant's script failed: " + String(e) }) return } // A script may wait for its element or animate in: give it a moment // before reading where the page changed. setTimeout(function () { captureApplied({ ok: true, y: changes() }) }, CHANGE_SETTLE_MS) return } /** The exposure of an experiment that waited for its element, once it's seen. */ function exposeOnSight(a) { if (exposed.indexOf(a.experimentId) === -1) thisPage.landing.push(a.experimentId) tagExposure(a.experimentKey, a.variantKey) if (isInternal()) return rememberExposed([a.experimentId]) fetch('/api/lab/exposures', { method: 'POST', headers: { 'Content-Type': 'application/json' }, keepalive: true, body: JSON.stringify({ userId: userId, exposures: [{ experimentId: a.experimentId, variantId: a.variantId }], host: window.location.host, url: pathname, isNew: isNewVisitor }) }).then(checkPageVisitGoals, function () {}) } assignments.forEach(function (a) { var audience = audienceChecks(a.audienceConditions) var audiencePassed = audience.every(function (c) { return c.passed }) if (isPreviewMode) { // Store the full assignment so the debug panel can render it assignment = a assignment._audience = audience assignment._statusText = '● loading' assignment._statusColor = '#475569' // A visitor of this page wouldn't get it, so neither does the // preview: the panel says which check failed. var failed = (a.checks || []).concat(audience).filter(function (c) { return !c.passed }) if (failed.length > 0) { var reasons = failed.map(function (c) { return c.check }).join(', ') console.info('[Lab] preview not shown here:', failed) setStatus('⊖', 'not shown on this page (' + reasons + ')', '#f87171') openPanel() return } } if (!audiencePassed) return running.push({ experimentId: a.experimentId, experimentKey: a.experimentKey, experimentName: a.experimentName, variantKey: a.variantKey, variantName: a.variantName, kind: isPreviewMode ? 'preview' : 'script' }) // Only who saw the element is in the experiment, the control's // visitors too: counting everyone on the page would bury the // difference among visitors who never got there. if (a.triggerType === 'element_visible') { var selector = a.triggerConfig && typeof a.triggerConfig.selector === 'string' ? a.triggerConfig.selector.trim() : '' // Never on load instead: that would count everyone on the page. if (!selector) { console.warn('[Lab] element trigger without a selector', a.experimentKey) setStatus('△', 'element trigger without a selector', '#f87171') return } } if (a.triggerType === 'element_visible' && !isPreviewMode) { var counted = false watchElement(selector, a.triggerConfig.repeat === true, function () { if (!counted) { counted = true; exposeOnSight(a) } if (a.script) runScript(a.script) }) setStatus('◯', 'waiting for ' + selector, '#fbbf24') return } if (a.script) { var isDeferred = a.triggerType === 'scroll' || a.triggerType === 'element_visible' execScript(a.script, a.triggerType, a.triggerConfig) if (isDeferred) { setStatus('◯', 'script scheduled (' + a.triggerType + ')', '#fbbf24') } else { setStatus('✓', 'script executed', '#4ade80') } } else { setStatus('✓', 'active (no script)', '#94a3b8') } exposures.push({ experimentId: a.experimentId, variantId: a.variantId }) if (!isPreviewMode) { // Where they entered: a later page of the same test isn't a landing. if (exposed.indexOf(a.experimentId) === -1) thisPage.landing.push(a.experimentId) tagExposure(a.experimentKey, a.variantKey) } }) // One call for the whole page. Previews are the team checking a // variant, not visitors, so they stay out of the results. // A page visit goal may sit on this very page: it waits for the // exposures, since a conversion only counts after one. if (exposures.length > 0 && !isPreviewMode && !isInternal()) { rememberExposed(exposures.map(function (e) { return e.experimentId })) fetch('/api/lab/exposures', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ userId: userId, exposures: exposures.slice(0, MAX_EXPOSURES), host: window.location.host, url: pathname, isNew: isNewVisitor }) }).then(checkPageVisitGoals, function () {}) } else if (!isPreviewMode) { checkPageVisitGoals() } if (isPreviewMode && assignments.length === 0) { setStatus('△', 'experiment not found or not matching this page', '#f87171') } publish(running) }) .catch(function (e) { if (thisLoad !== currentLoad) return console.warn('[Lab] loader error', e) if (capturing) captureApplied({ ok: false, error: 'The variant could not be loaded' }) if (isPreviewMode) setStatus('△', 'loader error', '#f87171') }) } // The banner can change its answer on any page, and only polling sees it // (its listener has a single slot). A grant enters the visitor right away; // a refusal or a withdrawal forgets them. var CONSENT_POLL_MS = 1000 var consented = hasConsent() function watchConsent() { setInterval(function () { var now = hasConsent() if (now === consented) return consented = now if (now) load() else withdraw() }, CONSENT_POLL_MS) } /** A refusal stops what's still on its way: a pending load, a waiting trigger. */ function withdraw() { currentLoad++ if (inFlight) inFlight.abort() cancelPendingTriggers() forgetVisitor() } // What this page runs, for the team's tools (the Growth Tools extension): // which experiments and variants, and whether this browser is counted. function publish(running) { lab.assignments = running lab.internal = isInternal() window.dispatchEvent(new CustomEvent('factorial-lab:assignments', { detail: running })) } var lab = { load: load, track: track, formEvent: formEvent, assignments: [], internal: isInternal() } window.__factorialLab = lab if (!isPreviewMode) { if (!consented) forgetVisitor() watchConsent() } load() })()

Thank you for registering for the event