attribu.tech Docs

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)
  • Referrer from the previous page
  • Ad click IDs (gclid, fbclid, msclkid, ttclid, twclid, li_fat_id)
  • Device info (browser, OS, screen size, language, timezone)
  • Outbound link clicks (tracked automatically)
  • Stripe Payment Links (auto-detects ?session_id=cs_xxx)

Cookies

CookieDurationPurpose
attribu_visitor_id365 daysUnique visitor identifier (UUID)
attribu_session_id30 minutes (rolling)Session identifier, refreshed on activity

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).

Copied