The Datahappy Pixel is a lightweight JavaScript snippet that enables all of our client-side functionality, including event tracking, browser state capture and consent management.

​
The Snippet

This is the code you need to add to your website. You can find your unique PROJECT_ID in the Datahappy dashboard. 
<script>
  // prettier-ignore
  !function(){let e=window.datahappy=window.datahappy??{};if(e.initialised)return;if(e.invoked)return console.error("[Datahappy] 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.datahappy.co/sdk/v0.8/datahappy.js").match(/.+sdk\/v?(.+)\/datahappy.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)}}()

  datahappy.load()
  datahappy.init("YOUR_PROJECT_ID")
  datahappy.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
It is critical that the Pixel is placed in the <head> and not at the end of the <body>. Placing it in the head ensures it loads as early as possible, which is essential for accurately capturing attribution data from the very first page view.

​
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 it does:
  1. Creates the window.datahappy object: This object contains all the methods you’ll use to interact with the SDK
  2. Buffers API Calls: It creates a queue (datahappy.buffered) so that any API calls you make (like datahappy.track()) before the full SDK has loaded are safely stored
  3. Asynchronously Fetches the SDK: The datahappy.load() command injects a <script> tag that fetches the full SDK from our CDN without blocking the rendering of your page
  4. Initialises your Project: datahappy.init("YOUR_PROJECT_ID") tells the SDK which project configuration to load from our servers
  5. Tracks the First Page View: datahappy.page() is called to record the initial page view, capturing the crucial first-touch attribution data
Once the snippet is in place, you are ready to start tracking events. See the Pixel API Reference for a full list of available methods.