Pageview Tracker

The pageview tracker captures when visitors arrive via affiliate links. This is the foundation of Affitor tracking.

What It Does

When someone clicks a partner’s affiliate link (https://yoursite.com?ref=PARTNER123), the tracker:

Detects the ?ref= parameter
Request to Affitor backend to get a unique customer_code
Stores customer_code in a cookie
Creates customer-partner relationship in database
Sends a click event to Affitor

All subsequent events (signups, purchases) are linked via customer_code and user_id.

Choose Your Installation Method

Method	Best for	Benefits
npm SDK	React, Next.js, Vue, any JS/TS app	TypeScript types, Promise-based, no race conditions
Script Tag	Static HTML, WordPress, no-build sites	Zero dependencies, copy-paste setup

npm SDK (Recommended)

Install the official SDK package:

npm install @affitor/tracker

React / Next.js (App Router)

Wrap your app with AffitorProvider — the tracker loads automatically:

// app/layout.tsx (or your root layout)
import { AffitorProvider } from '@affitor/tracker/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <AffitorProvider programId="YOUR_PROGRAM_ID">
          {children}
        </AffitorProvider>
      </body>
    </html>
  );
}

React / Next.js (Pages Router)

import { AffitorProvider } from '@affitor/tracker/react';

export default function App({ Component, pageProps }) {
  return (
    <AffitorProvider programId="YOUR_PROGRAM_ID">
      <Component {...pageProps} />
    </AffitorProvider>
  );
}

Any JavaScript / TypeScript App

import { loadAffitor } from '@affitor/tracker';

// Load once — returns a singleton Promise
const affitor = await loadAffitor('YOUR_PROGRAM_ID');

SDK Options

Option	Type	Default	Description
`programId`	`string \| number`	—	Required. Your program ID (from dashboard)
`env`	`'production' \| 'uat' \| 'local'`	`'production'`	Environment preset
`debug`	`boolean`	`false`	Enable debug mode (verbose console logs)
`scriptUrl`	`string`	—	Custom script URL (overrides `env`)

// Local development with debug
const affitor = await loadAffitor('YOUR_PROGRAM_ID', { env: 'local', debug: true });

// UAT environment
const affitor = await loadAffitor('YOUR_PROGRAM_ID', { env: 'uat' });

Script Tag

For static HTML sites or platforms without a build step, add this script tag to your website’s <head> section:

<script
  src="https://api.affitor.com/js/affitor-tracker.js"
  data-affitor-program-id="YOUR_PROGRAM_ID"
  data-affitor-debug="false">
</script>

That’s it. The script handles everything automatically.

Configuration

Attribute	Required	Description
`src`	Yes	Affitor tracker script URL
`data-affitor-program-id`	Yes	Your program ID (from dashboard)
`data-affitor-debug`	No	Set “true” for test mode

Examples

HTML:

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

React (Create React App):

<!DOCTYPE html>
<html>
<head>
  <script
    src="https://api.affitor.com/js/affitor-tracker.js"
    data-affitor-program-id="YOUR_PROGRAM_ID"
    data-affitor-debug="false">
  </script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

Finding Your Program ID

Go to your Affitor dashboard
Navigate to Settings → Integration
Copy your Program ID

How Affiliate Links Work

Partners receive links in this format:

https://yoursite.com?ref=PARTNER123

Or with a landing page:

https://yoursite.com/pricing?ref=PARTNER123

The tracker detects any URL with ?ref= and captures the partner code.

Verifying Installation

Test Mode

Enable debug mode to see tracking events in your browser console:

npm SDK:

// Pass debug: true to AffitorProvider or loadAffitor
<AffitorProvider programId="YOUR_PROGRAM_ID" debug>

// or
const affitor = await loadAffitor('YOUR_PROGRAM_ID', { debug: true });

Script tag:

<script
  src="https://api.affitor.com/js/affitor-tracker.js"
  data-affitor-program-id="YOUR_PROGRAM_ID"
  data-affitor-debug="true">
</script>

Then:

Open your browser’s Developer Tools (F12)
Go to the Console tab
Visit your site
You should see the following console messages:

[Affitor Tracker] Affitor tracker initialized with options: {debug: true}
[Affitor Tracker] Using advertiser ID: YOUR_PROGRAM_ID
[Affitor Tracker] 🔍 Verifying cookie functionality...
[Affitor Tracker] 📝 Writing test cookies: {customer_code: "test_customer_...", affiliate_url: "..."}
[Affitor Tracker] Cookie set: {name: "customer_code", value: "test_customer_...", expires: ...}
[Affitor Tracker] Cookie set: {name: "affiliate_url", value: "...", expires: ...}
[Affitor Tracker] 📖 Reading test cookies back: {customer_code: "test_customer_...", affiliate_url: "..."}
[Affitor Tracker] ✅ Cookie verification PASSED - All cookies working correctly!
[Affitor Tracker] trackTest() called true
[Affitor Tracker] Sending test event to verify tracking: {customerCode: null, hasAttribution: false, eventType: "test"}

If cookies are blocked, you’ll see:

[Affitor Tracker] ❌ Cookie verification FAILED - Cookies may be blocked or not working properly!
[Affitor Tracker]    customer_code cookie issue:
[Affitor Tracker]    - Expected: test_customer_...
[Affitor Tracker]    - Got: null/undefined
[Affitor Tracker]    Possible causes:
[Affitor Tracker]    - Browser privacy settings blocking cookies
[Affitor Tracker]    - Safari Intelligent Tracking Prevention (ITP)
[Affitor Tracker]    - Third-party cookie restrictions
[Affitor Tracker]    - Browser extensions (ad blockers, privacy tools)
[Affitor Tracker]    - Site not served over HTTPS (required for secure cookies)

Dashboard Verification

Visit your site
Go to Affitor dashboard → Setting -> Pageview Tracker
Click on Test Click Tracking
Pageview tracker should show a blue checkmark

Troubleshooting

Script Not Loading

Symptoms: No cookies set, no console messages in debug mode

Check:

Script URL is correct
No Content Security Policy blocking the script
Script is in <head>, not <body>

Cookies Not Set

Symptoms: Script loads but cookies are missing

Check:

Site is served over HTTPS (required for secure cookies)
No browser extensions blocking cookies

Events Not Appearing in Dashboard

Symptoms: Cookies set but no events in Affitor

Check:

Program ID is correct
Check browser Network tab for failed requests