@affiliateo/web 4.6.1 → 4.8.0

package/README.md

@@ -1,238 +1,274 @@
-# @affiliateo/web
-
-Affiliateo web SDK. track affiliate visits and pass attribution metadata to your Stripe checkout.
-
-## Install
-
-```bash
-npm install @affiliateo/web
-```
-
-## Setup
-
-1. Connect your Stripe account on the Affiliateo dashboard
-2. Wrap your app in `<AffiliateoProvider>` with your app ID
-3. At checkout time, call `getAttribution()` and pass the result to Stripe metadata
-
-### Step 1. wrap your app
-
-```tsx
-// app/layout.tsx (Next.js App Router) or _app.tsx (Pages Router)
-import { AffiliateoProvider } from '@affiliateo/web';
-
-export default function RootLayout({ children }) {
-  return (
-    <AffiliateoProvider appId="YOUR_APP_ID">
-      {children}
-    </AffiliateoProvider>
-  );
-}
-```
-
-The provider:
-- Reads `?ref=` from the URL when a visitor arrives
-- Stores attribution in `localStorage` so it survives navigation
-- Sends pageview events to Affiliateo for click tracking
-
-### Step 2. in your checkout button (client-side)
-
-```tsx
-'use client'
-import { getAttribution } from '@affiliateo/web';
-
-async function handleCheckout() {
-  const attribution = getAttribution();
-
-  const res = await fetch('/api/checkout', {
-    method: 'POST',
-    body: JSON.stringify({ attribution }),
-  });
-
-  const { url } = await res.json();
-  window.location.href = url;
-}
-```
-
-`getAttribution()` reads the stored attribution from `localStorage` and returns `affiliateo_ref`, `affiliateo_visitor_id`, and `affiliateo_app_id` as an object, ready to pass to Stripe.
-
-### Step 3. in your checkout API route (server-side)
-
-```ts
-// app/api/checkout/route.ts
-export async function POST(req) {
-  const { attribution } = await req.json();
-
-  const session = await stripe.checkout.sessions.create({
-    line_items: [{ price: 'price_xxx', quantity: 1 }],
-    mode: 'payment',
-    success_url: 'https://yoursite.com/success',
-    cancel_url: 'https://yoursite.com/cancel',
-    metadata: attribution,
-  });
-
-  return Response.json({ url: session.url });
-}
-```
-
-That's it. Affiliateo's webhook will automatically read the metadata and credit the right affiliate when the payment succeeds.
-
-## How it works
-
-1. Visitor clicks affiliate link → `yoursite.com?ref=pinkproton`
-2. `<AffiliateoProvider>` reads `?ref=pinkproton` from the URL and saves it in `localStorage`
-3. As the visitor browses, attribution stays in their browser
-4. At checkout, `getAttribution()` reads localStorage and returns the attribution object
-5. Your server passes it as Stripe metadata when creating the checkout session
-6. When Stripe fires the `checkout.session.completed` webhook, Affiliateo reads the metadata and credits the affiliate
-
-## Why `localStorage` and not cookies?
-
-- **Not blocked by Safari ITP or most privacy tools**
-- **No CSRF concerns**
-
-## GDPR / ePrivacy. merchant responsibility
-
-The SDK writes persistent identifiers (`affiliateo_visitor_id`, `affiliateo_ref`, `affiliateo_campaign_id`) to the visitor's `localStorage` and sends pageview events that include the visitor's IP, user agent, and approximate geolocation to Affiliateo's servers. Under EU ePrivacy (Article 5(3)) and GDPR, persistent identifiers stored on a visitor's device require prior consent the same way cookies do.
-
-If you serve visitors in the EU/EEA, UK, or any jurisdiction with equivalent rules, **you are responsible for obtaining consent before this script loads**, the same way you would for Google Analytics, Meta Pixel, or any other analytics tool. Typical approaches:
-
-- Gate the `<AffiliateoProvider>` (or the `<script src="…/t.js">` tag) behind your cookie banner's "accept" callback so it only loads after consent.
-- Document Affiliateo in your privacy policy as a processor (see our [Data Processing Agreement](https://affiliateo.com/dpa)) and list the categories of data collected.
-
-Affiliateo acts as your data processor for visitor analytics. You are the controller and decide the lawful basis for processing your visitors' data.
-
-## Alternative: vanilla HTML (no React)
-
-If you're not using React, use the tracking script directly instead of the provider:
-
-```html
-<script defer
-  data-app="YOUR_APP_ID"
-  src="https://affiliateo.com/t.js"
-></script>
-```
-
-Then in your checkout flow (vanilla JS):
-
-```js
-const attribution = {
-  affiliateo_ref: localStorage.getItem('affiliateo_ref'),
-  affiliateo_visitor_id: localStorage.getItem('affiliateo_visitor_id'),
-  affiliateo_app_id: localStorage.getItem('affiliateo_campaign_id'), // stored under its legacy key
-};
-
-// Send to your server with the rest of your checkout payload
-fetch('/api/checkout', {
-  method: 'POST',
-  body: JSON.stringify({ attribution }),
-});
-```
-
-## Track conversion goals
-
-Pageviews auto-track. For specific moments that matter to your funnel
-(`signup_completed`, `trial_started`, `initiate_checkout`, etc.), use
-`track()` or HTML data attributes.
-
-### From React
-
-```tsx
-'use client'
-import { useEffect } from 'react'
-import { useAffiliateRef } from '@affiliateo/web'
-
-export default function SignupSuccess() {
-  const { track } = useAffiliateRef()
-  useEffect(() => {
-    track('signup_completed', { plan: 'free' })
-  }, [])
-  return <div>Welcome!</div>
-}
-```
-
-### HTML data attributes (zero JS, works everywhere)
-
-```html
-<button data-affiliateo-goal="initiate_checkout"
-        data-affiliateo-goal-price="49"
-        data-affiliateo-goal-plan="pro">
-  Subscribe
-</button>
-```
-
-The SDK auto-fires the goal on click. Optional `data-affiliateo-goal-*`
-attributes become metadata (kebab-case → snake_case, up to 10 params).
-
-### Scroll-depth tracking
-
-```html
-<section data-affiliateo-scroll="pricing_viewed">
-  ...your pricing content...
-</section>
-```
-
-Fires the first time any pixel of the section overlaps the viewport.
-Maximum permissiveness — if the user scrolled enough to see even a sliver,
-it counts. Earlier versions required 50% visibility, which was unreachable
-for tall sections (a pricing page with comparison tables silently dropped
-out of every funnel). Great for landing pages where you want to know
-which sections convert.
-
-### Goal naming rules
-
-Lowercase letters, digits, underscores, hyphens, colons. Max 64 chars.
-Metadata bounded to 4KB JSON.
-
-## Identify signed-in users (cross-device stitching)
-
-Without `identify()`, the same person browsing on phone and buying on
-laptop counts as two visitors. Call it once after sign-in:
-
-```tsx
-'use client'
-import { useEffect } from 'react'
-import { useAffiliateRef } from '@affiliateo/web'
-import { useUser } from './your-auth'
-
-export default function AuthBoundary({ children }) {
-  const { identify } = useAffiliateRef()
-  const user = useUser()
-  useEffect(() => {
-    if (user) identify(user.id)
-  }, [user])
-  return <>{children}</>
-}
-```
-
-Idempotent. safe to fire on every page load while a user is signed in.
-**user_id only.** The SDK does not accept, collect, or transmit email
-or any other PII.
-
-## API
-
-### `<AffiliateoProvider appId="..." apiUrl?="...">`
-
-React provider. Wrap your app once. Reads `?ref=` from URL, persists to localStorage, sends pageview events, sets up data-attribute + scroll listeners.
-
-Props:
-- `appId` (required): your Affiliateo app ID (`campaignId` still works as a deprecated alias)
-- `apiUrl` (optional): defaults to `https://affiliateo.com`
-
-### `useAffiliateRef()`
-
-React hook that returns `{ refCode, visitorId, track, identify }`.
-
-- `track(eventName, metadata?)`. fire a custom goal
-- `identify(userId)`. link this visitor to a merchant user_id (no PII)
-
-### `getAttribution()`
-
-Client-side function. Returns an object with `affiliateo_ref`, `affiliateo_visitor_id`, and `affiliateo_app_id` from localStorage. Pass directly as Stripe `metadata`.
-
-## Framework support
-
-Works with any JavaScript framework or vanilla JS:
-- **Next.js** (App Router & Pages Router)
-- **Remix** / **React Router**
-- **Vite + React**
-- **Vanilla JS/HTML** (use the `<script>` tag instead)
+# @affiliateo/web
+
+Affiliateo web SDK. track affiliate visits and pass attribution metadata to your Stripe checkout.
+
+## Install
+
+```bash
+npm install @affiliateo/web
+```
+
+## Setup
+
+1. Connect your Stripe account on the Affiliateo dashboard
+2. Wrap your app in `<AffiliateoProvider>` with your app ID
+3. At checkout time, call `getAttribution()` and pass the result to Stripe metadata
+
+### Step 1. wrap your app
+
+```tsx
+// app/layout.tsx (Next.js App Router) or _app.tsx (Pages Router)
+import { AffiliateoProvider } from '@affiliateo/web';
+
+export default function RootLayout({ children }) {
+  return (
+    <AffiliateoProvider appId="YOUR_APP_ID">
+      {children}
+    </AffiliateoProvider>
+  );
+}
+```
+
+The provider:
+- Reads `?ref=` from the URL when a visitor arrives
+- Stores attribution in `localStorage` so it survives navigation
+- Sends pageview events to Affiliateo for click tracking
+
+### Step 2. in your checkout button (client-side)
+
+```tsx
+'use client'
+import { getAttribution } from '@affiliateo/web';
+
+async function handleCheckout() {
+  const attribution = getAttribution();
+
+  const res = await fetch('/api/checkout', {
+    method: 'POST',
+    body: JSON.stringify({ attribution }),
+  });
+
+  const { url } = await res.json();
+  window.location.href = url;
+}
+```
+
+`getAttribution()` reads the stored attribution from `localStorage` and returns `affiliateo_ref`, `affiliateo_visitor_id`, and `affiliateo_app_id` as an object, ready to pass to Stripe.
+
+### Step 3. in your checkout API route (server-side)
+
+```ts
+// app/api/checkout/route.ts
+export async function POST(req) {
+  const { attribution } = await req.json();
+
+  const session = await stripe.checkout.sessions.create({
+    line_items: [{ price: 'price_xxx', quantity: 1 }],
+    mode: 'payment',
+    success_url: 'https://yoursite.com/success',
+    cancel_url: 'https://yoursite.com/cancel',
+    metadata: attribution,
+  });
+
+  return Response.json({ url: session.url });
+}
+```
+
+That's it. Affiliateo's webhook will automatically read the metadata and credit the right affiliate when the payment succeeds.
+
+## How it works
+
+1. Visitor clicks affiliate link → `yoursite.com?ref=pinkproton`
+2. `<AffiliateoProvider>` reads `?ref=pinkproton` from the URL and saves it in `localStorage`
+3. As the visitor browses, attribution stays in their browser
+4. At checkout, `getAttribution()` reads localStorage and returns the attribution object
+5. Your server passes it as Stripe metadata when creating the checkout session
+6. When Stripe fires the `checkout.session.completed` webhook, Affiliateo reads the metadata and credits the affiliate
+
+## Why `localStorage` and not cookies?
+
+- **Not blocked by Safari ITP or most privacy tools**
+- **No CSRF concerns**
+
+## GDPR / ePrivacy. merchant responsibility
+
+The SDK writes persistent identifiers (`affiliateo_visitor_id`, `affiliateo_ref`, `affiliateo_campaign_id`) to the visitor's `localStorage` and sends pageview events that include the visitor's IP, user agent, and approximate geolocation to Affiliateo's servers. Under EU ePrivacy (Article 5(3)) and GDPR, persistent identifiers stored on a visitor's device require prior consent the same way cookies do.
+
+If you serve visitors in the EU/EEA, UK, or any jurisdiction with equivalent rules, **you are responsible for obtaining consent before this script loads**, the same way you would for Google Analytics, Meta Pixel, or any other analytics tool. Typical approaches:
+
+- Gate the `<AffiliateoProvider>` (or the `<script src="…/t.js">` tag) behind your cookie banner's "accept" callback so it only loads after consent.
+- Document Affiliateo in your privacy policy as a processor (see our [Data Processing Agreement](https://affiliateo.com/dpa)) and list the categories of data collected.
+
+Affiliateo acts as your data processor for visitor analytics. You are the controller and decide the lawful basis for processing your visitors' data.
+
+## Alternative: vanilla HTML (no React)
+
+If you're not using React, use the tracking script directly instead of the provider:
+
+```html
+<script defer
+  data-app="YOUR_APP_ID"
+  src="https://affiliateo.com/t.js"
+></script>
+```
+
+Then in your checkout flow (vanilla JS):
+
+```js
+const attribution = {
+  affiliateo_ref: localStorage.getItem('affiliateo_ref'),
+  affiliateo_visitor_id: localStorage.getItem('affiliateo_visitor_id'),
+  affiliateo_app_id: localStorage.getItem('affiliateo_campaign_id'), // stored under its legacy key
+};
+
+// Send to your server with the rest of your checkout payload
+fetch('/api/checkout', {
+  method: 'POST',
+  body: JSON.stringify({ attribution }),
+});
+```
+
+## Track conversion goals
+
+Pageviews auto-track. For specific moments that matter to your funnel
+(`signup_completed`, `trial_started`, `initiate_checkout`, etc.), use
+`track()` or HTML data attributes.
+
+### From React
+
+```tsx
+'use client'
+import { useEffect } from 'react'
+import { useAffiliateRef } from '@affiliateo/web'
+
+export default function SignupSuccess() {
+  const { track } = useAffiliateRef()
+  useEffect(() => {
+    track('signup_completed', { plan: 'free' })
+  }, [])
+  return <div>Welcome!</div>
+}
+```
+
+### HTML data attributes (zero JS, works everywhere)
+
+```html
+<button data-affiliateo-goal="initiate_checkout"
+        data-affiliateo-goal-price="49"
+        data-affiliateo-goal-plan="pro">
+  Subscribe
+</button>
+```
+
+The SDK auto-fires the goal on click. Optional `data-affiliateo-goal-*`
+attributes become metadata (kebab-case → snake_case, up to 10 params).
+
+### Scroll-depth tracking
+
+```html
+<section data-affiliateo-scroll="pricing_viewed">
+  ...your pricing content...
+</section>
+```
+
+Fires the first time any pixel of the section overlaps the viewport.
+Maximum permissiveness - if the user scrolled enough to see even a sliver,
+it counts. Earlier versions required 50% visibility, which was unreachable
+for tall sections (a pricing page with comparison tables silently dropped
+out of every funnel). Great for landing pages where you want to know
+which sections convert.
+
+### Goal naming rules
+
+Lowercase letters, digits, underscores, hyphens, colons. Max 64 chars.
+Metadata bounded to 4KB JSON.
+
+## Identify signed-in users (cross-device stitching)
+
+Without `identify()`, the same person browsing on phone and buying on
+laptop counts as two visitors. Call it once after sign-in:
+
+```tsx
+'use client'
+import { useEffect } from 'react'
+import { useAffiliateRef } from '@affiliateo/web'
+import { useUser } from './your-auth'
+
+export default function AuthBoundary({ children }) {
+  const { identify } = useAffiliateRef()
+  const user = useUser()
+  useEffect(() => {
+    if (user) identify(user.id)
+  }, [user])
+  return <>{children}</>
+}
+```
+
+Idempotent. safe to fire on every page load while a user is signed in.
+**user_id only.** The SDK does not accept, collect, or transmit email
+or any other PII.
+
+The SDK remembers the id and sends it again once per visit, so the server
+stays in step without a request on every page. Ids that mean "nobody"
+(`"null"`, `"undefined"`, `"guest"`, `"0"`, an empty string, RevenueCat's
+`$RCAnonymousID:...`, anything over 128 characters) are skipped, and nothing is
+sent while the visitor has opted out.
+
+## Sign out
+
+Call `logout()` when the user signs out:
+
+```tsx
+const { logout } = useAffiliateRef()
+
+async function handleSignOut() {
+  await auth.signOut()
+  await logout()
+  router.push('/')
+}
+```
+
+The browser then counts as a new anonymous customer of your app, so whoever
+signs in next (or nobody) isn't counted as the person who just left.
+Everything already recorded stays with them. Tracking carries on as before:
+same visitor id, same affiliate. If a different user signs in without a
+sign-out in between, the browser switches to them on its own.
+
+## Changelog
+
+- **4.8.0:** new `logout()` for sign-out. `reset()` is now the same as
+  `logout()`: it used to mint a new visitor id and drop the affiliate ref,
+  which split one person into two visitors. `identify()` skips placeholder ids,
+  does nothing while opted out, and re-sends the stored id once per visit. A
+  different user signing in on the same browser now switches it to them. A
+  request the server refuses with a 400 is no longer retried.
+
+## API
+
+### `<AffiliateoProvider appId="..." apiUrl?="...">`
+
+React provider. Wrap your app once. Reads `?ref=` from URL, persists to localStorage, sends pageview events, sets up data-attribute + scroll listeners.
+
+Props:
+- `appId` (required): your Affiliateo app ID (`campaignId` still works as a deprecated alias)
+- `apiUrl` (optional): defaults to `https://affiliateo.com`
+
+### `useAffiliateRef()`
+
+React hook that returns `{ refCode, visitorId, track, identify, logout, ... }`.
+
+- `track(eventName, metadata?)`. fire a custom goal
+- `identify(userId)`. link this visitor to a merchant user_id (no PII)
+- `logout()`. the user signed out (`reset()` is the same)
+
+### `getAttribution()`
+
+Client-side function. Returns an object with `affiliateo_ref`, `affiliateo_visitor_id`, and `affiliateo_app_id` from localStorage. Pass directly as Stripe `metadata`.
+
+## Framework support
+
+Works with any JavaScript framework or vanilla JS:
+- **Next.js** (App Router & Pages Router)
+- **Remix** / **React Router**
+- **Vite + React**
+- **Vanilla JS/HTML** (use the `<script>` tag instead)

package/dist/bot-detect.d.ts

@@ -4,14 +4,14 @@
  * never fire a single network request.
  *
  * Defense in depth:
- *   1. This check       — catches Selenium / Puppeteer / curl / etc
+ *   1. This check       - catches Selenium / Puppeteer / curl / etc
  *                         BEFORE anything hits the wire. Saves bandwidth.
  *                         Can be bypassed by a determined attacker who
  *                         edits the bundled SDK.
- *   2. Server UA regex  — catches the same patterns plus legit crawlers
+ *   2. Server UA regex  - catches the same patterns plus legit crawlers
  *                         (Googlebot, FB crawler, etc). Server is
  *                         authoritative. Can't be bypassed.
- *   3. Cloudflare       — invisible browser-attestation challenge. Real
+ *   3. Cloudflare       - invisible browser-attestation challenge. Real
  *      Turnstile           browsers pass in 50-200ms; scripts that don't
  *                         run real JS can't pass it. Catches sophisticated
  *                         attackers who spoofed their UA past layer 2.
@@ -27,7 +27,7 @@
 /**
  * Returns true if the current browser context looks like a bot or
  * automation tool. Safe to call in SSR (returns true since there's no
- * real visitor in that context anyway — a server-rendered page
+ * real visitor in that context anyway - a server-rendered page
  * shouldn't be firing analytics).
  *
  * Wraps every check in try/catch so a hostile environment (frozen

package/dist/bot-detect.js

@@ -4,14 +4,14 @@
  * never fire a single network request.
  *
  * Defense in depth:
- *   1. This check       — catches Selenium / Puppeteer / curl / etc
+ *   1. This check       - catches Selenium / Puppeteer / curl / etc
  *                         BEFORE anything hits the wire. Saves bandwidth.
  *                         Can be bypassed by a determined attacker who
  *                         edits the bundled SDK.
- *   2. Server UA regex  — catches the same patterns plus legit crawlers
+ *   2. Server UA regex  - catches the same patterns plus legit crawlers
  *                         (Googlebot, FB crawler, etc). Server is
  *                         authoritative. Can't be bypassed.
- *   3. Cloudflare       — invisible browser-attestation challenge. Real
+ *   3. Cloudflare       - invisible browser-attestation challenge. Real
  *      Turnstile           browsers pass in 50-200ms; scripts that don't
  *                         run real JS can't pass it. Catches sophisticated
  *                         attackers who spoofed their UA past layer 2.
@@ -66,7 +66,7 @@ const BOT_DOC_ATTRS = ['webdriver', 'selenium', 'driver'];
 /**
  * Returns true if the current browser context looks like a bot or
  * automation tool. Safe to call in SSR (returns true since there's no
- * real visitor in that context anyway — a server-rendered page
+ * real visitor in that context anyway - a server-rendered page
  * shouldn't be firing analytics).
  *
  * Wraps every check in try/catch so a hostile environment (frozen
@@ -83,7 +83,7 @@ export function isLikelyBot() {
         const win = window;
         // Selenium / Puppeteer / Playwright signature on navigator.
         // Modern stealth plugins try to override this but the override
-        // is detectable too (the property descriptor looks wrong) — we
+        // is detectable too (the property descriptor looks wrong) - we
         // catch the easy case here and let Turnstile catch the rest.
         if (nav.webdriver === true)
             return true;
@@ -106,7 +106,7 @@ export function isLikelyBot() {
         }
         const ua = nav.userAgent.toLowerCase();
         // Substring match on the known automation tokens. We split into a
-        // single loop instead of one giant regex for readability — the cost
+        // single loop instead of one giant regex for readability - the cost
         // difference at <20 patterns is microseconds either way.
         for (const pattern of BOT_UA_PATTERNS) {
             if (ua.includes(pattern))