cta click tracker

Author: maslianok

app/api/insight/cta/log/route.ts

@@ -0,0 +1,29 @@
+import { type NextRequest, NextResponse } from 'next/server';
+
+import { signedFetch } from '@/lib/signed-fetch';
+
+export async function POST(req: NextRequest) {
+  const { token } = (await req.json()) as { token?: string };
+  if (!token) {
+    return NextResponse.json({ message: 'Token is required' }, { status: 400 });
+  }
+
+  const forwardedFor = req.headers.get('x-forwarded-for');
+  const ip = forwardedFor?.split(',')[0]?.trim() || req.headers.get('x-real-ip') || undefined;
+  const userAgent = req.headers.get('user-agent') || undefined;
+  const referer = req.headers.get('referer') || undefined;
+
+  const response = await signedFetch('/insight/cta/log', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ token, ip, userAgent, referer }),
+    cache: 'no-store',
+  });
+
+  if (!response.ok) {
+    return NextResponse.json({ logged: false }, { status: response.status });
+  }
+
+  const data = await response.json();
+  return NextResponse.json(data);
+}

app/components/cta-click-tracker.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { useEffect } from 'react';
+
+const TOKEN_QUERY_PARAM = 't';
+const TRACKED_TOKENS_KEY = 'tracked_cta_tokens_v1';
+const MAX_TRACKED_TOKENS = 50;
+
+function getTrackedTokens(): string[] {
+  try {
+    const raw = window.sessionStorage.getItem(TRACKED_TOKENS_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed.filter((item) => typeof item === 'string') : [];
+  } catch {
+    return [];
+  }
+}
+
+function setTrackedTokens(tokens: string[]) {
+  try {
+    window.sessionStorage.setItem(TRACKED_TOKENS_KEY, JSON.stringify(tokens.slice(-MAX_TRACKED_TOKENS)));
+  } catch {
+    // Ignore storage errors in private browsing modes.
+  }
+}
+
+function removeTrackingTokenFromUrl() {
+  const url = new URL(window.location.href);
+  if (!url.searchParams.has(TOKEN_QUERY_PARAM)) {
+    return;
+  }
+  url.searchParams.delete(TOKEN_QUERY_PARAM);
+  window.history.replaceState({}, document.title, `${url.pathname}${url.search}${url.hash}`);
+}
+
+async function sendClickLog(token: string) {
+  const payload = JSON.stringify({ token });
+
+  if (typeof navigator !== 'undefined' && typeof navigator.sendBeacon === 'function') {
+    const blob = new Blob([payload], { type: 'application/json' });
+    const accepted = navigator.sendBeacon('/api/insight/cta/log', blob);
+    if (accepted) {
+      return;
+    }
+  }
+
+  await fetch('/api/insight/cta/log', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: payload,
+    keepalive: true,
+  });
+}
+
+export function CtaClickTracker() {
+  useEffect(() => {
+    const url = new URL(window.location.href);
+    const token = url.searchParams.get(TOKEN_QUERY_PARAM);
+    if (!token) {
+      return;
+    }
+
+    const trackedTokens = getTrackedTokens();
+    if (trackedTokens.includes(token)) {
+      removeTrackingTokenFromUrl();
+      return;
+    }
+
+    void sendClickLog(token);
+    setTrackedTokens([...trackedTokens, token]);
+    removeTrackingTokenFromUrl();
+  }, []);
+
+  return null;
+}

app/layout.tsx

@@ -5,6 +5,7 @@ import { SessionProvider } from 'next-auth/react';
 import { NuqsAdapter } from 'nuqs/adapters/next/app';
 import { Suspense } from 'react';
 
+import { CtaClickTracker } from './components/cta-click-tracker';
 import { FlagEmojiPolyfill } from './components/flag-emoji-polyfill';
 import { Announcement } from '@/components/announcement/announcement';
 import { Footer } from '@/components/footer/footer';
@@ -35,6 +36,7 @@ export default function RootLayout({ children }: LayoutProps<'/'>) {
           <NuqsAdapter>
             <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
               <FlagEmojiPolyfill />
+              <CtaClickTracker />
               <div className="flex flex-col min-h-screen">
                 <div className="grow">
                   <Suspense fallback={null}>{children}</Suspense>

codegen.ts

@@ -1,7 +1,7 @@
 import type { CodegenConfig } from '@graphql-codegen/cli';
 import jwt from 'jsonwebtoken';
 
-const token = jwt.sign({ sub: 'codegen', typ: 'access' }, process.env.INTERNAL_JWT_SECRET!, { expiresIn: '1h' });
+const token = jwt.sign({ sub: 'codegen', typ: 'access' }, process.env.INTERNAL_JWT_SECRET!, { expiresIn: '30m' });
 
 const config: CodegenConfig = {
   schema: {

lib/signed-fetch.ts

@@ -3,7 +3,7 @@
 import jwt from 'jsonwebtoken';
 
 export async function signedFetch(path: string, init: RequestInit = {}) {
-  const token = jwt.sign({}, process.env.INTERNAL_JWT_SECRET!, { expiresIn: '2m' });
+  const token = jwt.sign({}, process.env.INTERNAL_JWT_SECRET!, { expiresIn: '5m' });
 
   const headers = new Headers(init.headers);
   headers.set('Authorization', `Bearer ${token}`);