feat(analytics): record where paying customers actually came from

Adds first-party acquisition attribution and a sixteen-event funnel, written to
this deployment's own database and read back on /admin/growth. Nothing is sent
anywhere else, and the whole subsystem is off unless OPENFRAME_ENABLE_ANALYTICS
is set, so a self-hosted instance carries the tables empty and pays nothing.

The proxy gives a visitor an anonymous id and stores what brought them in two
first-party cookies; signup copies that onto the account and claims the events
the visitor produced before they had one, which is what joins the two halves of
the funnel. Recording happens where each step actually happens rather than in
the browser: an ad blocker cannot undercount landing views, and blocking rates
differ by channel, so an undercounted denominator would have made GitHub traffic
look like it converts better than it does.

Every event carries a dedupe key on a UNIQUE column, so "recorded exactly once"
is a property of the schema rather than of fifteen call sites. Subscription
events are derived by comparing the row being overwritten with the row being
written inside the existing Stripe sync, which makes them order-independent and
replay-safe.

The scoreboard reports step-to-step conversion with the denominator beside it,
and splits by source over a rolling 28-day window rather than a week: at this
volume a weekly per-source cell holds single digits, and a percentage computed
from three visits reads exactly as confidently as one computed from three
hundred.

"How did you hear about us?" is asked on the first onboarding screen, not on the
registration form. The number being measured is the signup conversion rate, and
a question added to that form would move it.
This commit is contained in:
yusufipk
2026-08-01 20:00:27 +03:00
parent 93e85683e9
commit 7ca5abd041
48 changed files with 3214 additions and 25 deletions
+365
View File
@@ -0,0 +1,365 @@
// The property the whole acquisition system rests on: every funnel event is
// recorded exactly once, against the right account, and nothing at all is
// recorded when the feature flag is off.
//
// The dedupe key is a UNIQUE column, so these tests are checking that each call
// site derives the right key. A key that varies when it should not shows up here
// as a duplicated row, which is the failure that would quietly inflate the
// scoreboard.
import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest';
import { db } from '@/lib/db';
import { POST as beacon } from '@/app/api/events/route';
import { POST as register } from '@/app/api/auth/register/route';
import { recordSubscriptionTransition } from '@/lib/analytics/billing-events';
import { recordSignupCompleted } from '@/lib/analytics/signup';
import { encodeFirstTouch, type FirstTouch } from '@/lib/analytics/cookies';
import { apiRequest, callRoute } from '../helpers/request';
import { signedOut } from '../helpers/session';
import { createUser } from '../factories';
const ANON_ID = 'a1b2c3d4e5f60718293a4b5c6d7e8f90';
const INVITE_CODE = 'test-invite';
const ORIGIN = 'http://localhost:3000';
const GITHUB_TOUCH: FirstTouch = {
channel: 'GITHUB',
utmSource: 'github',
utmMedium: 'readme',
utmCampaign: null,
referrerHost: 'github.com',
landingPath: '/',
};
function visitorCookies(anonymousId = ANON_ID, touch: FirstTouch = GITHUB_TOUCH) {
return { of_aid: anonymousId, of_ft: encodeFirstTouch(touch) };
}
function beaconRequest(options?: {
name?: string;
origin?: string | null;
cookies?: Record<string, string>;
}) {
const headers: Record<string, string> = {};
const origin = options?.origin === undefined ? ORIGIN : options.origin;
if (origin) headers.origin = origin;
return apiRequest('/api/events', {
body: { name: options?.name ?? 'cta_clicked' },
headers,
cookies: options?.cookies ?? visitorCookies(),
});
}
async function eventNames(): Promise<string[]> {
const rows = await db.analyticsEvent.findMany({ orderBy: { dedupeKey: 'asc' } });
return rows.map((row) => row.name);
}
beforeEach(() => {
signedOut();
vi.stubEnv('OPENFRAME_ENABLE_ANALYTICS', 'true');
});
afterEach(() => {
vi.unstubAllEnvs();
});
describe('POST /api/events', () => {
it('records a CTA click and the first touch behind it', async () => {
const response = await callRoute(beacon, beaconRequest());
expect(response.status).toBe(204);
const events = await db.analyticsEvent.findMany();
expect(events).toHaveLength(1);
expect(events[0]).toMatchObject({
name: 'CTA_CLICKED',
anonymousId: ANON_ID,
channel: 'GITHUB',
userId: null,
});
const touches = await db.acquisitionTouch.findMany();
expect(touches).toHaveLength(1);
expect(touches[0]).toMatchObject({
anonymousId: ANON_ID,
channel: 'GITHUB',
utmSource: 'github',
referrerHost: 'github.com',
});
});
it('records one event however many times the same visitor clicks', async () => {
await callRoute(beacon, beaconRequest());
await callRoute(beacon, beaconRequest());
await callRoute(beacon, beaconRequest());
expect(await db.analyticsEvent.count()).toBe(1);
});
it('counts two different visitors separately', async () => {
await callRoute(beacon, beaconRequest());
await callRoute(
beacon,
beaconRequest({ cookies: visitorCookies('f0e1d2c3b4a596877869504132231415') })
);
expect(await db.analyticsEvent.count()).toBe(2);
});
it('never keeps the first touch of a visitor who came back through another link', async () => {
await callRoute(beacon, beaconRequest());
await callRoute(
beacon,
beaconRequest({
cookies: visitorCookies(ANON_ID, { ...GITHUB_TOUCH, channel: 'GOOGLE', utmSource: null }),
})
);
const touches = await db.acquisitionTouch.findMany();
expect(touches).toHaveLength(1);
expect(touches[0]?.channel).toBe('GITHUB');
});
it('refuses to record an event name the beacon does not own', async () => {
// Without this the endpoint would let any anonymous caller write a payment
// into the funnel.
for (const name of ['subscription_started', 'signup_completed', 'SUBSCRIPTION_STARTED', '']) {
const response = await callRoute(beacon, beaconRequest({ name }));
expect(response.status, name).toBe(204);
}
expect(await db.analyticsEvent.count()).toBe(0);
});
it('ignores a cross-origin caller', async () => {
const response = await callRoute(beacon, beaconRequest({ origin: 'https://evil.example' }));
expect(response.status).toBe(204);
expect(await db.analyticsEvent.count()).toBe(0);
});
it('ignores a caller with no anonymous id cookie', async () => {
await callRoute(beacon, beaconRequest({ cookies: {} }));
expect(await db.analyticsEvent.count()).toBe(0);
expect(await db.acquisitionTouch.count()).toBe(0);
});
it('writes nothing at all when the flag is off', async () => {
vi.stubEnv('OPENFRAME_ENABLE_ANALYTICS', 'false');
const response = await callRoute(beacon, beaconRequest());
expect(response.status).toBe(204);
expect(await db.analyticsEvent.count()).toBe(0);
expect(await db.acquisitionTouch.count()).toBe(0);
});
});
describe('signup attribution', () => {
async function registerWithCookies(email: string) {
return callRoute(
register,
apiRequest('/api/auth/register', {
body: {
name: 'New User',
email,
password: 'correct horse battery',
inviteCode: INVITE_CODE,
},
cookies: visitorCookies(),
})
);
}
it('copies the first touch onto the account and records the signup once', async () => {
const response = await registerWithCookies('[email protected]');
expect(response.status).toBe(201);
const user = await db.user.findUniqueOrThrow({ where: { email: '[email protected]' } });
const acquisition = await db.userAcquisition.findUniqueOrThrow({
where: { userId: user.id },
});
expect(acquisition).toMatchObject({
channel: 'GITHUB',
utmSource: 'github',
utmMedium: 'readme',
referrerHost: 'github.com',
anonymousId: ANON_ID,
});
const signups = await db.analyticsEvent.findMany({ where: { name: 'SIGNUP_COMPLETED' } });
expect(signups).toHaveLength(1);
expect(signups[0]?.userId).toBe(user.id);
});
it('claims the events the visitor produced before they had an account', async () => {
await callRoute(beacon, beaconRequest());
await registerWithCookies('[email protected]');
const user = await db.user.findUniqueOrThrow({ where: { email: '[email protected]' } });
const click = await db.analyticsEvent.findFirstOrThrow({ where: { name: 'CTA_CLICKED' } });
// Without the backfill the click and the signup are two unrelated rows and
// no query can tell you which channel converted.
expect(click.userId).toBe(user.id);
});
it('records one signup even if the helper runs twice', async () => {
const user = await createUser();
await recordSignupCompleted({
userId: user.id,
visitor: { anonymousId: ANON_ID, firstTouch: GITHUB_TOUCH },
});
await recordSignupCompleted({
userId: user.id,
visitor: { anonymousId: ANON_ID, firstTouch: GITHUB_TOUCH },
});
expect(await db.analyticsEvent.count({ where: { name: 'SIGNUP_COMPLETED' } })).toBe(1);
expect(await db.userAcquisition.count({ where: { userId: user.id } })).toBe(1);
});
it('records no acquisition row when the flag is off', async () => {
vi.stubEnv('OPENFRAME_ENABLE_ANALYTICS', 'false');
const response = await registerWithCookies('[email protected]');
expect(response.status).toBe(201);
expect(await db.userAcquisition.count()).toBe(0);
expect(await db.analyticsEvent.count()).toBe(0);
});
});
describe('subscription transitions', () => {
const SUB = 'sub_test_1';
const periodEnd = new Date('2026-09-01T00:00:00.000Z');
async function transition(params: {
userId: string;
beforeStatus: 'FREE' | 'TRIALING' | 'ACTIVE' | 'CANCELED';
afterStatus: 'FREE' | 'TRIALING' | 'ACTIVE' | 'CANCELED';
beforeCancelAtPeriodEnd?: boolean;
afterCancelAtPeriodEnd?: boolean;
hadTrial?: boolean;
trialEndsAt?: Date | null;
}) {
await recordSubscriptionTransition({
userId: params.userId,
subscriptionId: SUB,
before: {
status: params.beforeStatus,
cancelAtPeriodEnd: params.beforeCancelAtPeriodEnd ?? false,
hadTrial: params.hadTrial ?? false,
},
after: {
status: params.afterStatus,
cancelAtPeriodEnd: params.afterCancelAtPeriodEnd ?? false,
trialEndsAt: params.trialEndsAt ?? null,
currentPeriodEnd: periodEnd,
},
});
}
it('records the trial once and the conversion to paid once', async () => {
const user = await createUser();
await transition({
userId: user.id,
beforeStatus: 'FREE',
afterStatus: 'TRIALING',
trialEndsAt: new Date('2026-08-15T00:00:00.000Z'),
});
// The same webhook arriving again, which Stripe does routinely.
await transition({
userId: user.id,
beforeStatus: 'FREE',
afterStatus: 'TRIALING',
trialEndsAt: new Date('2026-08-15T00:00:00.000Z'),
});
await transition({
userId: user.id,
beforeStatus: 'TRIALING',
afterStatus: 'ACTIVE',
hadTrial: true,
});
expect(await eventNames()).toEqual(['SUBSCRIPTION_STARTED', 'TRIAL_STARTED']);
});
it('does not record a second trial for an account that already had one', async () => {
const user = await createUser();
await transition({
userId: user.id,
beforeStatus: 'CANCELED',
afterStatus: 'TRIALING',
hadTrial: true,
trialEndsAt: new Date('2026-08-15T00:00:00.000Z'),
});
expect(await eventNames()).toEqual([]);
});
it('counts one cancellation for the flag and the status that follow each other', async () => {
const user = await createUser();
// The customer cancels in the portal: cancel_at_period_end flips on.
await transition({
userId: user.id,
beforeStatus: 'ACTIVE',
afterStatus: 'ACTIVE',
afterCancelAtPeriodEnd: true,
});
// The term ends weeks later and Stripe marks the subscription canceled.
await transition({
userId: user.id,
beforeStatus: 'ACTIVE',
afterStatus: 'CANCELED',
beforeCancelAtPeriodEnd: true,
});
expect(await db.analyticsEvent.count({ where: { name: 'SUBSCRIPTION_CANCELED' } })).toBe(1);
});
it('records a reactivation when the customer changes their mind', async () => {
const user = await createUser();
await transition({
userId: user.id,
beforeStatus: 'ACTIVE',
afterStatus: 'ACTIVE',
afterCancelAtPeriodEnd: true,
});
await transition({
userId: user.id,
beforeStatus: 'ACTIVE',
afterStatus: 'ACTIVE',
beforeCancelAtPeriodEnd: true,
afterCancelAtPeriodEnd: false,
});
expect(await eventNames()).toEqual(['SUBSCRIPTION_CANCELED', 'SUBSCRIPTION_REACTIVATED']);
});
it('records nothing when nothing changed', async () => {
const user = await createUser();
await transition({ userId: user.id, beforeStatus: 'ACTIVE', afterStatus: 'ACTIVE' });
expect(await eventNames()).toEqual([]);
});
it('writes nothing when the flag is off', async () => {
vi.stubEnv('OPENFRAME_ENABLE_ANALYTICS', 'false');
const user = await createUser();
await transition({ userId: user.id, beforeStatus: 'FREE', afterStatus: 'ACTIVE' });
expect(await db.analyticsEvent.count()).toBe(0);
});
});
+155
View File
@@ -0,0 +1,155 @@
// Exercises the scoreboard queries against a real database.
//
// These are raw SQL: a date_trunc grouping, a COALESCE across two tables and a
// filtered left join. None of that is checked by the type system, so a seeded
// week with known counts is the only thing standing between a renamed column and
// a growth page that renders zeros forever.
import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest';
import type { AcquisitionChannel, AnalyticsEventName } from '@prisma/client';
import { db } from '@/lib/db';
import { AT_RISK_SILENT_DAYS, getScoreboard } from '@/lib/analytics/scoreboard';
import { createUser } from '../factories';
function daysAgo(days: number): Date {
const date = new Date();
date.setUTCDate(date.getUTCDate() - days);
return date;
}
let sequence = 0;
async function seedEvent(params: {
name: AnalyticsEventName;
occurredAt: Date;
userId?: string;
anonymousId?: string;
channel?: AcquisitionChannel;
}) {
sequence += 1;
await db.analyticsEvent.create({
data: {
name: params.name,
dedupeKey: `${params.name}:seed-${sequence}`,
occurredAt: params.occurredAt,
userId: params.userId ?? null,
anonymousId: params.anonymousId ?? null,
channel: params.channel ?? null,
},
});
}
beforeEach(() => {
sequence = 0;
vi.stubEnv('OPENFRAME_ENABLE_ANALYTICS', 'true');
});
afterEach(() => {
vi.unstubAllEnvs();
});
describe('getScoreboard', () => {
it('returns an empty week for every week in the window when nothing happened', async () => {
const scoreboard = await getScoreboard({ weeks: 4 });
expect(scoreboard.weeks).toHaveLength(4);
expect(scoreboard.weeks.every((week) => week.visitors === 0)).toBe(true);
expect(scoreboard.channels).toEqual([]);
expect(scoreboard.paidAccounts).toEqual([]);
});
it('counts a returning visitor once per week, not once per visit', async () => {
// Landing views are deduped per visitor per day, so the same person on three
// days is three rows. Weekly visitors is a distinct count over the id.
for (const days of [1, 2, 3]) {
await seedEvent({
name: 'LANDING_VIEW',
occurredAt: daysAgo(days),
anonymousId: 'visitor-one',
channel: 'GITHUB',
});
}
await seedEvent({
name: 'LANDING_VIEW',
occurredAt: daysAgo(1),
anonymousId: 'visitor-two',
channel: 'GOOGLE',
});
const scoreboard = await getScoreboard({ weeks: 2 });
const total = scoreboard.weeks.reduce((sum, week) => sum + week.visitors, 0);
expect(total).toBe(2);
});
it('reads a signed-up visitor through the channel on their account', async () => {
const user = await createUser();
await db.userAcquisition.create({
data: { userId: user.id, channel: 'YOUTUBE', anonymousId: 'visitor-three' },
});
// The visitor event carries GITHUB from the cookie, but the account says
// YouTube. The account wins, so correcting a channel corrects its history.
await seedEvent({
name: 'LANDING_VIEW',
occurredAt: daysAgo(2),
anonymousId: 'visitor-three',
channel: 'GITHUB',
userId: user.id,
});
await seedEvent({
name: 'SIGNUP_COMPLETED',
occurredAt: daysAgo(2),
userId: user.id,
anonymousId: 'visitor-three',
});
const scoreboard = await getScoreboard({ weeks: 2 });
const youtube = scoreboard.channels.find((row) => row.channel === 'YOUTUBE');
expect(youtube).toMatchObject({ visitors: 1, signups: 1 });
expect(scoreboard.channels.find((row) => row.channel === 'GITHUB')).toBeUndefined();
});
it('carries subscriptions started before the window into the running total', async () => {
await seedEvent({ name: 'SUBSCRIPTION_STARTED', occurredAt: daysAgo(120) });
await seedEvent({ name: 'SUBSCRIPTION_STARTED', occurredAt: daysAgo(3) });
await seedEvent({ name: 'SUBSCRIPTION_CANCELED', occurredAt: daysAgo(3) });
const scoreboard = await getScoreboard({ weeks: 2 });
const last = scoreboard.weeks[scoreboard.weeks.length - 1];
// One from before the window, plus one started and one canceled inside it.
expect(last?.activePaid).toBe(1);
expect(last?.newPaid).toBe(1);
expect(last?.canceled).toBe(1);
});
it('flags a paid account that has produced nothing recently', async () => {
const busy = await createUser({ subscriptionStatus: 'ACTIVE' });
const silent = await createUser({ subscriptionStatus: 'ACTIVE' });
const trialing = await createUser({ subscriptionStatus: 'TRIALING' });
await createUser({ subscriptionStatus: 'FREE' });
await seedEvent({ name: 'VIDEO_ADDED', occurredAt: daysAgo(2), userId: busy.id });
await seedEvent({ name: 'SHARE_LINK_CREATED', occurredAt: daysAgo(20), userId: busy.id });
await seedEvent({
name: 'VIDEO_ADDED',
occurredAt: daysAgo(AT_RISK_SILENT_DAYS + 5),
userId: silent.id,
});
// A signup is not a value event, so it must not clear the risk flag.
await seedEvent({ name: 'SIGNUP_COMPLETED', occurredAt: daysAgo(1), userId: trialing.id });
const scoreboard = await getScoreboard({ weeks: 4 });
const ids = scoreboard.paidAccounts.map((row) => row.userId).sort();
const atRisk = scoreboard.atRisk.map((row) => row.userId).sort();
expect(ids).toEqual([busy.id, silent.id, trialing.id].sort());
expect(atRisk).toEqual([silent.id, trialing.id].sort());
const busyRow = scoreboard.paidAccounts.find((row) => row.userId === busy.id);
expect(busyRow?.valueEvents7).toBe(1);
expect(busyRow?.valueEvents30).toBe(2);
});
});
+23 -1
View File
@@ -44,6 +44,7 @@ import {
} from '../factories';
import * as adminFeedbackRoute from '@/app/api/admin/feedback/[feedbackId]/route';
import * as adminGrowthRoute from '@/app/api/admin/growth/route';
import * as adminRefreshR2Route from '@/app/api/admin/stats/refresh-r2/route';
import * as approvalCancelRoute from '@/app/api/approvals/[requestId]/cancel/route';
import * as approvalDecisionRoute from '@/app/api/approvals/[requestId]/decision/route';
@@ -54,6 +55,7 @@ import * as commentRoute from '@/app/api/comments/[commentId]/route';
import * as feedbackRoute from '@/app/api/feedback/route';
import * as feedbackUploadRoute from '@/app/api/feedback/upload/route';
import * as onboardingCompleteRoute from '@/app/api/onboarding/complete/route';
import * as onboardingSourceRoute from '@/app/api/onboarding/source/route';
import * as approvalCandidatesRoute from '@/app/api/projects/[projectId]/approval-candidates/route';
import * as projectDownloadRoute from '@/app/api/projects/[projectId]/download/route';
import * as projectInvitationRoute from '@/app/api/projects/[projectId]/members/invitations/[invitationId]/route';
@@ -143,7 +145,7 @@ vi.mock('@/lib/r2', async (importOriginal) => {
// The count guard
// ---------------------------------------------------------------------------
// Bump this only together with a new entry in ROUTE_CASES or in PUBLIC_ROUTES.
const EXPECTED_ROUTE_MODULE_COUNT = 60;
const EXPECTED_ROUTE_MODULE_COUNT = 63;
/**
* Routes that are public by design, and why. Everything else must reject an
@@ -176,6 +178,15 @@ const PUBLIC_ROUTES: ReadonlyMap<string, string> = new Map([
// so it cannot be used to enumerate accounts.
'resend of the verification email, for users who cannot sign in yet',
],
[
'events/route.ts',
// The CTA-click beacon. Its whole job is to hear from visitors who have no
// account yet, so a session cannot be the guard. It is bounded three ways
// instead: same-origin only, IP rate limited, and it accepts exactly one
// event name, so nothing a caller sends can forge a signup or a payment.
// Covered in tests/api/analytics-events.test.ts.
'anonymous CTA beacon, restricted to one event name and to same-origin callers',
],
[
'stripe/webhook/route.ts',
// Called by Stripe, not by a browser. Authenticated by the HMAC signature
@@ -350,6 +361,11 @@ const ROUTE_CASES: readonly RouteCase[] = [
url: (f) => `/api/admin/feedback/${f.feedbackId}`,
params: (f) => ({ feedbackId: f.feedbackId }),
},
{
file: 'admin/growth/route.ts',
module: adminGrowthRoute,
url: () => '/api/admin/growth',
},
{
file: 'admin/stats/refresh-r2/route.ts',
module: adminRefreshR2Route,
@@ -405,6 +421,12 @@ const ROUTE_CASES: readonly RouteCase[] = [
module: onboardingCompleteRoute,
url: () => '/api/onboarding/complete',
},
{
file: 'onboarding/source/route.ts',
module: onboardingSourceRoute,
url: () => '/api/onboarding/source',
body: { source: 'GITHUB' },
},
{
file: 'projects/[projectId]/approval-candidates/route.ts',
module: approvalCandidatesRoute,
+1
View File
@@ -66,6 +66,7 @@ const REVIEWED_MIGRATIONS = [
'20260613120000_add_r2_video_asset_provider',
'20260614160000_add_project_allow_downloads',
'20260627140000_add_video_upload_multipart_id',
'20260801120000_add_acquisition_analytics',
];
/** Objects POST_PUSH_SQL must have produced. Verified after it runs. */
+130
View File
@@ -0,0 +1,130 @@
import { describe, it, expect } from 'vitest';
import {
classifyChannel,
extractReferrerHost,
normalizeHost,
sanitizeLandingPath,
sanitizeTag,
} from '@/lib/analytics/channel';
// Every expected value below is written by hand. Deriving them from the lookup
// tables in the module would mean deleting an entry from a table also deletes
// its own test case.
describe('sanitizeTag', () => {
it('lowercases and trims', () => {
expect(sanitizeTag(' GitHub ')).toBe('github');
});
it('rejects a tag carrying markup or control characters', () => {
expect(sanitizeTag('<script>')).toBeNull();
expect(sanitizeTag('news\nletter')).toBeNull();
});
it('caps the length at 64 characters', () => {
expect(sanitizeTag('a'.repeat(200))).toHaveLength(64);
});
it('treats an empty or non-string value as absent', () => {
expect(sanitizeTag(' ')).toBeNull();
expect(sanitizeTag(null)).toBeNull();
expect(sanitizeTag(undefined)).toBeNull();
});
});
describe('normalizeHost', () => {
it('drops the www prefix and the port', () => {
expect(normalizeHost('WWW.GitHub.com:443')).toBe('github.com');
});
it('rejects a value that is not a host', () => {
expect(normalizeHost('not a host')).toBeNull();
expect(normalizeHost('https://github.com')).toBeNull();
});
});
describe('extractReferrerHost', () => {
it('returns the host of a full referrer URL', () => {
expect(extractReferrerHost('https://news.ycombinator.com/item?id=1')).toBe(
'news.ycombinator.com'
);
});
it('drops the path and query, so a share token cannot be stored', () => {
expect(extractReferrerHost('https://example.com/share/[email protected]')).toBe(
'example.com'
);
});
it('ignores our own host, because that is a click inside the site', () => {
expect(extractReferrerHost('https://open-frame.net/pricing', 'open-frame.net')).toBeNull();
expect(extractReferrerHost('https://www.open-frame.net/pricing', 'open-frame.net')).toBeNull();
});
it('returns null for a missing or unparseable referrer', () => {
expect(extractReferrerHost(null)).toBeNull();
expect(extractReferrerHost('android-app://com.example')).toBeNull();
});
});
describe('sanitizeLandingPath', () => {
it('keeps the path and drops the query string', () => {
expect(sanitizeLandingPath('/vs/frameio')).toBe('/vs/frameio');
});
it('falls back to / for anything that is not a path', () => {
expect(sanitizeLandingPath('https://open-frame.net/x')).toBe('/');
expect(sanitizeLandingPath(null)).toBe('/');
});
});
describe('classifyChannel', () => {
it('is DIRECT with no tags and no referrer', () => {
expect(classifyChannel({})).toBe('DIRECT');
});
it('reads the referring host when there are no tags', () => {
expect(classifyChannel({ referrerHost: 'github.com' })).toBe('GITHUB');
expect(classifyChannel({ referrerHost: 'gist.github.com' })).toBe('GITHUB');
expect(classifyChannel({ referrerHost: 'youtu.be' })).toBe('YOUTUBE');
expect(classifyChannel({ referrerHost: 'www.producthunt.com' })).toBe('REVIEW_LINK');
expect(classifyChannel({ referrerHost: 'news.ycombinator.com' })).toBe('COMMUNITY');
});
it('treats every Google country domain as search', () => {
expect(classifyChannel({ referrerHost: 'google.com' })).toBe('GOOGLE');
expect(classifyChannel({ referrerHost: 'google.com.tr' })).toBe('GOOGLE');
expect(classifyChannel({ referrerHost: 'news.google.co.uk' })).toBe('GOOGLE');
});
it('does not mistake a lookalike domain for the real one', () => {
expect(classifyChannel({ referrerHost: 'notgithub.com' })).toBe('REFERRAL');
expect(classifyChannel({ referrerHost: 'google.com.evil.example' })).toBe('REFERRAL');
});
it('counts an unrecognised site that links to us as a referral', () => {
expect(classifyChannel({ referrerHost: 'someblog.example' })).toBe('REFERRAL');
});
it('prefers an explicit utm_source over the referring host', () => {
expect(classifyChannel({ utmSource: 'youtube', referrerHost: 'google.com' })).toBe('YOUTUBE');
});
it('reads a utm_source that was written as a domain', () => {
expect(classifyChannel({ utmSource: 'github.com' })).toBe('GITHUB');
});
it('files a tagged campaign we do not recognise as OTHER, not DIRECT', () => {
expect(classifyChannel({ utmSource: 'conference-flyer' })).toBe('OTHER');
});
it('lets the medium that names the motion win over the source that names the place', () => {
expect(classifyChannel({ utmSource: 'linkedin', utmMedium: 'outbound' })).toBe('OUTBOUND');
expect(classifyChannel({ utmSource: 'github', utmMedium: 'email' })).toBe('OUTBOUND');
expect(classifyChannel({ utmSource: 'someone', utmMedium: 'referral' })).toBe('REFERRAL');
});
it('ignores a source that fails sanitizing and falls back to the referrer', () => {
expect(classifyChannel({ utmSource: '<script>', referrerHost: 'youtube.com' })).toBe('YOUTUBE');
});
});
+137
View File
@@ -0,0 +1,137 @@
import { describe, it, expect } from 'vitest';
import {
decodeFirstTouch,
encodeFirstTouch,
generateAnonymousId,
isAcquisitionChannel,
isValidAnonymousId,
type FirstTouch,
} from '@/lib/analytics/cookies';
import { isCountableDocumentRequest, isLikelyBot } from '@/lib/analytics/bots';
const TOUCH: FirstTouch = {
channel: 'GITHUB',
utmSource: 'github',
utmMedium: 'readme',
utmCampaign: 'launch',
referrerHost: 'github.com',
landingPath: '/vs/frameio',
};
describe('first touch cookie', () => {
it('round-trips every field', () => {
expect(decodeFirstTouch(encodeFirstTouch(TOUCH))).toEqual(TOUCH);
});
it('round-trips a touch with nothing but a channel', () => {
const bare: FirstTouch = {
channel: 'DIRECT',
utmSource: null,
utmMedium: null,
utmCampaign: null,
referrerHost: null,
landingPath: '/',
};
expect(decodeFirstTouch(encodeFirstTouch(bare))).toEqual(bare);
});
it('rejects a hand-edited cookie carrying an unknown channel', () => {
const forged = encodeURIComponent(JSON.stringify({ c: 'INVESTOR_DEMO', p: '/' }));
expect(decodeFirstTouch(forged)).toBeNull();
});
it('re-sanitizes fields rather than trusting the cookie', () => {
const forged = encodeURIComponent(
JSON.stringify({ c: 'DIRECT', p: '/x', s: '<script>alert(1)</script>', r: 'not a host' })
);
const decoded = decodeFirstTouch(forged);
expect(decoded?.utmSource).toBeNull();
expect(decoded?.referrerHost).toBeNull();
});
it('returns null for garbage and for an absent cookie', () => {
expect(decodeFirstTouch('%%%not-json%%%')).toBeNull();
expect(decodeFirstTouch(null)).toBeNull();
expect(decodeFirstTouch(encodeURIComponent(JSON.stringify(['DIRECT'])))).toBeNull();
});
});
describe('anonymous id', () => {
it('generates an id the validator accepts', () => {
expect(isValidAnonymousId(generateAnonymousId())).toBe(true);
});
it('generates a different id each time', () => {
expect(generateAnonymousId()).not.toBe(generateAnonymousId());
});
it('rejects an id that is too short, too long or not base36', () => {
expect(isValidAnonymousId('abc')).toBe(false);
expect(isValidAnonymousId('a'.repeat(65))).toBe(false);
expect(isValidAnonymousId('ABCDEF0123456789ABCD')).toBe(false);
expect(isValidAnonymousId(undefined)).toBe(false);
});
});
describe('isAcquisitionChannel', () => {
it('accepts the nine buckets and nothing else', () => {
expect(isAcquisitionChannel('REVIEW_LINK')).toBe(true);
expect(isAcquisitionChannel('direct')).toBe(false);
expect(isAcquisitionChannel(7)).toBe(false);
});
});
describe('isLikelyBot', () => {
it('passes a real browser through', () => {
expect(
isLikelyBot(
'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126 Safari/537.36'
)
).toBe(false);
});
it('catches crawlers, link previewers and scripts', () => {
expect(isLikelyBot('Googlebot/2.1 (+http://www.google.com/bot.html)')).toBe(true);
expect(isLikelyBot('facebookexternalhit/1.1')).toBe(true);
expect(isLikelyBot('curl/8.4.0')).toBe(true);
expect(isLikelyBot('python-requests/2.31.0')).toBe(true);
expect(isLikelyBot('HeadlessChrome/120.0.0.0')).toBe(true);
});
it('treats a missing user agent as a bot', () => {
expect(isLikelyBot('')).toBe(true);
expect(isLikelyBot(null)).toBe(true);
});
});
describe('isCountableDocumentRequest', () => {
it('counts a real page load', () => {
expect(isCountableDocumentRequest(new Headers({ 'sec-fetch-dest': 'document' }))).toBe(true);
});
it('does not count a prefetch of the register page', () => {
expect(
isCountableDocumentRequest(
new Headers({ 'sec-fetch-dest': 'document', 'sec-purpose': 'prefetch;prerender' })
)
).toBe(false);
expect(
isCountableDocumentRequest(
new Headers({ 'sec-fetch-dest': 'document', 'next-router-prefetch': '1' })
)
).toBe(false);
});
it('does not count an RSC navigation or a subresource', () => {
expect(
isCountableDocumentRequest(new Headers({ 'sec-fetch-dest': 'document', rsc: '1' }))
).toBe(false);
expect(isCountableDocumentRequest(new Headers({ 'sec-fetch-dest': 'image' }))).toBe(false);
});
it('falls back to the accept header when fetch metadata is missing', () => {
expect(isCountableDocumentRequest(new Headers({ accept: 'text/html,*/*' }))).toBe(true);
expect(isCountableDocumentRequest(new Headers({ accept: 'application/json' }))).toBe(false);
expect(isCountableDocumentRequest(new Headers())).toBe(false);
});
});
@@ -0,0 +1,36 @@
import { describe, it, expect } from 'vitest';
import { conversionRates } from '@/lib/analytics/scoreboard';
const WEEK = {
visitors: 200,
signups: 20,
firstVideo: 10,
shareLinks: 5,
externalFeedback: 1,
trials: 4,
newPaid: 1,
};
describe('conversionRates', () => {
it('divides each step by the one above it', () => {
const rates = conversionRates(WEEK);
expect(rates.visitorToSignup).toBeCloseTo(0.1);
expect(rates.signupToFirstVideo).toBeCloseTo(0.5);
expect(rates.firstVideoToShare).toBeCloseTo(0.5);
expect(rates.shareToFeedback).toBeCloseTo(0.2);
expect(rates.trialToPaid).toBeCloseTo(0.25);
});
it('returns null rather than zero when the denominator is zero', () => {
const rates = conversionRates({ ...WEEK, visitors: 0, trials: 0 });
expect(rates.visitorToSignup).toBeNull();
expect(rates.trialToPaid).toBeNull();
// "nobody arrived" and "nobody converted" are different facts, and the rest
// of the funnel still has to report normally.
expect(rates.signupToFirstVideo).toBeCloseTo(0.5);
});
it('reports a step where nobody converted as zero, not as missing', () => {
expect(conversionRates({ ...WEEK, newPaid: 0 }).trialToPaid).toBe(0);
});
});
+163
View File
@@ -0,0 +1,163 @@
// The proxy is where a visitor gets an identity, and it is the only place that
// can: it runs on the edge, before the page, on every document request.
//
// The load-bearing detail below is that the id is written to the *request* as
// well as the response. A cookie set only on the response is invisible to the
// page rendering that same request, so the very first landing view, the one
// carrying the campaign tags that brought the visitor, would go unrecorded.
import { describe, it, expect, afterEach, vi } from 'vitest';
import { NextRequest } from 'next/server';
import { proxy } from '@/proxy';
import { ANONYMOUS_ID_COOKIE, FIRST_TOUCH_COOKIE, decodeFirstTouch } from '@/lib/analytics/cookies';
const BROWSER_UA =
'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126 Safari/537.36';
function documentRequest(
url: string,
init?: { headers?: Record<string, string>; cookies?: Record<string, string> }
) {
const headers = new Headers({
'user-agent': BROWSER_UA,
'sec-fetch-dest': 'document',
...init?.headers,
});
const cookies = Object.entries(init?.cookies ?? {});
if (cookies.length > 0) {
headers.set('cookie', cookies.map(([name, value]) => `${name}=${value}`).join('; '));
}
return new NextRequest(new URL(url), { headers });
}
afterEach(() => {
vi.unstubAllEnvs();
});
describe('proxy', () => {
it('always sets the content security policy', () => {
vi.stubEnv('OPENFRAME_ENABLE_ANALYTICS', 'false');
const response = proxy(documentRequest('https://open-frame.net/'));
expect(response.headers.get('Content-Security-Policy')).toContain("default-src 'self'");
});
it('sets no acquisition cookie at all when the flag is off', () => {
vi.stubEnv('OPENFRAME_ENABLE_ANALYTICS', 'false');
const response = proxy(documentRequest('https://open-frame.net/?utm_source=github'));
expect(response.cookies.get(ANONYMOUS_ID_COOKIE)).toBeUndefined();
expect(response.cookies.get(FIRST_TOUCH_COOKIE)).toBeUndefined();
});
it('gives a new visitor an id and stores what brought them', () => {
vi.stubEnv('OPENFRAME_ENABLE_ANALYTICS', 'true');
const request = documentRequest(
'https://open-frame.net/?utm_source=youtube&utm_medium=video&utm_campaign=launch'
);
const response = proxy(request);
const id = response.cookies.get(ANONYMOUS_ID_COOKIE);
expect(id?.value).toMatch(/^[a-z0-9]{32}$/);
expect(id?.httpOnly).toBe(true);
expect(id?.sameSite).toBe('lax');
expect(id?.secure).toBe(true);
const touch = decodeFirstTouch(response.cookies.get(FIRST_TOUCH_COOKIE)?.value);
expect(touch).toEqual({
channel: 'YOUTUBE',
utmSource: 'youtube',
utmMedium: 'video',
utmCampaign: 'launch',
referrerHost: null,
landingPath: '/',
});
// The page rendering this same request has to be able to read both.
expect(request.cookies.get(ANONYMOUS_ID_COOKIE)?.value).toBe(id?.value);
expect(request.cookies.get(FIRST_TOUCH_COOKIE)?.value).toBeDefined();
});
it('classifies a visit that only carries a referrer', () => {
vi.stubEnv('OPENFRAME_ENABLE_ANALYTICS', 'true');
const response = proxy(
documentRequest('https://open-frame.net/vs/frameio', {
headers: { referer: 'https://github.com/yusufipk/OpenFrame' },
})
);
expect(decodeFirstTouch(response.cookies.get(FIRST_TOUCH_COOKIE)?.value)).toMatchObject({
channel: 'GITHUB',
referrerHost: 'github.com',
landingPath: '/vs/frameio',
});
});
it('does not overwrite the first touch of a returning visitor', () => {
vi.stubEnv('OPENFRAME_ENABLE_ANALYTICS', 'true');
const existingId = 'a1b2c3d4e5f60718293a4b5c6d7e8f90';
const response = proxy(
documentRequest('https://open-frame.net/?utm_source=google', {
cookies: { [ANONYMOUS_ID_COOKIE]: existingId, [FIRST_TOUCH_COOKIE]: 'anything' },
})
);
expect(response.cookies.get(ANONYMOUS_ID_COOKIE)).toBeUndefined();
expect(response.cookies.get(FIRST_TOUCH_COOKIE)).toBeUndefined();
});
it('replaces an id that does not look like one we issued', () => {
vi.stubEnv('OPENFRAME_ENABLE_ANALYTICS', 'true');
const response = proxy(
documentRequest('https://open-frame.net/', {
cookies: { [ANONYMOUS_ID_COOKIE]: 'nope' },
})
);
expect(response.cookies.get(ANONYMOUS_ID_COOKIE)?.value).toMatch(/^[a-z0-9]{32}$/);
});
it('ignores crawlers, so they never enter the visitor count', () => {
vi.stubEnv('OPENFRAME_ENABLE_ANALYTICS', 'true');
const response = proxy(
documentRequest('https://open-frame.net/', {
headers: { 'user-agent': 'Googlebot/2.1 (+http://www.google.com/bot.html)' },
})
);
expect(response.cookies.get(ANONYMOUS_ID_COOKIE)).toBeUndefined();
});
it('ignores a prefetch and an API call', () => {
vi.stubEnv('OPENFRAME_ENABLE_ANALYTICS', 'true');
const prefetch = proxy(
documentRequest('https://open-frame.net/register', {
headers: { 'next-router-prefetch': '1' },
})
);
const api = proxy(
documentRequest('https://open-frame.net/api/projects', {
headers: { 'sec-fetch-dest': 'empty' },
})
);
expect(prefetch.cookies.get(ANONYMOUS_ID_COOKIE)).toBeUndefined();
expect(api.cookies.get(ANONYMOUS_ID_COOKIE)).toBeUndefined();
});
it('leaves the cookie insecure on plain http, so local development works', () => {
vi.stubEnv('OPENFRAME_ENABLE_ANALYTICS', 'true');
const response = proxy(documentRequest('http://localhost:3000/'));
expect(response.cookies.get(ANONYMOUS_ID_COOKIE)?.secure).toBe(false);
});
});