Cast Your First Test on This Shop

Let's run a real test. The target: the hero CTA on the home page, marked with data-test="hero-cta". The hypothesis: because visitors land cold, we believe that changing 'Enter the shop' to 'Cast your first spell' will cause a lift in CTA click-through, measured by clicks on [data-test=hero-cta] divided by hero impressions.

Step one: find the hook. document.querySelector('[data-test="hero-cta"]') returns the element. Good — it's stable and present on initial render, so no observer needed.

Step two: write the variant. textContent swap, plus a class to allow CSS overrides if needed. Do not introduce a layout shift.

Step three: QA the variant in mobile and desktop, with a slow network. Confirm no flicker, no CLS, no console errors.

Step four: ship to 50% of traffic and wait for the planned sample size before reading the result. Do not peek.

const cta = document.querySelector('[data-test="hero-cta"]');
if (cta) {
  cta.textContent = 'Cast your first spell';
  cta.classList.add('variant-v1');
}