Skip to main content
The Fidero Pixel is a lightweight JavaScript snippet that enables all our client-side capabilities, including event tracking, browser state capture and consent management. Here’s what you need to know to get it installed correctly.

​
The snippet

This is the code you need to add to your website. You can find your unique PROJECT_ID in the Fidero dashboard. 
<script>
  // prettier-ignore
  !function(){let e=window.fidero=window.fidero??{};if(e.initialised)return;if(e.invoked)return console.error("[Fidero] Snippet included multiple times");e.invoked=!0;let t={};e.ready=new Promise((e,a)=>{t.resolve=e,t.reject=a}),e.ready.resolve=t.resolve,e.ready.reject=t.reject,e.buffered=[],e.initArgs=null,e.init=function(){return e.initArgs=Array.prototype.slice.call(arguments),e.ready},["updateConsent","updateIdentity","page","track","reset"].forEach(t=>{e[t]=function(){let a=Array.prototype.slice.call(arguments);a.unshift(t),e.buffered.push(a)}}),e.load=t=>{let a=(t=t||"https://cdn.fidero.co/sdk/v0.8/fidero.js").match(/.+sdk\/v?(.+)\/fidero.js/);null!==a&&a.length>=2&&(e.version=a[1]);let r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src=t,(document.head||document.body).appendChild(r)}}()

  fidero.load()
  fidero.init("YOUR_PROJECT_ID")
  fidero.page()
</script>

​
How to install

For the Pixel to function correctly, it must be present on every page of your site. The best way to achieve this is to add it to a shared <head> section in your site’s HTML templates.
1

Locate your global head

Find the HTML file or template that contains the <head> tag for all pages on your site. This is often in a file like index.html, _document.js, base.html or header.php.
2

Paste the snippet

Copy the snippet and paste it just before the closing </head> tag.
3

Replace the Project ID

Change the placeholder YOUR_PROJECT_ID to your actual Project ID from the Fidero dashboard.
That’s it! The Pixel will now load on every page and start capturing browser state immediately.
Place the Pixel in the <head>, not the <body>. Here’s why this matters: we capture attribution data from the very first millisecond – including those crucial click IDs that disappear after redirects. Missing this first-page data means lost conversions in your reports.

​
What the snippet does

The snippet is designed to be completely asynchronous and non-blocking, so it won’t affect your site’s performance. Here’s what happens when it loads:

​
1. Creates the window.fidero object

This object contains all the methods you’ll use to interact with the SDK (like fidero.track() and fidero.updateIdentity()). Why this matters: You can call these methods immediately – even before the full SDK loads. They’ll be queued and executed as soon as the SDK is ready.

​
2. Buffers API calls

It creates a queue (fidero.buffered) so that any API calls you make before the full SDK has loaded are safely stored. Why this matters: No race conditions. No lost events. Everything just works.

​
3. Asynchronously fetches the SDK

The fidero.load() command injects a <script> tag that fetches the full SDK from our CDN without blocking the rendering of your page. Why this matters: Your site stays fast. The Pixel loads in the background whilst your content renders immediately.

​
4. Initialises your project

fidero.init("YOUR_PROJECT_ID") tells the SDK which project configuration to load from our servers. Here’s the key: Your configuration lives server-side. When we update your configuration (like enabling a new destination), your Pixel automatically pulls the latest config on its next request. Zero deployment action from your team.

​
5. Tracks the first page view

fidero.page() is called to record the initial page view, capturing the crucial first-touch attribution data. Why this matters: This is where we capture click IDs before they disappear. Miss this moment, and you’ve lost attribution context forever.
The snippet is < 1KB and loads asynchronously, so it has minimal performance impact. We’ve obsessed over making this fast because we know every millisecond counts for your users’ experience.

​
Next steps

Once the snippet is in place, you’re ready to start tracking events. See the Pixel API Reference for a full list of available methods. Want to understand what’s happening behind the scenes? Check out:

Browser State Capture

Learn how we capture attribution context before browsers can drop it.

Server-First Architecture

Understand why the server-first design makes your data trustworthy.