Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.abtestly.com/llms.txt

Use this file to discover all available pages before exploring further.

​
Installing the snippet

The ABTestly snippet is a small JavaScript file (~1.5KB inline loader + ~8KB main runtime) that runs on every page of your site. It’s responsible for:
  • Bucketing visitors into experiment variants
  • Applying variant CSS and JavaScript
  • Recording exposures back to ABTestly

​
Required: install in <head>, before other scripts

The snippet must be the first script tag in your <head>. This is non-negotiable for two reasons:
  1. Anti-flicker. The snippet briefly hides the page (opacity: 0) while it decides which variant to show. If your other scripts load first, visitors see the original page flash before the variant — known as Flash of Original Content (FOOC).
  2. Predictable execution order. Other scripts on your page may depend on variant changes (e.g., GTM tags reading custom dimensions). The snippet must run before them.
<head>
  <meta charset="UTF-8">
  <title>Your Site</title>

  <!-- ABTestly: FIRST script in head -->
  <script>!function(){/* snippet */}();</script>

  <!-- Then everything else -->
  <link rel="stylesheet" href="/styles.css">
  <script src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXX"></script>
  <script>/* other scripts */</script>
</head>

​
Don’t load via Google Tag Manager

GTM defers script execution until after DOM parsing. By the time GTM fires, the page has already rendered. Loading ABTestly via GTM causes consistent flicker (200–800ms of original content visible before variant applies). If you only have GTM access and not direct HTML access, request site-level access from your developer team. There’s no GTM workaround that doesn’t compromise performance.

​
Don’t use async or defer

<script async> and <script defer> both delay script execution. The snippet requires synchronous execution to prevent flicker. The snippet code is already optimized — it does the minimum work needed before allowing the page to render, then continues asynchronously where possible.

​
CMS-specific install guides

WordPress

Use the Insert Headers and Footers plugin (or edit your theme’s header.php). Paste the snippet into “Scripts in Header”, above any other scripts.

Shopify

Theme → Edit code → theme.liquid → find <head> → paste snippet immediately after the opening tag, before any other <script> or {{ content_for_header }} calls.

Webflow

Project Settings → Custom Code → Head Code → paste at the very top. Webflow’s editor inserts other scripts dynamically; verify load order on the published site.

Framer

Site Settings → General → Custom Code → Head start → paste snippet.

Next.js

Use next/script with strategy="beforeInteractive" inside the root <Head> of _document.tsx. Verify build output places the script tag before any other JS in <head>.

Astro / SvelteKit / Nuxt

Add the snippet to the root layout’s <head> slot. For Astro use <Fragment slot="head">, for SvelteKit use app.html, for Nuxt use nuxt.config.ts → app.head.script (with tagPosition: "head" and no defer).

​
Verifying installation

After installing, open your site in a fresh browser tab. Open DevTools (F12) → Console: 
window.__ABTESTLY_CONFIG__
// Returns: { siteId: "...", version: 12, experiments: [...], ... }
If undefined:
  • Snippet didn’t load. View page source (Ctrl+U / Cmd+Option+U) — is the <script> tag in <head>?
  • Snippet is blocked. Test in incognito with extensions disabled. Some ad blockers may need an allowlist entry for cdn.abtestly.com.
  • Domain mismatch. Each snippet is tied to a specific site. Verify you copied the snippet from the matching site in your dashboard.

​
Multiple domains

Each site in your dashboard has its own unique snippet. If you have acme.com, app.acme.com, and acme.co.uk, add each as a separate site and install the matching snippet on each. You can’t mix snippets across domains — they’re keyed to the registered domain.

​
Cache headers

The snippet is served with these cache directives:
  • Cache-Control: public, max-age=60, s-maxage=300, stale-while-revalidate=86400
  • Cloudflare edge caches for 5 minutes; browsers cache for 1 minute
  • After publishing a new config, the snippet picks it up within ~60s globally
If you’re testing changes and want to bypass the cache, append ?v={random} to the snippet URL in DevTools Network tab.