Installing the Snippet

The A vs B snippet is a small JavaScript file that runs on your website. It fetches your experiment configuration, decides which variation each visitor sees, injects the variation code, and tracks events. Installation is a single line of HTML.

Get your snippet tag

Every project has a unique snippet tag pre-generated for you. To find it:

Open your project in A vs B.
Go to Project Settings using the gear icon in the left sidebar.
Click the Snippet tab.
Copy the script tag shown on that page. It will look like the example below, but with your real snippet key instead of YOUR_SNIPPET_KEY.

Your snippet tag (recommended — no async)

1<script
2  id="avsb"
3  src="https://cdn.avsb.cloud/snippet.js?id=YOUR_SNIPPET_KEY"
4></script>

Step-by-step installation

Copy the snippet tag

Go to Project Settings → Snippet and click the copy button next to your snippet tag. The tag contains your unique project key embedded in the URL.

Open your website's HTML template

Find the file in your website's codebase that contains the global HTML <head> section. This is the file that wraps every page on your site. For example:

WordPress: your active theme's header.php
Next.js: app/layout.tsx or pages/_document.tsx
Plain HTML: your index.html or shared template file
Shopify: your theme's theme.liquid

Paste the snippet tag

Paste the snippet tag inside the <head> element, before the closing </head> tag. Place it as high up in the <head> as possible — ideally right after the opening <head> tag — so it loads early.

Save and deploy

Save the file and deploy your changes to your website. The snippet will not be detected until the updated code is live on the URL you entered when creating your project.

Verify installation

Return to Project Settings → Snippet in A vs B. The status indicator will turn green and show “Snippet detected” once A vs B confirms the snippet is live on your site. This can take up to a minute after deployment.

The snippet should be one of the first scripts in your <head>section. Placing it early means it loads before your visitors see the page, which prevents the “flash of original content” (where the original version briefly appears before the variation is applied). See Anti-Flicker for more detail.

Should you use the async attribute?

The default snippet tag includes async, but we recommend removing it for most websites. Here is why, and when you might want to keep it.

Without async (recommended)

When you remove async, the browser downloads and executes the snippet before it continues parsing the rest of the page. This means:

Variations are applied before the visitor sees any content, so there is zero flicker — no flash of the original version.
Experiment bucketing happens earlier, which means metrics and exposures are captured more reliably.
The trade-off is that page rendering is paused until the snippet finishes downloading. Because the snippet is small (around 12 KB gzipped over the wire) and served from a CDN, this pause is typically under 50 ms on a normal connection — imperceptible to visitors.

With async

When you keep async, the browser downloads the snippet in the background without blocking the page. This means:

Page rendering is never blocked, so your Lighthouse performance score is unaffected.
The downside is a higher chance of flicker — visitors may briefly see the original content before the variation is applied. The built-in anti-flicker mechanism mitigates this, but it cannot eliminate it entirely.
On very slow connections, experiments may activate late or not at all if the visitor navigates away before the snippet finishes loading.

Remove async and place the snippet as the very first script in your <head>. The tiny blocking delay is worth the guarantee of zero flicker and reliable experiment delivery. Only keep async if your site has strict performance budgets that cannot tolerate any render-blocking scripts.

What happens next

With the snippet installed and verified, you are ready to create your first experiment. Continue to Your First Experiment.