Installation

SPA, React and Next.js setup

Understand SDK behavior and experiment evaluation in modern route-changing apps.

Last updated: May 22, 20268-14 minBeginner to intermediate
Start free See pricingMethodology

What does this do?

SPA, React and Next.js setup helps make the installation workflow decision-ready in Testvoy. The goal is not only finding a setting, but understanding why it exists, how to read the outcome and where to debug first.

Know when to use it

Learn which UI fields matter

Know what success looks like

SPA, React and Next.js setup screen flow
SetupQAReport
This placeholder can be replaced with a real product screenshot later.

When should you use it?

Use this guide during first setup, experiment creation, report interpretation or before sharing with a client or team. Testvoy keeps the workflow approachable for non-technical users while still exposing SDK, event and security context for developers.

  1. 01

    Choose the relevant workspace and project

  2. 02

    Follow the checklist on this page

  3. 03

    Verify with preview or verifier

  4. 04

    Share the setting or report with the team

How to do it

Most Testvoy workflows follow the same pattern: choose context, define the rule or change, then verify through QA and reporting. This keeps the product focused on decision quality, not only running tests.

  • Is the workspace correct?
  • Is the project key or domain correct?
  • Does the goal/event match?
  • Were mobile and desktop checked?
  • Any bot/SRM or dropped event warning?
Custom JS
const button = document.querySelector('[data-testvoy="hero-primary-cta"]');

if (button) {
  button.textContent = "14 gün ücretsiz dene";
}

Implementation example: SPA/Next.js route change check

In SPA frameworks such as React and Next.js, route changes may not reload the page. If the experiment target depends on URL, verify in preview and verifier that the SDK evaluates again after route changes.

  1. 01

    Open preview mode

  2. 02

    Visit /pricing

  3. 03

    Navigate inside the app to /signup or another target route

  4. 04

    Check whether the variant is applied again on the new route

  5. 05

    Confirm a pageview or route signal appears in recent events

Example if manual re-evaluation is needed
// Route change sonrasında sadece SDK dokümanında bu API destekleniyorsa kullan.
window.testvoy?.refresh?.();

Practical scenario

A growth team changes CTA copy on the pricing page, connects signup_started and signup_completed goals, then reads Google Ads and returning visitor segments separately. If the result is promising, they share a report link with the client or leadership.

Common mistakes

Most mistakes come from wrong project keys, overly broad selectors, missing goals, staging/prod mixups, early decisions on small samples or skipping mobile QA.

Naming an experiment 'test'

Launching without a goal

Deciding on total CVR only

Sending screenshots instead of shareable reports

Related pages

Visual editorPreview and QA

Validate desktop, mobile, routes, selectors and goals before launch.

TroubleshootingSPA route issues

Experiment re-evaluation and selector timing on React/Next.js route changes.

SDK and APIBrowser SDK

Install, init, track, identify, queue/retry, sendBeacon, cookie behavior and opt-out.

Frequently asked questions

Who is SPA, React and Next.js setup for?

Marketing, growth, product and developer teams can use the same guide at different depths.

Do I need a developer?

Not for basic visual changes and report reading; SDK, custom events, custom JS or enterprise security benefit from technical support.

How do I know it worked?

Verifier, recent events, preview, QA checklist and report warnings show setup and experiment health.

What is the common mistake?

Wrong project keys, missing goals, fragile selectors, early decisions on small samples and skipped mobile QA are common.

Docs

Try this guide in the app

Finish setup, create your first experiment and read the report with cleaner data in Testvoy.

Start free Docs