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=PARTNER123

the tracker:

  1. detects the ?aff= parameter
  2. sends click data to Affitor
  3. creates or updates the tracked customer relationship
  4. stores affitor_click_id in a first-party cookie
  5. makes later signup and sale attribution possible

That cookie value is later reused as:

  • click_id in API payloads
  • affitor_click_id in Stripe metadata

Choose Your Installation Method

MethodBest forBenefits
npm SDKReact, Next.js, JS/TS appsPromise-based loading, TypeScript support
Script tagStatic HTML, CMS sites, no-build installsCopy-paste setup, no build step required

npm SDK

Install the tracker package:

npm install @affitor/sdk

React / Next.js

Warning

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

Child 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

OptionTypeDescription
programIdstring | numberrequired program ID
debugbooleanEnable verbose console logs for testing
env'production' | 'uat' | 'local'environment preset
scriptUrlstringcustom 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

AttributeRequiredDescription
srcYestracker script URL
data-affitor-program-idYesyour Affitor program ID
data-affitor-debugNoset to true while testing

Affitor looks for the aff query parameter on landing URLs, for example:

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

When 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
Warning

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_id between landing and conversion
  • Signup/payment identifiers do not consistently match your internal customer ID

Next Steps

Once click tracking is working, continue with: