Click Tracking
Track affiliate visits with the Affitor tracker SDK or script tag
Last updated Sep 24, 2026
Click tracking is the first step in every Affitor integration. It detects affiliate visits, creates the click/customer relationship, and stores the browser identifier used by later signup and sale attribution.
What It Does
When someone lands on your site through an affiliate link such as:
https://yoursite.com?aff=PARTNER123the tracker:
- detects the
?aff=parameter - sends click data to Affitor
- creates or updates the tracked customer relationship
- stores
affitor_click_idin a first-party cookie - makes later signup and sale attribution possible
That cookie value is later reused as:
click_idin API payloadsaffitor_click_idin Stripe metadata
Choose Your Installation Method
| Method | Best for | Benefits |
|---|---|---|
| npm SDK | React, Next.js, JS/TS apps | Promise-based loading, TypeScript support |
| Script tag | Static HTML, CMS sites, no-build installs | Copy-paste setup, no build step required |
npm SDK
Install the tracker package:
npm install @affitor/sdkReact / Next.js
Next.js 13+ App Router: layout.tsx is a Server Component by default. @affitor/sdk uses browser APIs and cannot run in a Server Component. Wrap your app in AffitorProvider from a client component and render it once in your layout.
// app/providers.tsx — client component
'use client';
import { AffitorProvider } from '@affitor/sdk/react';
export function Providers({ children }: { children: React.ReactNode }) {
return <AffitorProvider programId="YOUR_PROGRAM_ID">{children}</AffitorProvider>;
}
// wrap {children} with <Providers> once in app/layout.tsxChild components read the loaded tracker with useAffitor() from @affitor/sdk/react. It returns null while the tracker is loading and during server rendering.
Any JS / TS app
import { loadAffitor } from '@affitor/sdk';
const affitor = await loadAffitor('YOUR_PROGRAM_ID');loadAffitor() loads the tracker script once and resolves to the tracker instance (the same object as window.affitor). It resolves to null during server rendering.
Astro
Astro isn't React, so the React <AffitorProvider> shown above doesn't apply. Load the tracker from a client <script> in your shared layout:
---
// src/layouts/Layout.astro
---
<head>
<!-- ... -->
<script>
import { loadAffitor } from '@affitor/sdk';
loadAffitor('YOUR_PROGRAM_ID');
</script>
</head>Prefer a no-build install? Drop the Script Tag into the same <head> with Astro's is:inline directive, so Astro leaves the external script untouched:
<script
is:inline
src="https://api.affitor.com/js/affitor-tracker.js"
data-affitor-program-id="YOUR_PROGRAM_ID">
</script>Track referred signups the same way — call signup() from a client <script> after the user authenticates. See Lead Tracking (Signup).
Useful options
| Option | Type | Description |
|---|---|---|
programId | string | number | required program ID |
debug | boolean | Enable verbose console logs for testing |
env | 'production' | 'uat' | 'local' | environment preset |
scriptUrl | string | custom script URL override |
Script Tag
<script
src="https://api.affitor.com/js/affitor-tracker.js"
data-affitor-program-id="YOUR_PROGRAM_ID"
data-affitor-debug="false">
</script>Required attributes
| Attribute | Required | Description |
|---|---|---|
src | Yes | tracker script URL |
data-affitor-program-id | Yes | your Affitor program ID |
data-affitor-debug | No | set to true while testing |
How Affiliate Links Work
Affitor looks for the aff query parameter on landing URLs, for example:
https://yoursite.com?aff=PARTNER123
https://yoursite.com/pricing?aff=PARTNER123When that parameter is present, the tracker records the click and creates the customer relationship used by signup and sale attribution.
Verifying Installation
Enable debug mode
SDK:
import { loadAffitor } from '@affitor/sdk';
const affitor = await loadAffitor('YOUR_PROGRAM_ID', { debug: true });With React, pass debug to the provider: <AffitorProvider programId="YOUR_PROGRAM_ID" debug>.
Script tag:
<script
src="https://api.affitor.com/js/affitor-tracker.js"
data-affitor-program-id="YOUR_PROGRAM_ID"
data-affitor-debug="true">
</script>What to verify
Open your browser console and network tab, then confirm:
- The tracker loads without errors
- Cookies can be written and read
- Affitor debug messages appear in the console
- Click or test-click activity appears in the dashboard or test-event tooling
Debug mode helps with test verification, but a real affiliate landing flow using a real ?aff= value still creates real attribution data. Do not mix synthetic tests and production affiliate links.
Common Issues
No click data appears
Check:
- The tracker script loaded successfully
- The page was visited with a valid
?aff=parameter - Your program ID is correct
- CSP rules or browser extensions are not blocking the script
Cookies are missing
Check:
- The site is served over HTTPS in production
- Browser privacy tools are not blocking cookies
- The affiliate landing page executed the tracker before the visitor continued
Later signup/sale tracking fails
This usually means one of the following:
- Click tracking did not run before the signup or sale event
- The browser session lost
affitor_click_idbetween landing and conversion - Signup/payment identifiers do not consistently match your internal customer ID
Next Steps
Once click tracking is working, continue with: