Add the Varly snippet to your site

The snippet is one short line of code that connects your site to Varly. It measures how visitors use your pages, shows your surveys and runs your A/B tests. Each site has its own snippet, so copy it from the site you are setting up.

Copy the snippet

1. Open your site in Varly and click Install in the menu on the left.
2. Under 1., pick your platform. Then click the copy button next to the code under 2. Add the snippet.
3. Paste it into the <head> of every page, as high as possible.

On WooCommerce and WordPress, step 2 is Install the Varly plugin: the plugin adds the snippet for you. See Install on WooCommerce or WordPress.

The snippet looks like this, with your own site name and key:

<!-- Varly · Your site -->
<script src="https://cdn.varly.ai/s/pk_….js" async></script>

The first line is only a comment, so you can find the snippet again later. All your settings are built into the script itself, so you don't need extra code.

If Varly recognized your platform, the Install page shows where to paste it. There are also step-by-step guides for Shopify, WooCommerce and WordPress and other platforms.

Why "as high as possible"?

The snippet loads async: your page doesn't wait for it, so it doesn't hold up loading. Placing it high in the <head> means it starts early. This matters most for A/B tests: the earlier the snippet runs, the sooner a visitor sees the right version of the page.

Switch tracking on

New sites start with tracking off, so nothing is measured while you are still installing. Once the snippet is in place:

1. On the Install page, go to 3. Turn tracking on.
2. Click Turn tracking on.

You can also do this under Settings → Tracking & privacy: tick Tracking on and click Save. The snippet picks up the change within a minute. When tracking is off, the snippet does nothing and no data is stored. Running tests pause too.

What the snippet does

Once a visitor has accepted cookies in your cookie banner, the snippet:

• counts page views, including page changes on sites that load new pages without a full reload;
• records clicks and scroll depth for your Heatmaps, and notices rage clicks (fast repeated clicks) and dead clicks (clicks where nothing happens);
• notes JavaScript errors and how fast the page loads;
• applies your running Experiments;
• shows your running Surveys. The survey itself is a separate small script that only loads on pages where a survey is about to appear;
• loads a separate recording script only for sessions that are picked for session recordings.

What it never does:

• It never shows its own cookie banner. It follows the visitor's choice in yours. See Cookie consent.
• It does nothing at all on pages listed under Never track these pages. By default that list contains /checkout, /cart, /winkelwagen and /afrekenen.
• Varly only accepts data from the domains listed under Domains in Settings → Tracking & privacy, and their subdomains.

Using Google Tag Manager

We recommend pasting the snippet directly into your site's <head>. A tag manager loads scripts later than the page itself, so test changes can appear a moment after the page shows.

If you still prefer Google Tag Manager, add the snippet as a Custom HTML tag that fires on all pages. The snippet still checks your cookie banner by itself, so you don't need a consent trigger for it.

Common problems

I pasted the snippet but see no data. Check that tracking is on (Install → 3. Turn tracking on) and that you accepted cookies on your own site. See Check that Varly is working.

I have several country sites. Each domain gets its own site in Varly, with its own snippet. Subdomains such as www. or shop. are included automatically.

My developer tests on their own computer. Data from localhost is ignored unless Also accept data from localhost is ticked. Leave it off for a live shop.

For developers

• The script is served from the domain in the snippet. If your site uses a Content Security Policy, allow that domain for scripts (script-src) and requests (connect-src).
• The snippet adds window.Varly. Varly.state() returns { site, mode, started }; started: true means the snippet is measuring on this page.
• The snippet never throws errors into your page. If it fails, it stops quietly.