TestaDocs
Docs/Integration/Pixel

Integration

Testa runs on a single script in your site's <head>. Once it's in place you can run experiments and track conversions across your whole site. This guide covers where to find your script, how to install it, and how to configure and hook into its tracking events.

1. Get your script

Your tracking script lives in the dashboard. Log in, open your site's project under Projects (create one first if you haven't yet), then click the Code icon to reveal the snippet and copy the whole thing. Your project's script filename is already filled in — wherever you see {YOUR_PROJECT_SCRIPT} below, that's the part unique to your project.

2. 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.

Once the snippet is live, your site is connected: Testa can run experiments and record conversions. Everything below is configuration and tracking on top of that.

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>

3. 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)
};

4. 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;
}, []);

5. 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.

6. 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.

7. 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