Integration

Add the Testa script to your website once, and you can run experiments and track conversions across your site. This guide covers installing the script, configuring it, and hooking into its tracking events.

Before you start

You need a project and its script filename, which you get from the dashboard — see Onboarding. Wherever you see {YOUR_PROJECT_SCRIPT} below, replace it with that filename.

1. Add the script

Paste this snippet into the <head> of every page on your site, as early as possible (before any other script). It hides the page until variations are applied, which prevents the original content from flashing ("anti-flicker"):

html

<script>
  window.Analytica = window.Analytica || {};
  window.Analytica.spa = 1; // 1 for single-page apps, 0 for regular sites

  window._testa = window._testa || (function () {
    let loaded = false;
    let css = 'body {opacity:0 !important;background:none !important;}';
    let overlayId = '_testa_overlay';
    let head = document.getElementsByTagName('head')[0];

    var loader = {
      loaded: function () {
        if (!loaded) {
          loaded = true;
          let overlay = document.getElementById(overlayId);
          if (overlay) overlay.parentNode.removeChild(overlay);
        }
      },
      load: function (src) {
        setTimeout(function () { window._testa.loaded(); }, 3000); // safety reveal

        let overlay = document.createElement('style');
        overlay.setAttribute('id', overlayId);
        overlay.appendChild(document.createTextNode(css));
        head.appendChild(overlay);

        let t = document.createElement('script');
        t.fetchPriority = 'high';
        t.src = src;
        t.type = 'text/javascript';
        t.onerror = function () { window._testa.loaded(); };
        head.appendChild(t);
      }
    };
    const r = Math.random().toString(36).substring(2, 15);
    loader.load('https://cdn.testa-soft.tech/projects/{YOUR_PROJECT_SCRIPT}.js?r=' + r);
    return loader;
  })();
</script>

Why the <head>, first? Variations apply before the page renders (no flicker), the browser loads the script with high priority, and Split URL redirects happen before any content shows. The ?r= is cache-busting, so experiment changes take effect immediately.

Basic version (for testing)

If you don't need anti-flicker, this shorter version just loads the script:

html

<script>
  window.Analytica = { spa: 1 };
  window._testa = (function () {
    var loader = {
      load: function (src) {
        var t = document.createElement('script');
        t.fetchPriority = 'high';
        t.src = src;
        t.type = 'text/javascript';
        document.getElementsByTagName('head')[0].appendChild(t);
      }
    };
    loader.load('https://cdn.testa-soft.tech/projects/{YOUR_PROJECT_SCRIPT}.js');
  })();
</script>

2. Configuration

Set options on window.Analytica before the script loads:

javascript

window.Analytica = {
  spa: 1,                       // 1 for single-page apps (React, Vue, etc.)
  lsEnabled: 1,                 // use localStorage as a cookie fallback (default 1)
  SESSION_LENGTH: 60 * 60 * 1000, // how long a visitor stays on a variation (default 1h)
  logging: 0,                   // 1 to print [Testa] diagnostics to the console (QA only)
  listeners: []                 // event listeners (see First-party tracking below)
};

3. Single-page apps (SPA)

For React, Vue, Angular and similar apps, enable SPA mode so experiments re-evaluate on every client-side route change:

javascript

window.Analytica = { spa: 1 };

With SPA mode on, the script watches the History API (pushState, replaceState, popstate), re-checks URL targeting on each route change, and keeps experiment assignments across navigation.

Next.js: also signal when your content has hydrated, so changes apply at the right time:

javascript

window.Analytica = { spa: 1, nextContentLoaded: false };

// in _app.js / root layout
useEffect(() => {
  window.Analytica.nextContentLoaded = true;
}, []);

4. First-party tracking (events)

The script fires events you can subscribe to — for example to forward experiment data to your own analytics. Add listeners to the listeners array before the script loads:

variation_applied — a variation's changes have been applied to the page.
variation_assigned — a visitor has been assigned to a variation.

javascript

window.Analytica.listeners = [];

window.Analytica.listeners.push(['variation_applied', function (data) {
  console.log('Variation applied:', data);
  // data = { project_id, experiment, variation, uuid, title, url }
}]);

The data object:

project_id — your project ID
experiment — experiment ID
variation — variation ID (0 = control)
uuid — the visitor's unique ID
title — experiment name
url — current page URL

Sending events to your analytics

javascript

// Google Analytics 4
window.Analytica.listeners.push(['variation_applied', function (data) {
  gtag('event', 'experiment_impression', {
    experiment_id: data.experiment,
    variation_id: data.variation
  });
}]);

// Segment
window.Analytica.listeners.push(['variation_applied', function (data) {
  analytics.track('Experiment Viewed', {
    experiment_id: data.experiment,
    experiment_name: data.title,
    variation_id: data.variation
  });
}]);

Google Tag Manager also receives an Analytica event on dataLayer automatically, which you can use as a trigger.

5. Custom events (custom goals)

To track a conversion that isn't a page view or click, fire a custom event and create a matching Custom Event goal in the dashboard:

javascript

window.Analytica.pushEvent('purchase_completed', {
  order_id: 'ORDER-123',
  total: 99.99,
  currency: 'USD'
});

The event name must match the goal's action configured in the dashboard.

6. Logging & debugging

Turn on diagnostics while you set things up — this prints [Testa] messages to the browser console (use it for QA, leave it off in production):

javascript

window.Analytica.logging = 1;

Quick checks in the console:

javascript

window.Analytica.cookies; // { experimentId: variationId } assignments
window.Analytica.uuid;    // the visitor's unique ID

Troubleshooting

Script not loading — check the script URL is correct and not blocked by an ad blocker; look for errors in the console.
Variations not applying — usually URL targeting, an exclusion rule, or bot detection. Turn on logging and check window.Analytica.cookies.
Flicker — make sure the anti-flicker snippet is the first script in the <head>.

Next steps

Targeting — choose who sees an experiment
URL matching — choose which pages a test runs on