Michael Freno
9d4865306c
Build waitlist landing page with Solid.js (hero, features, tier comparison, waitlist signup form, blog preview, footer). Create waitlist signup and blog API endpoints in Fastify. Add WaitlistEntry and BlogPost models to Prisma schema. Create analytics hooks for GA4 and Mixpanel tracking. Fix pre-existing Prisma schema issue (AnalysisJob relation missing User field). - Landing page: responsive Solid.js app with hero, 6 feature cards, 3-tier pricing comparison table, blog preview, and full waitlist signup form with interest tier selection - API: POST /api/waitlist/signup, GET /api/waitlist/count, GET /api/blog, GET /api/blog/:slug, CRUD /api/admin/blog - DB models: WaitlistEntry (with UTM params, conversion tracking, source), BlogPost (with tags, view count, publish scheduling) - Analytics: useAnalytics hook with initAnalytics(), trackEvent(), trackWaitlistSignup(), trackPageView() — GA4 and Mixpanel dual-tracking - Blog: listing, detail, and admin CRUD routes; seed.ts with 3 starter articles - Fix: AnalysisJob.analysisJobId missing @unique constraint, missing analysisJobs[] on User model Delegated to CMO: FRE-5280 (GA4 config), FRE-5281 (Mixpanel config), FRE-5282 (email marketing platform) Co-Authored-By: Paperclip <noreply@paperclip.ing>
77 lines
2.1 KiB
TypeScript
77 lines
2.1 KiB
TypeScript
type EventParams = Record<string, string | number | boolean | undefined>;
|
|
|
|
const GA_MEASUREMENT_ID = import.meta.env.VITE_GA_MEASUREMENT_ID as string | undefined;
|
|
const MIXPANEL_TOKEN = import.meta.env.VITE_MIXPANEL_TOKEN as string | undefined;
|
|
|
|
declare global {
|
|
interface Window {
|
|
gtag?: (command: string, target: string, params?: EventParams) => void;
|
|
mixpanel?: { track: (event: string, params?: EventParams) => void };
|
|
dataLayer?: unknown[];
|
|
}
|
|
}
|
|
|
|
function initGA() {
|
|
if (!GA_MEASUREMENT_ID || typeof window === 'undefined') return;
|
|
if (window.gtag) return;
|
|
|
|
const script = document.createElement('script');
|
|
script.async = true;
|
|
script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`;
|
|
document.head.appendChild(script);
|
|
|
|
window.dataLayer = window.dataLayer || [];
|
|
window.gtag = function gtag() {
|
|
window.dataLayer!.push(arguments);
|
|
};
|
|
window.gtag('js', new Date());
|
|
window.gtag('config', GA_MEASUREMENT_ID);
|
|
}
|
|
|
|
function initMixpanel() {
|
|
if (!MIXPANEL_TOKEN || typeof window === 'undefined') return;
|
|
if (window.mixpanel) return;
|
|
|
|
const script = document.createElement('script');
|
|
script.async = true;
|
|
script.src = 'https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js';
|
|
document.head.appendChild(script);
|
|
|
|
script.onload = () => {
|
|
window.mixpanel = window.mixpanel || { track: () => {} };
|
|
window.mixpanel.init?.(MIXPANEL_TOKEN);
|
|
};
|
|
}
|
|
|
|
export function initAnalytics() {
|
|
initGA();
|
|
initMixpanel();
|
|
}
|
|
|
|
export function trackEvent(name: string, params?: EventParams) {
|
|
if (typeof window === 'undefined') return;
|
|
|
|
if (window.gtag) {
|
|
window.gtag('event', name, params);
|
|
}
|
|
|
|
if (window.mixpanel) {
|
|
window.mixpanel.track(name, params);
|
|
}
|
|
}
|
|
|
|
export function trackWaitlistSignup(email: string, source?: string, tier?: string) {
|
|
trackEvent('waitlist_signup', {
|
|
email,
|
|
source: source || 'landing_page',
|
|
tier: tier || 'unknown',
|
|
});
|
|
}
|
|
|
|
export function trackPageView(path: string, title?: string) {
|
|
trackEvent('page_view', {
|
|
page_path: path,
|
|
page_title: title || document.title,
|
|
});
|
|
}
|