The Needlr snippet, and why there's no flicker
What Needlr runs on your site, how each visitor gets their version, and how Needlr keeps the page from jumping.
When you connect Tag Manager, Needlr adds one small snippet to your site. On every page it does three jobs: picks each visitor's version, shows it, and counts your KPI.
The Needlr snippet is a small piece of code that runs on your website. It shows each visitor their version of a change, and counts your KPI. It's built so the page doesn't jump in front of your visitors.
Think of a stage crew
In a theater, the crew changes the set while the curtain is down. The audience only sees the finished stage. If the crew is late, the scene is played on the old set rather than changed in front of everyone.
Needlr is the stage crew. It changes your page before visitors look. And when it would be too late, it leaves the page as it is.
How it gets onto your site
When you connect Google Tag Manager, Needlr adds its own tags to your container. Their names start with Needlr -. One loads the snippet on every page, one puts changes in place as early as possible, and there's one for each KPI. Needlr only edits tags it created, never yours.
No Tag Manager? A developer can install Needlr with the Project key on your project's Settings tab.
What it does on every page
- Picks a version. For each running split test, it decides whether this visitor sees version A or version B.
- Shows it. It puts your change on the page, or, for a test between two pages, sends the visitor to the other page.
- Counts. It notes one visit a day, and every time a visitor does your KPI, and sends that to Needlr.
- Never breaks your page. If something goes wrong, or Needlr's server is slow, the visitor just sees your site as it is, and isn't counted.
How each visitor gets their version
The first time someone visits, the snippet gives them a random ID. It's not their name or email, just a random string kept in their own browser (privacy).
From that ID, the snippet works out the version with a fixed formula. Same ID, same answer. So a visitor who comes back sees the same version every time. Needlr's server uses the exact same formula, so the two always agree.
Because the browser decides on the spot, nobody waits for a server to find out which version to show.
Why pages can flicker
Tag Manager loads a moment after your page starts to appear. So with any tool that loads through Tag Manager, a visitor could see the old version for a blink, and then the new one. That blink is called flicker.
How Needlr stops it
- Changes go in before the page shows. Needlr's early tag starts the moment Tag Manager does. Anything that appears later, or sits lower on the page, is changed before anyone sees it.
- At the top of the page, you choose. If you pick something visitors see right away, the editor says This element is at the top of the page and asks how Needlr should change it.
- A test between two pages hides the old page for a moment while the browser moves on, like a normal page load.
Your choices for something at the top of the page:
- Change it anyway (recommended). Visitors who get the new version may see it fade in, for about 0.2 seconds.
- Never let anyone see it change. If the old version is already on screen, Needlr leaves that page view alone and doesn't count it. It does this for version A and version B alike, so the race stays fair. But most visitors are then left out, and the check may never finish.
- Add one line to your site, and nobody sees anything change (see below).
- Or another way: Send visitors to another page, Use a developer check, or Pick something lower.
The no-flicker line (optional)
One line in your site's <head> removes flicker completely. It hides the page for a split second, never more than one second, until the change is in place. It only does this while a visual check runs. It loads nothing and never needs updating.
- 1Open your project's Settings tab and find the No flicker card. Press Set it up.
- 2Copy the line.
- 3Paste it inside your site's <head>, as high as possible and before the Google Tag Manager code. The window has steps for WordPress, Webflow, Wix and Shopify. Not sure how? Send the window to whoever manages your website. It's a two-minute job.
- 4Press Check. When it says Found on your site, the card shows Installed.
Common mistakes
- Choosing Never let anyone see it change for something at the top. Most visitors are left out, and the check may never finish. Choose the fade, or add the line.
- Pasting the line low on the page. It has to sit high in the <head>, before the Tag Manager code, or it comes too late.
- Deleting Needlr's tags in Tag Manager by hand. Every check on that site stops. To stop using Needlr on a site, disconnect it in Needlr instead (how).
Words to know
- Snippet
- The small piece of Needlr code that runs on your website.
- Flicker
- A blink where a visitor sees the old version, then the new one.
- Top of the page
- What a visitor sees before scrolling. Also called above the fold.
- Visitor ID
- A random string in the visitor's browser. It picks their version and keeps it the same.
What the video says
When you connect Tag Manager, Needlr adds one small snippet to your site. On every page it does three jobs: picks each visitor's version, shows it, and counts your KPI.
Each visitor gets a random, anonymous ID. The split is computed from it in the browser, so a returning visitor sees the same version every time, with no waiting on a server.
The catch with any tool that loads through Tag Manager: the page can paint before it arrives. Change a headline at the top, and a visitor might see it switch.
Needlr guards against it. Anything below the fold changes before anyone sees it. At the top, you choose: a quick 0.2 second fade, or skip views where it was already visible.
No fade at all? Add one line to your site's head. It hides the page for a split second, never more than one second, and only while a visual impact check runs.
The No flicker card on your project's Settings tab tells you if the line is there. Then ship changes knowing visitors see one clean version, and the numbers stay honest.