Installing on an HTML Site
Add Split Test Pro to any website with one script tag. Create your workspace, copy the snippet, paste it into your <head> and confirm it on the Dashboard.
Split Test Pro runs on any website that lets you add a <script> tag to the page. There’s nothing to compile, no SDK to install, and no framework requirements. This guide walks you through signing up, installing the snippet, and confirming it’s working.
Step 1: Create Your Account
Sign up and create your workspace
Go to splittestpro.com and create an account with your work email. There is no password: you sign in with a one-time code that Split Test Pro emails to you.
Next you set up a workspace — the container for one site’s experiments, team members and billing. Fill in Workspace name (usually your site or brand) and Site domain (the domain where you’ll install the script, for example example.com). You can change both later in Settings.
Step 2: Copy Your Install Snippet
Open Settings → Script & API
In the Split Test Pro app, click Settings in the sidebar and open the Script & API card. Only workspace owners can see it. The card shows your snippet, which looks like this:
<script src="https://app.splittestpro.com/experiment.js" data-api-key="YOUR_API_KEY" data-api-url="https://app.splittestpro.com" crossorigin="anonymous"></script>Click the copy button beside the snippet to grab it. Always copy the card’s snippet rather than retyping the example above — the card fills in your real key.
<script src="https://app.splittestpro.com/experiment.js" data-api-key="YOUR_API_KEY" async ></script>
Step 3: Paste It Into Your Site
Add the snippet inside <head>
Paste the snippet inside the <head> of your site, before any other script and before the closing </head> tag. It needs to load early so it can apply variant CSS before the page paints.
- Plain HTML / static sites: edit your template’s
<head>block. - WordPress: use a header-injection plugin (e.g., “Insert Headers and Footers”) or your theme’s header customizer.
- Webflow / Squarespace / Wix: look for “custom code” or “header code injection” in site settings.
- Next.js / Nuxt / Astro: add it to your global layout’s
<head>(e.g.,app/layout.tsx,_app.js, or the equivalent). - Google Tag Manager: create a Custom HTML tag that fires on All Pages and As soon as possible. The script works this way, but the Dashboard’s connection check can’t see it — see Troubleshooting below.
Page Types
Every event the script sends is tagged with a page type. By default it is home for / and otherwise the first segment of the path — /products/blue-shirt becomes products. If that doesn’t match how your site is organised, you can set the page type yourself in one of two ways.
On the tag. Add data-page-type to the snippet on a page to set that page’s type directly:
<script src="https://app.splittestpro.com/experiment.js" data-api-key="YOUR_API_KEY" data-api-url="https://app.splittestpro.com" crossorigin="anonymous" data-page-type="product"></script>With rules. Define window.SplitTestProConfig with pageRules in a script that runs before the Split Test Pro tag:
<script>
window.SplitTestProConfig = {
pageRules: [{ pattern: "/products", type: "product" }]
};
</script>Each rule’s pattern matches when the page’s path contains it. Wrap a pattern in slashes (for example "/^/blog/[0-9]+/") to use it as a regular expression instead. The first matching rule wins; data-page-type on the tag beats every rule.
Step 4: Verify It’s Running
Open your site and check the network tab
Visit any page where you installed the snippet. Open your browser’s DevTools (F12 or right-click → Inspect) and switch to the Network tab. Reload the page.
Filter for experiment.js. You should see a request to app.splittestpro.com returning 200 OK.
Confirm on the Dashboard
Back in Split Test Pro, open the Dashboard. The status box beside the page title reads Site connected once Split Test Pro finds your snippet on the homepage of the domain you registered. Until then it reads Site not connected, and a Connect Split Test Pro banner across the top of the app links to your snippet.
The green Active pill on the Script & API card is a label, not a live check — use the Dashboard to confirm your install.
Single-Page Apps
If your site is a single-page application (React, Vue, etc.) that uses client-side routing, the script applies variants on the initial page load and does not re-apply them on pushState route changes. See Single-Page Apps for the workaround.
Privacy & Consent
By default, the script respects Do Not Track and Global Privacy Control signals. If you use a cookie-consent banner, you can hold the script back until consent is given. See Privacy and Consent for the details.
Troubleshooting
- Script returning 403 or 404. The
data-api-keyis wrong. Re-copy the snippet from Settings → Script & API. - Dashboard says Site not connected. The check fetches your registered domain’s homepage HTML from our servers and looks for your exact
data-api-keyattribute. It reports not connected when the snippet is only on inner pages, only on a staging host, or added by Google Tag Manager or other JavaScript — a tag injected by script isn’t in the page’s HTML, so the check can’t see it even when the script is working. Use the Network-tab check in Step 4 to confirm those installs. - Tag moved out of
<head>. The script still runs, but variant CSS may flash: visitors can briefly see the original page before the variant applies. Keep the tag in<head>where you can.
For more, see Troubleshooting.
Next Steps
Take the dashboard tour to learn the layout, then create Your First Experiment.
