[{"key":"dsp-032-sitewide-laptop-helper-poc","changeId":"b683a3cfa4bcdc29c9db07fb512d7ebc0443172c1488c977bbb71e82e56ffde3","status":"running","variations":[{"css":"","js":"","domMutations":[]},{"css":"","js":"/**\n * GrowthBook Experiment: Guided Laptop Widget\n * Description: Injects a multi-step guided help widget below the breadcrumbs.\n * The widget expands as an overlay (dropdown) to avoid pushing page content down.\n * Uses localStorage to remember the user's current step across page loads.\n */\n\n(function () {\n 'use strict';\n\n const CONFIG = {\n id: 'gb-guided-laptop-widget',\n experimentId: 'gb-guided-laptop-widget', // Matches item_group in tracking\n storageKey: 'gb_guided_laptop_step', // Key to remember user's state\n selectors: {\n // Target the breadcrumb section directly based on the site's HTML\n target: '[data-testid=\"breadcrumb\"]',\n // Fallback in case data-testid is removed\n fallback: 'header[class*=\"Breadcrumb_breadcrumb__\"]'\n },\n copy: {\n expert: {\n name: 'Oliver Trebilcock',\n title: 'Which? laptop expert',\n quote: '\"From helping you understand the difference between a Macbook and a Chromebook to picking the best models from hundreds of tests, I’ve done the research so you can be confident in your choice\"'\n }\n },\n // High-quality UI placeholder for the expert\n expertImg: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&q=80&w=120&h=120'\n };\n\n // Event Tracking Helper (GA4 / GTM Standardized)\n const trackEvent = (itemText = undefined, parentText = undefined) => {\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n 'event': 'notification_ab_test',\n 'item_text': itemText,\n 'item_parent_text': parentText,\n 'item_group': CONFIG.experimentId\n });\n };\n\n // SPA Guard\n if (window[`__run_${CONFIG.id}`]) return;\n window[`__run_${CONFIG.id}`] = true;\n\n const injectStyles = () => {\n if (document.getElementById(`${CONFIG.id}-styles`)) return;\n const style = document.createElement('style');\n style.id = `${CONFIG.id}-styles`;\n style.textContent = `\n /* Container & Layout */\n .gb-widget-root {\n font-family: inherit;\n background-color: #FFF9C4;\n width: 100%;\n box-sizing: border-box;\n border-bottom: 1px solid #e0e0e0;\n position: relative;\n display: block;\n z-index: 100; /* High z-index to overlay content below */\n }\n\n .gb-widget-root *, \n .gb-widget-root *::before, \n .gb-widget-root *::after {\n box-sizing: inherit;\n }\n\n /* Step 0: Initial Bar */\n .gb-step-bar {\n display: flex;\n align-items: center;\n padding: 14px 16px;\n cursor: pointer;\n justify-content: space-between;\n border: none;\n background: transparent;\n width: 100%;\n text-align: left;\n }\n .gb-bar-content {\n display: flex;\n align-items: center;\n gap: 12px;\n font-weight: 700;\n font-size: 16px;\n color: #000;\n }\n .gb-icon-bulb { width: 28px; height: 28px; flex-shrink: 0; }\n .gb-chevron {\n transition: transform 0.3s;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n }\n .gb-open .gb-chevron { transform: rotate(180deg); }\n\n /* Panel Wrapper - Acts as an absolute overlay */\n .gb-panel-wrapper {\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n background-color: #FFF9C4;\n z-index: 101;\n box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);\n border-bottom: 2px solid #e0e0e0;\n display: none; /* Hidden by default */\n }\n .gb-widget-root.gb-open .gb-panel-wrapper {\n display: block; /* Show when widget is open */\n }\n\n /* Panel Common */\n .gb-panel {\n padding: 0 16px 24px 16px;\n display: none;\n animation: gbFadeIn 0.2s ease-out;\n }\n .gb-panel.active { display: block; }\n \n @keyframes gbFadeIn {\n from { opacity: 0; transform: translateY(-5px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \n .gb-back-btn {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n background: none;\n border: none;\n color: #0050B3;\n font-weight: 700;\n cursor: pointer;\n margin-bottom: 16px;\n padding: 0;\n font-family: inherit;\n font-size: 14px;\n }\n\n .gb-title {\n font-size: 1.25rem;\n font-weight: 800;\n margin: 0 0 16px 0;\n line-height: 1.2;\n color: #000;\n }\n\n /* Buttons/Cards */\n .gb-btn-group {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-bottom: 20px;\n }\n @media (min-width: 768px) {\n .gb-btn-group-row { flex-direction: row; flex-wrap: wrap; }\n }\n\n .gb-card-btn {\n background: #fff;\n border: 1px solid #000;\n padding: 12px 16px;\n border-radius: 4px;\n text-align: left;\n font-weight: 700;\n cursor: pointer;\n font-size: 15px;\n transition: background 0.2s;\n font-family: inherit;\n color: #000;\n }\n .gb-card-btn:hover { background: #f9f9f9; }\n\n /* Expert Box */\n .gb-expert-box {\n background-color: #CCEEFF;\n padding: 20px;\n border: 1px solid #000;\n text-align: center;\n margin-top: 10px;\n border-radius: 4px;\n }\n .gb-expert-img {\n width: 70px;\n height: 70px;\n border-radius: 50%;\n background: #fff;\n margin: 0 auto 12px;\n border: 2px solid #000;\n overflow: hidden;\n }\n .gb-expert-img img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n .gb-expert-quote {\n font-style: italic;\n font-size: 14px;\n margin-bottom: 12px;\n line-height: 1.5;\n color: #333;\n }\n .gb-expert-name { font-weight: 800; margin-bottom: 2px; }\n .gb-expert-title { font-size: 13px; color: #444; }\n\n /* Result Box */\n .gb-result-box {\n background: #fff;\n border: 1px solid #ccc;\n padding: 16px;\n border-radius: 4px;\n margin-bottom: 12px;\n }\n .gb-result-title { \n font-weight: 800; \n margin-bottom: 4px; \n display: block; \n color: #0050B3;\n text-decoration: underline;\n }\n .gb-result-desc { font-size: 14px; color: #333; line-height: 1.4; }\n `;\n document.head.appendChild(style);\n };\n\n const createWidget = () => {\n const root = document.createElement('div');\n root.className = 'gb-widget-root';\n root.id = CONFIG.id;\n\n root.innerHTML = `\n \n \n\n \n

\n \n

Would you like us to help you find your perfect laptop?

\n \n \n

\n $\"${CONFIG.copy.expert.name}\"$ \n

${CONFIG.copy.expert.quote}

${CONFIG.copy.expert.name}

${CONFIG.copy.expert.title}

\n\n \n

\n \n

Which stage are you at?

\n \n \n \n

\n\n \n

\n \n

Learn about laptops & clarify your needs

\n Laptops 101\n

Understand the basics of laptops, including what CPUs and GPUs are

\n How to choose a laptop\n

Considerations to be aware of when deciding what you need

\n\n \n

\n \n

How would you prefer to choose?

\n \n \n

\n\n \n

\n \n

Find out about a particular product

\n Search or Filter\n

Use our search bar or brand filters to find the exact model you're interested in.

\n Compare against our top picks\n

Visit our Best Laptops 2026 article and use \"Add to compare\" to see them side-by-side.

\n `;\n\n // Interaction Logic\n const toggle = root.querySelector('#gb-toggle');\n const panels = root.querySelectorAll('.gb-panel');\n const closeBtn = root.querySelector('#gb-close');\n\n const showPanel = (id) => {\n panels.forEach(p => p.classList.remove('active'));\n if (id) {\n const target = root.querySelector(`#gb-panel-${id}`);\n if (target) {\n target.classList.add('active');\n root.classList.add('gb-open');\n toggle.setAttribute('aria-expanded', 'true');\n // Save state securely\n try { localStorage.setItem(CONFIG.storageKey, id); } catch(e) {}\n \n trackEvent('Panel Rendered', `Step ${id}`);\n }\n } else {\n root.classList.remove('gb-open');\n toggle.setAttribute('aria-expanded', 'false');\n }\n };\n\n toggle.addEventListener('click', () => {\n if (root.classList.contains('gb-open')) {\n trackEvent('Collapse Header', 'Global Widget Toggle');\n showPanel(null);\n } else {\n // Open to the last saved step or default to 1\n let stepToOpen = '1';\n try {\n const savedState = localStorage.getItem(CONFIG.storageKey);\n // Prevent bugs from previous versions that saved 'closed' or invalid states\n if (savedState && savedState !== 'closed' && root.querySelector(`#gb-panel-${savedState}`)) {\n stepToOpen = savedState;\n }\n } catch(e) {}\n \n trackEvent('Expand Header', 'Global Widget Toggle');\n showPanel(stepToOpen);\n }\n });\n\n root.addEventListener('click', (e) => {\n const next = e.target.closest('[data-next]');\n const back = e.target.closest('[data-back]');\n const hrefBtn = e.target.closest('[data-href]');\n const link = e.target.closest('a');\n \n // Determine current step for context in tracking\n const currentStep = Array.from(panels).find(p => p.classList.contains('active'))?.id.replace('gb-panel-', '') || 'unknown';\n \n if (next) {\n trackEvent(next.innerText.trim(), `Step ${currentStep}`);\n showPanel(next.dataset.next);\n }\n if (back) {\n trackEvent('Back Button', `Step ${currentStep}`);\n showPanel(back.dataset.back);\n }\n if (hrefBtn) {\n trackEvent(hrefBtn.innerText.trim(), `Step ${currentStep}`);\n window.location.href = hrefBtn.dataset.href;\n }\n if (link) {\n trackEvent(link.innerText.trim() || link.href, `Step ${currentStep}`);\n }\n });\n\n closeBtn.addEventListener('click', (e) => {\n e.stopPropagation();\n trackEvent('No thanks button', 'Step 1');\n showPanel(null);\n });\n\n return root;\n };\n\n const apply = () => {\n // Find the breadcrumb wrapper using data-testid first, then fallback to class\n const target = document.querySelector(CONFIG.selectors.target) || document.querySelector(CONFIG.selectors.fallback);\n const existing = document.getElementById(CONFIG.id);\n\n if (!target || existing) return false;\n\n injectStyles();\n const widget = createWidget();\n \n // Insert directly after the breadcrumb section\n target.insertAdjacentElement('afterend', widget);\n\n return true;\n };\n\n // Initialize with Observer for SPA/Dynamic loading\n const observer = new MutationObserver(() => {\n apply();\n });\n\n observer.observe(document.body, { childList: true, subtree: true });\n \n // Initial run\n apply();\n\n})();","domMutations":[]}],"hashVersion":2,"hashAttribute":"id","fallbackAttribute":"","disableStickyBucketing":false,"bucketVersion":1,"minBucketVersion":0,"urlPatterns":[{"include":true,"type":"regex","pattern":"^https://www\\.which\\.co\\.uk/reviews/laptops/.*"}],"weights":[0,1],"meta":[{"key":"0","name":"Control"},{"key":"1","name":"Variation 1"}],"filters":[],"seed":"ad6c53f5-cd64-4d7a-8c7e-95150d3aa754","name":"DSP 032 [Sitewide] Laptop Helper POC","phase":"0","condition":{"id":{"$regex":"2aee58cc-137b-41b2-a5a9-a0275045a949|65243d99-ea13-4785-9c43-a2e409646b44"}},"coverage":1}]

Outdoor accessories advice guides

Best backpacks

Best umbrellas