Install the tracking pixel

The attribu.tech pixel is a lightweight (~4KB) JavaScript snippet that tracks pageviews, identifies traffic sources, and links visitors to payments.

Basic installation

Add the script tag to every page, ideally in the <head>:

<script
  defer
  data-website-id="YOUR_SITE_ID"
  data-domain="yourdomain.com"
  src="https://attribu.tech/js/script.js"
></script>

Replace YOUR_SITE_ID with the UUID from your attribu.tech dashboard (Settings > General). Set data-domain to your root domain (e.g. example.com).

What it tracks automatically

Pageviews on every navigation (including SPA route changes)
UTM parameters (source, medium, campaign, content, term) and simple refs (?ref=, ?via=, ?source=)
Referrer from the previous page
Ad click IDs (gclid, gbraid, wbraid, gclsrc, fbclid, msclkid, ttclid, twclid, li_fat_id)
Device info (browser, OS, screen size, viewport, language, timezone)
Outbound link clicks (URL and link text captured automatically)
Scroll percentage (maximum scroll depth per page)
Visitor first seen at (timestamp of first-ever visit)
Session number (how many times this visitor has returned)
Stripe Payment Links (auto-detects ?session_id=cs_xxx)
Calendar bookings (auto-detects Calendly and Cal.com embeds/links)

Cookies

Cookie	Duration	Purpose
`attribu_visitor_id`	365 days	Unique visitor identifier (UUID)
`attribu_session_id`	30 minutes (rolling)	Session identifier, refreshed on activity
`attribu_first_seen`	365 days	ISO timestamp of when the visitor was first seen
`attribu_session_num`	365 days	Incremental session counter (how many times this visitor has returned)

SPA support

The pixel automatically detects client-side navigation by overriding history.pushState and listening to popstate events. No extra configuration needed for Next.js, React Router, Vue Router, etc.

Bot filtering

The pixel automatically filters out bots, headless browsers, and crawlers. It also blocks tracking inside iframes and on localhost (unless explicitly enabled).

Opt-out

Visitors can opt out of tracking by setting a localStorage flag:

localStorage.setItem("attribu_ignore", "true");

You can also use this to exclude yourself from tracking while developing.

Frameworks

Next.js (App Router)

Add the script to your root layout.tsx:

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          defer
          data-website-id="YOUR_SITE_ID"
          data-domain="yourdomain.com"
          src="https://attribu.tech/js/script.js"
        />
      </body>
    </html>
  );
}

WordPress

Add the script to your theme's header.php or use a plugin like "Insert Headers and Footers":

<script
  defer
  data-website-id="YOUR_SITE_ID"
  data-domain="yourdomain.com"
  src="https://attribu.tech/js/script.js"
></script>

Webflow / Squarespace / Wix

Paste the script tag into your site's custom code section (usually found in Site Settings > Custom Code > Head).

Google Tag Manager

See the Google Tag Manager guide for deploying via GTM.

Ensuring reliable tracking

If you need to send events before the script loads (e.g. on page load in a SPA), add this queue snippet to your <head>:

<script>
  window.attribu = window.attribu || function() {
    (window.attribu.q = window.attribu.q || []).push(arguments);
  };
</script>

Events queued this way are automatically replayed when the pixel loads.

What's next

Script configuration reference for all data attributes
Custom events & goals for tracking user actions
Scroll tracking for section visibility events
Cross-domain tracking for multi-domain setups
Stripe integration for revenue attribution