feat: Add Amplitude auto-instrumentation

app/blog/[slug]/not-found.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { useEffect } from 'react';
+import { trackEvent } from '../../../lib/analytics';
+
+export default function BlogPostNotFound() {
+  useEffect(() => {
+    trackEvent('blog_post_not_found', {
+      page_path: window.location.pathname,
+    });
+  }, []);
+
+  return (
+    <section className="page-top-offset bg-light-grey px-6 pb-16 text-default-grey md:px-8 md:pb-20">
+      <div className="mx-auto max-w-3xl rounded-lg bg-white p-8 text-center shadow-md">
+        <h1 className="font-headline text-3xl font-semibold">Post not found</h1>
+        <p className="mt-4 text-default-grey/75">
+          The article you requested does not exist or is no longer available.
+        </p>
+      </div>
+    </section>
+  );
+}

app/blog/[slug]/page.tsx

@@ -4,6 +4,7 @@ import JsonLd from '../../../components/JsonLd';
 import ScrollToTopButton from '../../../components/blog/ScrollToTopButton';
 import BlogPostBreadcrumbs from '../../../components/blog/BlogPostBreadcrumbs';
 import BlogPostHero from '../../../components/blog/BlogPostHero';
+import BlogPostViewTracker from '../../../components/blog/BlogPostViewTracker';
 import SimilarPostsSection from '../../../components/blog/SimilarPostsSection';
 import {
   getBlogBreadcrumbStructuredData,
@@ -86,6 +87,7 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
       <JsonLd data={structuredData} />
       <div className="mx-auto max-w-[1000px]">
         <BlogPostBreadcrumbs />
+        <BlogPostViewTracker slug={post.slug} category={post.category} />
         <BlogPostHero post={post} />
         <div
           className="blog-content mt-10"

components/BookingCta.tsx

@@ -7,6 +7,7 @@ interface BookingCtaProps {
   location: string;
   className?: string;
   variant?: 'primary' | 'secondary';
+  onClick?: () => void;
 }
 
 const variantClasses = {
@@ -16,14 +17,15 @@ const variantClasses = {
 
 const BOOKING_CTA_LABEL = 'Book a Strategy Call';
 
-export default function BookingCta({ location, className, variant = 'primary' }: BookingCtaProps) {
+export default function BookingCta({ location, className, variant = 'primary', onClick }: BookingCtaProps) {
   return (
     <TrackedCtaLink
       href="https://calendly.com/michaelzick/45min"
       className={className || variantClasses[variant]}
       location={location}
       label={BOOKING_CTA_LABEL}
       eventName="book_free_session_click"
+      onClick={onClick}
     >
       <span>{BOOKING_CTA_LABEL}</span>
       <OpenInNewWindowIcon className="ml-2 h-4 w-4 shrink-0" aria-hidden="true" />

components/ContactForm.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { trackEvent } from '../lib/analytics';
 import { loadRecaptchaV2, resetRecaptchaV2Widget } from '../lib/client/recaptcha-v2';
 
 interface FormData {
@@ -20,6 +21,16 @@
   workbookOptIn: true,
 };
 
+function getContactFailureReason(message: string) {
+  const lower = message.toLowerCase();
+  if (lower.includes('too many requests')) return 'rate_limited';
+  if (lower.includes('captcha')) return 'captcha_failed';
+  if (lower.includes('email service not configured')) return 'service_configuration_error';
+  if (lower.includes('failed to send email')) return 'email_delivery_failed';
+  if (lower.includes('request failed')) return 'request_failed';
+  return 'unknown';
+}
+
 export default function ContactForm() {
   const [formData, setFormData] = useState<FormData>(initialFormData);
   const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
@@ -145,11 +156,19 @@
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    trackEvent('contact_form_submit_started', {
+      workbook_opt_in: formData.workbookOptIn,
+      page_path: window.location.pathname,
+    });
     setStatus('submitting');
     setErrorMessage(null);
     setCaptchaError(null);
 
     if (!RECAPTCHA_SITE_KEY) {
+      trackEvent('contact_form_submit_failed', {
+        failure_reason: 'captcha_configuration_missing',
+        page_path: window.location.pathname,
+      });
       setCaptchaError('Contact form is temporarily unavailable. Please try again later.');
       setStatus('idle');
       return;
@@ -168,13 +187,22 @@
       }
       setSubmittedEmail(formData.email);
       setSubmittedWorkbook(formData.workbookOptIn);
+      trackEvent('contact_form_submit_succeeded', {
+        workbook_opt_in: formData.workbookOptIn,
+        page_path: window.location.pathname,
+      });
       setStatus('success');
       setFormData(initialFormData);
       setCaptchaError(null);
       discardCaptchaWidget();
     } catch (err) {
       console.error(err);
       const message = err instanceof Error ? err.message : 'Request failed';
+      trackEvent('contact_form_submit_failed', {
+        failure_reason: getContactFailureReason(message),
+        error_message: message,
+        page_path: window.location.pathname,
+      });
       resetCaptcha();
       if (message.toLowerCase().includes('captcha')) {
         setCaptchaError(message);

components/NguCouponSignupForm.tsx

@@ -21,6 +21,16 @@
   onSuccess?: () => void;
 };
 
+function getNguCouponFailureReason(message: string) {
+  const lower = message.toLowerCase();
+  if (lower.includes('too many requests')) return 'rate_limited';
+  if (lower.includes('captcha')) return 'captcha_failed';
+  if (lower.includes('not configured')) return 'service_configuration_error';
+  if (lower.includes('failed to send coupon email')) return 'email_delivery_failed';
+  if (lower.includes('request failed')) return 'request_failed';
+  return 'unknown';
+}
+
 export default function NguCouponSignupForm({
   intro,
   formClassName = 'space-y-5',
@@ -135,7 +145,7 @@
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     trackEvent('ngu_coupon_submit_click', {
       location: successCtaLocation,
       label: 'Email me the coupon',
       page_path: window.location.pathname,
@@ -144,6 +154,11 @@
     setErrorMessage(null);
 
     if (!NGU_RECAPTCHA_SITE_KEY) {
+      trackEvent('ngu_coupon_signup_failed', {
+        location: successCtaLocation,
+        failure_reason: 'captcha_configuration_missing',
+        page_path: window.location.pathname,
+      });
       setStatus('error');
       setErrorMessage('Signup is temporarily unavailable. Please try again later.');
       return;
@@ -163,14 +178,25 @@
       }
 
       onSuccess?.();
+      trackEvent('ngu_coupon_signup_succeeded', {
+        location: successCtaLocation,
+        page_path: window.location.pathname,
+      });
       setStatus('success');
       setEmail('');
       setErrorMessage(null);
       discardCaptchaWidget();
     } catch (error) {
       console.error(error);
+      const message = error instanceof Error ? error.message : 'Request failed';
+      trackEvent('ngu_coupon_signup_failed', {
+        location: successCtaLocation,
+        failure_reason: getNguCouponFailureReason(message),
+        error_message: message,
+        page_path: window.location.pathname,
+      });
       setStatus('error');
-      setErrorMessage(error instanceof Error ? error.message : 'Request failed');
+      setErrorMessage(message);
       resetCaptcha();
     }
   };

components/Questionnaire.tsx

@@ -35,6 +35,19 @@
   }, {});
 }
 
+function getQuestionnaireFailureReason(message: string) {
+  const lower = message.toLowerCase();
+  if (lower.includes('too many requests')) return 'rate_limited';
+  if (lower.includes('missing required fields')) return 'missing_required_fields';
+  if (lower.includes('input exceeds') || lower.includes('response exceeds') || lower.includes('too many responses')) {
+    return 'input_validation_failed';
+  }
+  if (lower.includes('system busy') || lower.includes('honeypot')) return 'bot_protection_rejected';
+  if (lower.includes('configuration')) return 'service_configuration_error';
+  if (lower.includes('failed to analyze')) return 'analysis_provider_error';
+  return 'unknown';
+}
+
 export default function Questionnaire() {
   const [stepIndex, setStepIndex] = useState(0);
   const [formData, setFormData] = useState<FormData>({
@@ -58,6 +71,13 @@
 
   const currentStep = STEPS[stepIndex];
 
+  useEffect(() => {
+    trackEvent('questionnaire_page_viewed', {
+      location: 'questionnaire-page',
+      page_path: window.location.pathname,
+    });
+  }, []);
+
   useEffect(() => {
     const storedDuration = window.localStorage.getItem(ANALYSIS_DURATION_STORAGE_KEY);
     const parsedDuration = Number(storedDuration);
@@ -126,7 +146,17 @@
   };
 
   const nextStep = () => {
-    if (!isStepValid()) return;
+    if (!isStepValid()) {
+      const failureReason = currentStep.id === 'intake'
+        ? (!consented ? 'consent_missing' : 'required_fields_missing')
+        : 'required_answers_missing';
+      trackEvent('questionnaire_submission_blocked', {
+        step_id: currentStep.id,
+        failure_reason: failureReason,
+        page_path: window.location.pathname,
+      });
+      return;
+    }
 
     if (stepIndex < STEPS.length - 1) {
       setStepIndex(stepIndex + 1);
@@ -149,7 +179,7 @@
     setSecondsRemaining(Math.ceil(estimatedDurationMs / 1000));
     setIsSubmitting(true);
     setError(null);
     trackEvent('questionnaire_submit', { email: formData.email });
     let submissionSucceeded = false;
 
     try {
@@ -170,9 +200,19 @@
       setAnalysisProgress(100);
       setSecondsRemaining(0);
       submissionSucceeded = true;
+      trackEvent('questionnaire_analysis_succeeded', {
+        answer_count: Object.keys(orderedAnswers).length,
+        page_path: window.location.pathname,
+      });
       setAnalysis(data.analysis);
     } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : 'Something went wrong. Please try again.');
+      const message = err instanceof Error ? err.message : 'Something went wrong. Please try again.';
+      trackEvent('questionnaire_analysis_failed', {
+        failure_reason: getQuestionnaireFailureReason(message),
+        error_message: message,
+        page_path: window.location.pathname,
+      });
+      setError(message);
     } finally {
       if (!submissionSucceeded) {
         setAnalysisProgress(0);

components/QuestionnaireCta.tsx

@@ -6,14 +6,15 @@ interface QuestionnaireCTAProps {
   location: string;
   className?: string;
   variant?: 'primary' | 'secondary';
+  onClick?: () => void;
 }
 
 const variantClasses = {
   primary: 'btn cta-unified',
   secondary: 'btn-secondary cta-unified',
 };
 
-export default function QuestionnaireCta({ location, className, variant = 'secondary' }: QuestionnaireCTAProps) {
+export default function QuestionnaireCta({ location, className, variant = 'secondary', onClick }: QuestionnaireCTAProps) {
   return (
     <TrackedCtaLink
       href="/questionnaire"
@@ -22,6 +23,7 @@ export default function QuestionnaireCta({ location, className, variant = 'secon
       label="Take the Assessment"
       eventName="questionnaire_click"
       target="_self"
+      onClick={onClick}
     >
       Take the Assessment
     </TrackedCtaLink>

components/TrackedCtaLink.tsx

@@ -14,6 +14,7 @@ type TrackedCtaLinkProps = {
   rel?: string;
   section?: string;
   smoothScroll?: boolean;
+  onClick?: () => void;
   children: ReactNode;
 };
 
@@ -54,6 +55,7 @@ export default function TrackedCtaLink({
   rel,
   section = 'cta',
   smoothScroll = false,
+  onClick,
   children,
 }: TrackedCtaLinkProps) {
   const isInternal = href.startsWith('/') && !href.startsWith('//');
@@ -74,6 +76,7 @@ export default function TrackedCtaLink({
       href,
       page_path: window.location.pathname,
     });
+    onClick?.();
 
     const hashTargetId = getHashTargetId(href);
     if (

components/TrackedLink.tsx

@@ -13,6 +13,7 @@ type TrackedLinkProps = {
   className?: string;
   target?: string;
   rel?: string;
+  onClick?: () => void;
   children: ReactNode;
 };
 
@@ -25,6 +26,7 @@ export default function TrackedLink({
   className,
   target,
   rel,
+  onClick,
   children,
 }: TrackedLinkProps) {
   const isInternal = href.startsWith('/') && !href.startsWith('//');
@@ -39,6 +41,7 @@ export default function TrackedLink({
       variant,
       pagePath: window.location.pathname,
     });
+    onClick?.();
   };
 
   if (isInternal && (!target || target === '_self')) {