AffihubDocs
DocsIntegration GuidesInstall Tracking Script

Install Tracking Script

Overview

The Affihub tracking script is a lightweight JavaScript snippet that runs on your website. It handles three things:

  1. Detects ?ref=partner-slug in the URL
  2. Stores referral attribution in localStorage for 90 days
  3. Reports clicks back to the Affihub API

Installation

Add the script to every page of your website, before the closing </body> tag:

<script
  src="https://api.affihub.com/affihub.js"
  data-program="YOUR_PROGRAM_ID"
></script>

Replace YOUR_PROGRAM_ID with your Program ID from the Settings & Keys page.

💡

For single-page apps (React, Next.js, Vue), add the script to your root HTML template or index.html. It only needs to load once — it reads the URL on page load.

Next.js

Add it to your root layout:

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <script
          src="https://api.affihub.com/affihub.js"
          data-program="YOUR_PROGRAM_ID"
        />
      </body>
    </html>
  );
}

WordPress

Add to your theme's footer.php or use a plugin like "Insert Headers and Footers" to inject the script before </body>.

Static HTML

Place the script tag directly in your HTML files:

<!DOCTYPE html>
<html>
<head>
  <title>Your Site</title>
</head>
<body>
  <!-- Your content -->
 
  <script
    src="https://api.affihub.com/affihub.js"
    data-program="YOUR_PROGRAM_ID"
  ></script>
</body>
</html>

How it works

When a visitor lands on your site with ?ref=partner-slug in the URL:

  1. The script reads the ref query parameter
  2. Validates that the data-program attribute is present
  3. Stores the following object in localStorage under the key affihub_ref:
{
  "ref": "partner-slug",
  "program": "prog_abc123",
  "ts": 1712880000000,
  "landing": "/pricing"
}
  1. Sends a click beacon via navigator.sendBeacon:
POST https://api.affihub.com/track/click
Content-Type: application/json
 
{
  "program_id": "prog_abc123",
  "ref": "partner-slug",
  "landing": "/pricing",
  "referrer": "https://twitter.com/partner"
}

JavaScript API

The script exposes window.AffiHub with one method:

AffiHub.getRef()

Returns the stored referral data, or null if no referral is active or it has expired.

const ref = window.AffiHub.getRef();
 
if (ref) {
  console.log(ref.ref);     // "partner-slug"
  console.log(ref.program); // "prog_abc123"
}

Use this at checkout to pass the referral to your payment provider.

Expiration

Referral data expires after 90 days. The script checks the ts (timestamp) field on each page load and clears expired data automatically.

If a visitor clicks a different partner's link within the 90-day window, the new referral overwrites the previous one (last-click attribution).

Overwriting behavior

The script uses last-click attribution:

Scenario Result
Visitor clicks ?ref=alice Alice stored
Same visitor clicks ?ref=bob 2 days later Bob overwrites Alice
Same visitor visits site with no ?ref param Bob remains stored
90 days pass with no new ?ref click Data cleared

Verifying the installation

  1. Open your website with ?ref=test appended to the URL
  2. Open browser developer tools (F12)
  3. In the Console, run:
AffiHub.getRef()

You should see:

{ "ref": "test", "program": "YOUR_PROGRAM_ID" }

  1. Check localStorage in the Application tab — you should see the affihub_ref key.

  2. In the Network tab, look for a request to api.affihub.com/track/click — this confirms click tracking is working.

Performance

  • The script is approximately 2KB (minified)
  • It loads asynchronously and does not block page rendering
  • Click beacons use navigator.sendBeacon, which is non-blocking and survives page navigation
  • No cookies are set — attribution is purely localStorage-based

Privacy

The tracking script:

  • Does not set cookies
  • Does not collect personal information
  • Only stores a partner slug and program ID in localStorage
  • Only sends data when a ?ref= parameter is present in the URL
  • Uses first-party localStorage (scoped to your domain)
ℹ️

Since the script uses localStorage and does not set cookies, it is generally not subject to cookie consent requirements. However, consult your legal advisor for your specific jurisdiction.

PreviousHow It WorksNextStripe Integration