mirror of
https://github.com/yusufipk/OpenFrame.git
synced 2026-09-11 09:36:08 +00:00
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:
@@ -2,6 +2,7 @@
|
||||
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { CtaLink } from '@/components/marketing/cta-link';
|
||||
import { MarketingCompareLinks } from '@/components/marketing/marketing-compare-links';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { gsap } from 'gsap';
|
||||
@@ -258,13 +259,13 @@ export function LandingPage({ isLoggedIn }: LandingPageProps) {
|
||||
data-hero-copy
|
||||
className="mx-auto flex max-w-md flex-col items-center justify-center gap-3"
|
||||
>
|
||||
<Link
|
||||
<CtaLink
|
||||
href={hostedCtaHref}
|
||||
className="group relative isolate inline-flex h-12 min-w-max items-center justify-center overflow-hidden border border-primary bg-primary px-10 text-sm font-medium whitespace-nowrap text-primary-foreground transition-transform duration-300 hover:scale-[1.02]"
|
||||
>
|
||||
Start free trial
|
||||
<MoveRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</Link>
|
||||
</CtaLink>
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
7-day free trial · Flat $10/mo — no per-seat fees · No client accounts
|
||||
@@ -717,12 +718,12 @@ export function LandingPage({ isLoggedIn }: LandingPageProps) {
|
||||
Need more storage? Add 100 GB for $5/mo.
|
||||
</p>
|
||||
|
||||
<Link
|
||||
<CtaLink
|
||||
href={hostedCtaHref}
|
||||
className="mt-auto group relative isolate inline-flex h-12 w-full items-center justify-center overflow-hidden bg-[#06b6d4] font-medium text-black transition-colors hover:bg-[#06b6d4]/90 text-sm"
|
||||
>
|
||||
Start free trial
|
||||
</Link>
|
||||
</CtaLink>
|
||||
</div>
|
||||
|
||||
{/* Card 2: Fair Source (Self-hosted) */}
|
||||
@@ -901,12 +902,12 @@ export function LandingPage({ isLoggedIn }: LandingPageProps) {
|
||||
Your first review link takes minutes.
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
<CtaLink
|
||||
href={hostedCtaHref}
|
||||
className="group relative isolate inline-flex h-12 min-w-max items-center justify-center overflow-hidden border border-primary bg-primary px-10 text-sm font-medium whitespace-nowrap text-primary-foreground transition-transform duration-300 hover:scale-[1.02] md:min-w-[240px]"
|
||||
>
|
||||
Start free trial
|
||||
</Link>
|
||||
</CtaLink>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import Link from 'next/link';
|
||||
import { ArrowRight, Github, MoveRight } from 'lucide-react';
|
||||
import { CtaLink } from '@/components/marketing/cta-link';
|
||||
import { FeatureComparisonTable } from '@/components/marketing/feature-comparison-table';
|
||||
import { MarketingFooter } from '@/components/marketing/marketing-footer';
|
||||
import { MarketingHeader } from '@/components/marketing/marketing-header';
|
||||
@@ -41,13 +42,13 @@ export function ComparisonPage({ page, isLoggedIn }: ComparisonPageProps) {
|
||||
$10/month hosted plan covers your whole team and every client reviewer link.
|
||||
</p>
|
||||
<div className="mt-8 flex flex-col gap-3 sm:flex-row">
|
||||
<Link
|
||||
<CtaLink
|
||||
href={hostedCtaHref}
|
||||
className="group relative isolate inline-flex h-12 items-center justify-center overflow-hidden border border-primary bg-primary px-8 text-sm font-medium text-primary-foreground transition-transform duration-300 hover:scale-[1.02]"
|
||||
>
|
||||
Start free trial
|
||||
<MoveRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</Link>
|
||||
</CtaLink>
|
||||
<a
|
||||
href={seoConfig.githubUrl}
|
||||
target="_blank"
|
||||
@@ -199,12 +200,12 @@ export function ComparisonPage({ page, isLoggedIn }: ComparisonPageProps) {
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 sm:flex-row">
|
||||
<Link
|
||||
<CtaLink
|
||||
href={hostedCtaHref}
|
||||
className="inline-flex h-12 items-center justify-center border border-primary bg-primary px-8 text-sm font-medium text-primary-foreground"
|
||||
>
|
||||
Start free trial
|
||||
</Link>
|
||||
</CtaLink>
|
||||
<a
|
||||
href={seoConfig.githubUrl}
|
||||
target="_blank"
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { trackCtaClick } from '@/lib/client/track';
|
||||
|
||||
interface CtaLinkProps {
|
||||
href: string;
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* A marketing call to action that reports the click.
|
||||
*
|
||||
* Only the signup CTA counts. The same button reads "Start free trial" and
|
||||
* points at `/dashboard` once you are signed in, and an existing customer
|
||||
* clicking through to their own dashboard is not a step in the acquisition
|
||||
* funnel.
|
||||
*/
|
||||
export function CtaLink({ href, className, children }: CtaLinkProps) {
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
className={className}
|
||||
onClick={href === '/register' ? trackCtaClick : undefined}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user