diff --git a/.claude/features/analytics-events-tracking/tasks.md b/.claude/features/analytics-events-tracking/tasks.md
new file mode 100644
index 0000000..4488ea6
--- /dev/null
+++ b/.claude/features/analytics-events-tracking/tasks.md
@@ -0,0 +1,464 @@
+# Analytics Events Tracking - Implementation Tasks
+
+**Feature**: Analytics Events Tracking for nodejsdesignpatterns.com
+**Branch**: `feat/analytics-events-tracking`
+**Goal**: Implement comprehensive GA4 event tracking to measure user engagement and conversions
+
+---
+
+## Overview
+
+The site currently has basic GA4 setup (property G-NFE37ZH2W3) via Partytown but lacks custom event tracking. Based on analytics analysis, we need to track:
+
+- Book purchase intent (buy button views + clicks → CTR)
+- Free chapter downloads (form views + submissions → conversion rate)
+- Blog CTA performance (views + clicks → CTR)
+- Outbound link clicks (Amazon, Packt, etc.)
+- Blog engagement (scroll depth, read completion)
+- Internal navigation patterns
+
+### Tracking Philosophy
+
+For all CTAs, we track both **impressions** (view events via Intersection Observer) and **actions** (click/submit events). This enables calculating click-through rates and conversion rates, not just absolute numbers.
+
+---
+
+## Tasks
+
+### Phase 1: Setup & Infrastructure
+
+#### T001 - Create Analytics Utility Module [P]
+**File**: `src/lib/analytics.ts`
+**Description**: Create a TypeScript module with type-safe helper functions for sending GA4 events via gtag. Must handle Partytown's async nature.
+
+**Requirements**:
+- Export typed `trackEvent()` function that wraps `gtag('event', ...)`
+- Handle window.gtag potentially being undefined (Partytown delay)
+- Define TypeScript interfaces for all event parameters
+- Include event name constants to prevent typos
+
+**Events to support**:
+```typescript
+type AnalyticsEvent =
+  // Conversion events
+  | 'view_buy_buttons'
+  | 'click_buy_button'
+  | 'view_free_chapter_form'
+  | 'submit_free_chapter_form'
+  // Engagement events
+  | 'click_outbound_link'
+  | 'scroll_depth'
+  | 'blog_read_complete'
+  // CTA events (view + click for CTR calculation)
+  | 'view_blog_cta'
+  | 'click_blog_cta'
+```
+
+---
+
+#### T002 - Define Event Schema Documentation [P]
+**File**: `src/lib/analytics.ts` (inline JSDoc) or `.claude/features/analytics-events-tracking/events-schema.md`
+**Description**: Document all custom events with their parameters for future reference.
+
+**Requirements**:
+- Event name
+- When it fires
+- Parameters and their types
+- Expected values
+
+---
+
+### Phase 2: Core Conversion Events
+
+#### T003 - Track Buy Button Views and Clicks
+**Files**:
+- `src/components/pages/Home/components/BuyButtons.astro`
+- `src/components/blog/BookPromo.astro`
+
+**Description**: Track when buy buttons become visible (impression) and when clicked. This enables CTR calculation.
+
+**Event Schema**:
+```javascript
+// Fired when buttons enter viewport (once per page load)
+gtag('event', 'view_buy_buttons', {
+  source_page: '/blog/some-article' | '/',
+  button_location: 'hero' | 'sidebar' | 'footer' | 'blog_promo'
+})
+
+// Fired on click
+gtag('event', 'click_buy_button', {
+  book_format: 'print' | 'ebook',
+  source_page: '/blog/some-article' | '/',
+  button_location: 'hero' | 'sidebar' | 'footer' | 'blog_promo'
+})
+```
+
+**Implementation**:
+- Use Intersection Observer to track when buttons enter viewport
+- Fire `view_buy_buttons` once per page load when visible
+- Add `onclick` handlers for click tracking
+- Pass format ('print' or 'ebook') based on button clicked
+- Include page path for attribution
+
+**Metrics enabled**:
+- Buy button CTR = `click_buy_button` / `view_buy_buttons`
+- Format preference = print clicks vs ebook clicks
+
+---
+
+#### T004 - Track Free Chapter Form Views and Submissions
+**File**: `src/components/pages/Home/FreeChapter.astro`
+
+**Description**: Track when the free chapter form becomes visible (impression) and when submitted. This enables conversion rate calculation.
+
+**Event Schema**:
+```javascript
+// Fired when form section enters viewport (once per page load)
+gtag('event', 'view_free_chapter_form', {
+  form_location: 'homepage_free_chapter_section'
+})
+
+// Fired on form submission
+gtag('event', 'submit_free_chapter_form', {
+  form_location: 'homepage_free_chapter_section'
+})
+```
+
+**Implementation**:
+- Use Intersection Observer to track when form enters viewport
+- Fire `view_free_chapter_form` once per page load when visible
+- Add `onsubmit` handler to the form
+- Fire `submit_free_chapter_form` before form submission (form posts to external Kit.com)
+- Consider also tracking form field focus as a micro-conversion
+
+**Metrics enabled**:
+- Form conversion rate = `submit_free_chapter_form` / `view_free_chapter_form`
+
+---
+
+#### T005 - Track Outbound Link Clicks
+**Files**:
+- `src/components/pages/Home/components/BuyButtons.astro`
+- `src/components/blog/BookPromo.astro`
+- `src/components/Footer.astro`
+
+**Description**: Track clicks on links that leave the site (Amazon, Packt, social profiles, etc.)
+
+**Event Schema**:
+```javascript
+gtag('event', 'click_outbound_link', {
+  link_url: 'https://amazon.com/...',
+  link_domain: 'amazon.com',
+  link_text: 'Buy print',
+  source_page: window.location.pathname
+})
+```
+
+**Implementation**:
+- Can use event delegation at document level
+- Filter for links with `href` starting with `http` but not matching site domain
+- Extract domain from URL for grouping in reports
+
+---
+
+### Phase 3: Engagement Events
+
+#### T006 - Track Scroll Depth on Blog Posts [P]
+**File**: `src/components/blog/BlogLayout.astro` (new script)
+
+**Description**: Track how far users scroll on blog articles (25%, 50%, 75%, 100%)
+
+**Event Schema**:
+```javascript
+gtag('event', 'scroll_depth', {
+  percent_scrolled: 25 | 50 | 75 | 100,
+  page_path: '/blog/reading-writing-files-nodejs',
+  content_type: 'blog_post'
+})
+```
+
+**Implementation**:
+- Use Intersection Observer for performance
+- Only fire each threshold once per page load
+- Only implement on blog pages (check route)
+
+---
+
+#### T007 - Track Blog Read Completion [P]
+**File**: `src/components/blog/BlogLayout.astro`
+
+**Description**: Fire event when user reaches the end of a blog post (indicates genuine read)
+
+**Event Schema**:
+```javascript
+gtag('event', 'blog_read_complete', {
+  page_path: '/blog/reading-writing-files-nodejs',
+  estimated_read_time: 8, // minutes
+  time_on_page: 240 // seconds actually spent
+})
+```
+
+**Implementation**:
+- Trigger when user scrolls to article footer or "related posts" section
+- Track time spent on page for validation
+- Helps identify content quality vs. bounce rate
+
+---
+
+#### T008 - Track Blog CTA Views and Clicks (with Variant Tracking)
+**File**: `src/components/blog/BookPromo.astro`
+
+**Description**: Track when the book promo card becomes visible (impression) and when clicked. The component has **10 different variants** (promo01-promo10) with unique images and messages that are randomly selected. We need to track which variant performs best.
+
+**Current variants** (from `BookPromo.astro`):
+- `promo01` - "Get the Node.js Design Patterns book. Your playbook to senior-level Node.js."
+- `promo02` - "Buy Node.js Design Patterns and master async, streams, and scaling Node.js."
+- `promo03` - "Upgrade your Node.js skills: get the book professional developers trust."
+- `promo04` - "Join 30,000+ developers. Get the book they use to level up..."
+- `promo05` - "The Node.js book with 4.6★ from 780+ reviews. Get your copy."
+- `promo06` - "732 pages. 170 examples. 54 exercises..."
+- `promo07` - "Stop stitching together half-baked tutorials..."
+- `promo08` - "Master all there is to know about Node.js..."
+- `promo09` - "Build production-grade Node.js with confidence..."
+- `promo10` - "Serious about Node.js? This is the book..."
+
+**Event Schema**:
+```javascript
+// Fired when promo card enters viewport (once per page load)
+gtag('event', 'view_blog_cta', {
+  cta_type: 'book_promo_card',
+  cta_position: 'sidebar',
+  cta_variant: 'promo05', // variant ID for A/B analysis
+  page_path: window.location.pathname
+})
+
+// Fired on click
+gtag('event', 'click_blog_cta', {
+  cta_type: 'book_promo_card',
+  cta_position: 'sidebar',
+  cta_variant: 'promo05', // same variant ID
+  page_path: window.location.pathname
+})
+```
+
+**Implementation**:
+- Extract variant ID from the selected promo key (e.g., `promo05` from `/src/images/promo/promo05.png`)
+- Pass variant ID to the client via `data-variant` attribute on the promo card
+- Use Intersection Observer to track when promo card enters viewport
+- Fire `view_blog_cta` once per page load when visible
+- Add click handler to track `click_blog_cta`
+- Both events must include the same `cta_variant` for accurate CTR calculation
+
+**Metrics enabled**:
+- Blog CTA CTR by variant = `click_blog_cta (variant X)` / `view_blog_cta (variant X)`
+- Best performing variant identification
+- Variant performance by blog post (some messages may resonate better with certain content)
+
+**Future optimization**:
+Once we have enough data, we can adjust the random selection to favor higher-performing variants (weighted random selection).
+
+---
+
+### Phase 4: Navigation & Discovery Events
+
+#### T009 - Track Internal Navigation Patterns [P]
+**File**: `src/Layout.astro` or new `src/scripts/analytics-navigation.ts`
+
+**Description**: Track navigation between key sections (blog, homepage, chapters)
+
+**Event Schema**:
+```javascript
+gtag('event', 'internal_navigation', {
+  from_page: '/',
+  to_page: '/blog',
+  navigation_type: 'header_link' | 'footer_link' | 'inline_link'
+})
+```
+
+**Implementation**:
+- Use click event delegation
+- Only track internal links (same domain)
+- Categorize by navigation location
+
+---
+
+#### T010 - Track Chapter Section Engagement
+**File**: `src/components/pages/Home/Chapters.astro`
+
+**Description**: Track when users interact with the chapters accordion/section
+
+**Event Schema**:
+```javascript
+gtag('event', 'view_chapter_details', {
+  chapter_number: 6,
+  chapter_title: 'Coding with Streams'
+})
+```
+
+---
+
+### Phase 5: Testing & Validation
+
+#### T011 - Add GA4 Debug Mode Helper
+**File**: `src/lib/analytics.ts`
+
+**Description**: Add development helper to enable GA4 debug mode and log events to console
+
+**Requirements**:
+- Check for `?debug_analytics=true` URL param or dev environment
+- Log all events to console with formatted output
+- Enable GA4 debug mode for DebugView in GA4 interface
+
+---
+
+#### T012 - Create Analytics Test Page (Dev Only)
+**File**: `src/pages/dev/analytics-test.astro` (add to .gitignore or protect)
+
+**Description**: Create a test page that triggers all events for validation
+
+**Requirements**:
+- Buttons to trigger each event type
+- Display console output
+- Only accessible in development
+
+---
+
+#### T013 - Validate Events in GA4 DebugView
+**Description**: Manual testing task - verify all events appear correctly in GA4
+
+**Checklist**:
+- [ ] `view_buy_buttons` fires when buttons enter viewport
+- [ ] `click_buy_button` fires with correct format parameter
+- [ ] `view_free_chapter_form` fires when form enters viewport
+- [ ] `submit_free_chapter_form` fires on form submission
+- [ ] `click_outbound_link` captures external links
+- [ ] `scroll_depth` fires at correct thresholds (25/50/75/100%)
+- [ ] `blog_read_complete` fires at article end
+- [ ] `view_blog_cta` fires when promo card enters viewport with correct `cta_variant`
+- [ ] `click_blog_cta` fires on promo card click with matching `cta_variant`
+- [ ] Variant ID matches between view and click events for the same page load
+- [ ] All events have correct page attribution
+- [ ] View events only fire once per page load
+
+---
+
+### Phase 6: Documentation & Cleanup
+
+#### T014 - Update README with Analytics Documentation [P]
+**File**: `README.md` or `.claude/features/analytics-events-tracking/README.md`
+
+**Description**: Document the analytics implementation for future maintainers
+
+**Include**:
+- List of all custom events
+- How to add new events
+- How to test events
+- GA4 property ID and access info
+
+---
+
+#### T015 - Create GA4 Custom Dimensions (Manual)
+**Description**: Configure custom dimensions in GA4 admin for richer reporting
+
+**Dimensions to create**:
+- `book_format` (event-scoped) - "print" or "ebook"
+- `button_location` (event-scoped) - "hero", "sidebar", "footer", "blog_promo"
+- `content_type` (event-scoped) - "blog_post", "homepage", etc.
+- `cta_variant` (event-scoped) - "promo01" through "promo10" for A/B analysis
+- `cta_position` (event-scoped) - "sidebar", "inline", etc.
+
+---
+
+## Parallel Execution Guide
+
+The following tasks can be executed in parallel as they modify different files:
+
+### Parallel Group 1 (Infrastructure)
+```
+T001 - Analytics Utility Module
+T002 - Event Schema Documentation
+```
+
+### Parallel Group 2 (Conversion Events)
+```
+T003 - Buy Button Clicks
+T004 - Free Chapter Form
+T005 - Outbound Links
+```
+
+### Parallel Group 3 (Engagement)
+```
+T006 - Scroll Depth (blog)
+T007 - Read Completion (blog)
+T008 - Blog CTA Clicks
+```
+
+### Parallel Group 4 (Final)
+```
+T011 - Debug Mode Helper
+T014 - Documentation
+```
+
+---
+
+## Dependencies
+
+```
+T001 (Analytics Module)
+  └── T003, T004, T005, T006, T007, T008, T009, T010 (all event implementations)
+       └── T011 (Debug Helper)
+            └── T012, T013 (Testing)
+                 └── T014, T015 (Documentation)
+```
+
+---
+
+## Files Modified Summary
+
+| File | Tasks |
+|------|-------|
+| `src/lib/analytics.ts` (NEW) | T001, T002, T011 |
+| `src/components/pages/Home/components/BuyButtons.astro` | T003, T005 |
+| `src/components/blog/BookPromo.astro` | T003, T005, T008 |
+| `src/components/pages/Home/FreeChapter.astro` | T004 |
+| `src/components/Footer.astro` | T005 |
+| `src/components/blog/BlogLayout.astro` | T006, T007 |
+| `src/components/pages/Home/Chapters.astro` | T010 |
+| `src/Layout.astro` | T009 |
+
+---
+
+## Success Metrics
+
+After implementation, we should be able to answer:
+
+1. **What's the buy button CTR?** (`click_buy_button` / `view_buy_buttons`) and which format is preferred
+2. **What's the free chapter form conversion rate?** (`submit_free_chapter_form` / `view_free_chapter_form`)
+3. **What's the blog CTA CTR?** (`click_blog_cta` / `view_blog_cta`) and which promo messages perform best
+4. **Which blog posts drive the most purchase intent?** (clicks by page_path)
+5. **How engaged are blog readers?** (scroll depth distribution, completion rate)
+6. **What's the user journey?** (navigation patterns to purchase)
+
+### Example Calculated Metrics
+
+| Metric | Formula |
+|--------|---------|
+| Buy Button CTR | `click_buy_button` ÷ `view_buy_buttons` |
+| Free Chapter Conversion | `submit_free_chapter_form` ÷ `view_free_chapter_form` |
+| Blog CTA CTR | `click_blog_cta` ÷ `view_blog_cta` |
+| **Blog CTA CTR by Variant** | `click_blog_cta (variant X)` ÷ `view_blog_cta (variant X)` |
+| Blog Completion Rate | `blog_read_complete` ÷ `page_view (blog)` |
+| Print vs Ebook Preference | `click_buy_button (print)` ÷ `click_buy_button (total)` |
+
+### Variant Performance Analysis
+
+With 10 promo variants tracked, you can build a report like:
+
+| Variant | Views | Clicks | CTR |
+|---------|-------|--------|-----|
+| promo05 (ratings) | 1,200 | 48 | 4.0% |
+| promo04 (social proof) | 1,150 | 41 | 3.6% |
+| promo06 (stats) | 980 | 29 | 3.0% |
+| ... | ... | ... | ... |
+
+This data can later inform weighted random selection to show higher-performing variants more frequently.
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index df9512d..bfa4855 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -15,7 +15,35 @@
       "Bash(node:*)",
       "WebFetch(domain:github.com)",
       "WebFetch(domain:nodesource.com)",
-      "Bash(ls:*)"
+      "Bash(ls:*)",
+      "Skill(marketing-skills:analytics-tracking)",
+      "Bash(bash scripts/check-task-prerequisites.sh:*)",
+      "mcp__analytics-mcp__get_account_summaries",
+      "mcp__analytics-mcp__get_property_details",
+      "mcp__analytics-mcp__get_custom_dimensions_and_metrics",
+      "mcp__analytics-mcp__run_report",
+      "Bash(scripts/check-task-prerequisites.sh:*)",
+      "Bash(git -C /Users/luciano/Documents/nodejsdesignpatterns.com log --oneline -5)",
+      "Bash(git -C /Users/luciano/Documents/nodejsdesignpatterns.com diff --name-only HEAD~1..HEAD)",
+      "Bash(pnpm run build:*)",
+      "Bash(pnpm run lint:*)",
+      "Bash(npx eslint:*)",
+      "mcp__playwright__browser_navigate",
+      "mcp__playwright__browser_console_messages",
+      "mcp__playwright__browser_snapshot",
+      "mcp__playwright__browser_press_key",
+      "mcp__playwright__browser_evaluate",
+      "mcp__analytics-mcp__run_realtime_report",
+      "Bash(python3:*)",
+      "mcp__playwright__browser_click",
+      "mcp__playwright__browser_type",
+      "Bash(pnpm typecheck:*)",
+      "Bash(pnpm lint:*)",
+      "mcp__playwright__browser_wait_for",
+      "mcp__playwright__browser_network_requests",
+      "mcp__playwright__browser_close",
+      "mcp__playwright__browser_resize",
+      "mcp__playwright__browser_run_code"
     ]
   }
 }
diff --git a/src/Layout.astro b/src/Layout.astro
index fb4f136..2baf451 100644
--- a/src/Layout.astro
+++ b/src/Layout.astro
@@ -163,6 +163,85 @@ const {
       import { initTheme } from './lib/theme.ts'
       initTheme()
     </script>
+
+    <!-- Global Analytics: Link Click Tracking (outbound + internal navigation) -->
+    <script>
+      import {
+        trackClickOutboundLink,
+        trackInternalNavigation,
+        isExternalUrl,
+        extractDomain,
+        getPagePath,
+        type NavigationType,
+      } from './lib/analytics.ts'
+
+      function initLinkClickTracking() {
+        const currentPath = getPagePath()
+
+        document.addEventListener('click', (event) => {
+          const target = event.target as HTMLElement
+          const link = target.closest('a')
+
+          if (!link) return
+
+          const href = link.getAttribute('href')
+          if (!href) return
+
+          // Skip if it's a buy button (already tracked separately)
+          if (link.hasAttribute('data-analytics-format')) return
+
+          const isExternal = isExternalUrl(href)
+
+          if (isExternal) {
+            // Track outbound link
+            trackClickOutboundLink({
+              link_url: href,
+              link_domain: extractDomain(href),
+              link_text: link.textContent?.trim().slice(0, 100) || '',
+              source_page: currentPath,
+            })
+          } else {
+            // Skip anchor links on same page
+            if (href.startsWith('#')) return
+
+            // Determine navigation type based on element location
+            let navigationType: NavigationType = 'inline_link'
+
+            const nav = link.closest('nav')
+            const header = link.closest('header')
+            const footer = link.closest('footer')
+
+            if (nav || header) {
+              navigationType = 'header_link'
+            } else if (footer) {
+              navigationType = 'footer_link'
+            }
+
+            // Get the destination path
+            let toPage = href
+            try {
+              const url = new URL(href, window.location.origin)
+              toPage = url.pathname
+            } catch {
+              // Keep original href if URL parsing fails
+            }
+
+            trackInternalNavigation({
+              from_page: currentPath,
+              to_page: toPage,
+              navigation_type: navigationType,
+            })
+          }
+        })
+      }
+
+      // Initialize when DOM is ready
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initLinkClickTracking)
+      } else {
+        initLinkClickTracking()
+      }
+    </script>
     <Font cssVariable="--font-base-sans" preload />
     <Font cssVariable="--font-base-serif" preload />
     <Font cssVariable="--font-base-mono" preload />
diff --git a/src/components/blog/BlogLayout.astro b/src/components/blog/BlogLayout.astro
index fd02814..c5c6b21 100644
--- a/src/components/blog/BlogLayout.astro
+++ b/src/components/blog/BlogLayout.astro
@@ -145,7 +145,11 @@ if (post.rendered?.metadata?.headings) {
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
       <div class="flex flex-col md:flex-row gap-12">
         <!-- Article (left column) -->
-        <article class="flex-1 min-w-0">
+        <article
+          id="blog-article"
+          class="flex-1 min-w-0"
+          data-reading-time={readingTime}
+        >
           <!-- ToC -->
           <div>
             {
@@ -206,8 +210,11 @@ if (post.rendered?.metadata?.headings) {
             </div>
           </div>
 
-          <!-- Article Footer -->
-          <aside class="mt-16 pt-8 border-t border-base-300">
+          <!-- Article Footer (used as read completion marker) -->
+          <aside
+            id="article-footer"
+            class="mt-16 pt-8 border-t border-base-300"
+          >
             <div
               class="flex flex-col sm:flex-row items-center justify-between gap-6"
             >
@@ -368,3 +375,101 @@ if (post.rendered?.metadata?.headings) {
   </main>
   <Footer />
 </Layout>
+
+<script>
+  import {
+    trackScrollDepth,
+    trackBlogReadComplete,
+    getPagePath,
+    type ScrollDepthThreshold,
+  } from '@lib/analytics'
+
+  function initBlogAnalytics() {
+    const article = document.getElementById('blog-article')
+    const articleFooter = document.getElementById('article-footer')
+
+    if (!article) return
+
+    const pagePath = getPagePath()
+    const readingTime = parseInt(article.dataset.readingTime || '0', 10)
+    const pageLoadTime = Date.now()
+
+    // Track scroll depth milestones
+    const scrollThresholds: ScrollDepthThreshold[] = [25, 50, 75, 100]
+    const firedThresholds = new Set<number>()
+
+    function checkScrollDepth() {
+      const scrollTop = window.scrollY
+      const docHeight =
+        document.documentElement.scrollHeight - window.innerHeight
+      // Handle edge case: very short pages where content fits in viewport
+      const scrollPercent =
+        docHeight <= 0 ? 100 : Math.round((scrollTop / docHeight) * 100)
+
+      for (const threshold of scrollThresholds) {
+        if (scrollPercent >= threshold && !firedThresholds.has(threshold)) {
+          firedThresholds.add(threshold)
+          trackScrollDepth({
+            percent_scrolled: threshold,
+            page_path: pagePath,
+            content_type: 'blog_post',
+          })
+        }
+      }
+
+      // Remove listener once all thresholds have been tracked
+      if (firedThresholds.size === scrollThresholds.length) {
+        window.removeEventListener('scroll', handleScroll)
+      }
+    }
+
+    // Throttled scroll handler
+    let scrollTimeout: ReturnType<typeof setTimeout> | null = null
+    function handleScroll() {
+      if (scrollTimeout) return
+      scrollTimeout = setTimeout(() => {
+        checkScrollDepth()
+        scrollTimeout = null
+      }, 100)
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+
+    // Check initial scroll position (in case user starts mid-page)
+    checkScrollDepth()
+
+    // Track blog read completion when article footer becomes visible
+    if (articleFooter) {
+      let hasTrackedCompletion = false
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && !hasTrackedCompletion) {
+              hasTrackedCompletion = true
+              const timeOnPage = Math.round((Date.now() - pageLoadTime) / 1000)
+
+              trackBlogReadComplete({
+                page_path: pagePath,
+                estimated_read_time: readingTime,
+                time_on_page: timeOnPage,
+              })
+
+              observer.disconnect()
+            }
+          })
+        },
+        { threshold: 0.5 },
+      )
+
+      observer.observe(articleFooter)
+    }
+  }
+
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initBlogAnalytics)
+  } else {
+    initBlogAnalytics()
+  }
+</script>
diff --git a/src/components/blog/BookPromo.astro b/src/components/blog/BookPromo.astro
index d465fd4..a8f4710 100644
--- a/src/components/blog/BookPromo.astro
+++ b/src/components/blog/BookPromo.astro
@@ -10,6 +10,7 @@ import {
   EXERCISES,
   BUY_LINK_PRINT,
 } from '@lib/const'
+import { extractPromoVariant } from '@lib/analytics'
 
 const images = import.meta.glob<{ default: ImageMetadata }>(
   '/src/images/promo/*.{jpeg,jpg,png}',
@@ -18,25 +19,25 @@ const imagesIds = Object.keys(images)
 
 const imagesAlt = {
   '/src/images/promo/promo01.png':
-    'Stack of two copies of “Node.js Design Patterns – Fourth Edition” on a purple gradient surface; top book slightly rotated, showing the purple wave cover and authors’ portraits.',
+    "Stack of two copies of 'Node.js Design Patterns – Fourth Edition' on a purple gradient surface; top book slightly rotated, showing the purple wave cover and authors' portraits.",
   '/src/images/promo/promo02.png':
-    'Man reading “Node.js Design Patterns – Fourth Edition” on a subway train, standing and smiling; front cover with the purple wave design visible.',
+    "Man reading 'Node.js Design Patterns – Fourth Edition' on a subway train, standing and smiling; front cover with the purple wave design visible.",
   '/src/images/promo/promo03.png':
-    'Studio render of the “Node.js Design Patterns – Fourth Edition” hardcover floating against a blue gradient backdrop, front cover with purple wave graphic centered.',
+    "Studio render of the 'Node.js Design Patterns – Fourth Edition' hardcover floating against a blue gradient backdrop, front cover with purple wave graphic centered.",
   '/src/images/promo/promo04.png':
-    'Lifestyle shot of a woman in a cafe holding the “Node.js Design Patterns – Fourth Edition” book; greenery and warm lights in the background, cover fully visible.',
+    "Lifestyle shot of a woman in a cafe holding the 'Node.js Design Patterns – Fourth Edition' book; greenery and warm lights in the background, cover fully visible.",
   '/src/images/promo/promo05.png':
-    'Person holding the “Node.js Design Patterns – Fourth Edition” hardcover against a neutral background; tilted view showing authors’ portraits and Packt logo on the front.',
+    "Person holding the 'Node.js Design Patterns – Fourth Edition' hardcover against a neutral background; tilted view showing authors' portraits and Packt logo on the front.",
   '/src/images/promo/promo06.png':
-    'Close-up of the top corner of the “Node.js Design Patterns” cover on a purple gradient background, highlighting the large title text and flowing purple wave graphic.',
+    "Close-up of the top corner of the 'Node.js Design Patterns' cover on a purple gradient background, highlighting the large title text and flowing purple wave graphic.",
   '/src/images/promo/promo07.png':
-    'Smiling man presenting the “Node.js Design Patterns – Fourth Edition” book toward the camera in a bright studio setting; cover and Packt logo clearly shown.',
+    "Smiling man presenting the 'Node.js Design Patterns – Fourth Edition' book toward the camera in a bright studio setting; cover and Packt logo clearly shown.",
   '/src/images/promo/promo08.png':
-    'Angled view of the “Node.js Design Patterns – Fourth Edition” paperback lying on a light gray surface, showing the spine, title, purple wave design, and Packt branding.',
+    "Angled view of the 'Node.js Design Patterns – Fourth Edition' paperback lying on a light gray surface, showing the spine, title, purple wave design, and Packt branding.",
   '/src/images/promo/promo09.png':
-    'Hand holding the “Node.js Design Patterns – Fourth Edition” book on a beige desk next to an open book; front cover with the purple wave motif clearly visible.',
+    "Hand holding the 'Node.js Design Patterns – Fourth Edition' book on a beige desk next to an open book; front cover with the purple wave motif clearly visible.",
   '/src/images/promo/promo10.png':
-    'Hardcover of “Node.js Design Patterns – Fourth Edition” on a purple surface with a wooden pencil resting diagonally on the cover; black cover with purple wave graphic, authors’ portraits, and Packt logo.',
+    "Hardcover of 'Node.js Design Patterns – Fourth Edition' on a purple surface with a wooden pencil resting diagonally on the cover; black cover with purple wave graphic, authors' portraits, and Packt logo.",
 }
 
 const promoMessages = {
@@ -65,16 +66,23 @@ const selectedPromoImgAlt =
   imagesAlt[selectedPromoKey as keyof typeof imagesAlt]
 const selectedPromoMessage =
   promoMessages[selectedPromoKey as keyof typeof promoMessages]
+
+// Extract variant ID for analytics (e.g., "promo05" from "/src/images/promo/promo05.png")
+const promoVariant = extractPromoVariant(selectedPromoKey)
 ---
 
 <div
+  id="blog-promo-cta"
   class="group bg-base-100 border-2 border-base-200 rounded-lg shadow-lg hover:shadow-xl hover:-translate-y-0.5 hover:border-primary transition-all duration-300 relative overflow-hidden"
+  data-analytics-variant={promoVariant}
+  data-analytics-cta-type="book_promo_card"
+  data-analytics-cta-position="sidebar"
 >
   <a class="absolute inset-0 text-[0px]" href={BUY_LINK_PRINT}
     >Link to buy Node.js Design Patterns</a
   >
 
-  <div class="flex flex-col no-underline text-inherit">
+  <div class="flex flex-col no-underline text-inherit pointer-events-none">
     <div class="w-full h-48 overflow-hidden">
       <Image
         src={selectedPromoImg}
@@ -87,7 +95,7 @@ const selectedPromoMessage =
         {selectedPromoMessage}
       </p>
       <span
-        class="inline-flex items-center font-semibold text-primary text-sm mt-auto relative"
+        class="inline-flex items-center font-semibold text-primary text-sm mt-auto relative pointer-events-auto"
       >
         <a href={BUY_LINK_PRINT} class="relative"
           >Get Your Copy Today →
@@ -99,3 +107,55 @@ const selectedPromoMessage =
     </div>
   </div>
 </div>
+
+<script>
+  import {
+    trackViewBlogCta,
+    trackClickBlogCta,
+    observeOnce,
+    getPagePath,
+    validatePromoVariant,
+    validateCtaPosition,
+  } from '@lib/analytics'
+
+  function initBlogPromoTracking() {
+    const promoCard = document.getElementById('blog-promo-cta')
+    if (!promoCard) return
+
+    const variant = validatePromoVariant(
+      promoCard.dataset.analyticsVariant || 'promo01',
+    )
+    const ctaType = promoCard.dataset.analyticsCtaType || 'book_promo_card'
+    const ctaPosition = validateCtaPosition(
+      promoCard.dataset.analyticsCtaPosition || 'sidebar',
+    )
+    const pagePath = getPagePath()
+
+    // Track view when promo card becomes visible
+    observeOnce(promoCard, () => {
+      trackViewBlogCta({
+        cta_type: ctaType,
+        cta_position: ctaPosition,
+        cta_variant: variant,
+        page_path: pagePath,
+      })
+    })
+
+    // Track clicks on the promo card (the whole card is clickable)
+    promoCard.addEventListener('click', () => {
+      trackClickBlogCta({
+        cta_type: ctaType,
+        cta_position: ctaPosition,
+        cta_variant: variant,
+        page_path: pagePath,
+      })
+    })
+  }
+
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initBlogPromoTracking)
+  } else {
+    initBlogPromoTracking()
+  }
+</script>
diff --git a/src/components/pages/Home/ActionPlan.astro b/src/components/pages/Home/ActionPlan.astro
index 6da609c..435f45b 100644
--- a/src/components/pages/Home/ActionPlan.astro
+++ b/src/components/pages/Home/ActionPlan.astro
@@ -106,7 +106,7 @@ import { PAGES, EXAMPLES, EXERCISES } from '@lib/const'
     </div>
 
     <div class="flex justify-center">
-      <BuyButtons />
+      <BuyButtons location="action_plan" />
     </div>
   </div>
 </section>
diff --git a/src/components/pages/Home/Chapters.astro b/src/components/pages/Home/Chapters.astro
index c27c925..4c17b03 100644
--- a/src/components/pages/Home/Chapters.astro
+++ b/src/components/pages/Home/Chapters.astro
@@ -18,7 +18,7 @@ function readingTime(numWords: number): number {
 }
 
 const chapters = (await getCollection('chapters')).sort((a, b) => {
-  return parseInt(a.data.number) - parseInt(b.data.number)
+  return Number.parseInt(a.data.number) - Number.parseInt(b.data.number)
 })
 const renderedChapters = await Promise.all(
   chapters.map(async (chapter) => {
@@ -45,7 +45,11 @@ const renderedChapters = await Promise.all(
     <div class="flex flex-col gap-4">
       {
         renderedChapters.map((chapter) => (
-          <div class="chapter overflow-hidden border-2 border-primary/20 hover:border-primary/50 transition-all duration-200 rounded-xl bg-card text-base-content shadow">
+          <div
+            class="chapter overflow-hidden border-2 border-primary/20 hover:border-primary/50 transition-all duration-200 rounded-xl bg-card text-base-content shadow"
+            data-chapter-number={chapter.data.number}
+            data-chapter-title={chapter.data.title}
+          >
             <div class="flex flex-col space-y-1.5 p-6 cursor-pointer bg-primary/10 hover:bg-primary/30 transition-colors">
               <div class="flex items-center justify-between">
                 <div class="flex items-center space-x-4">
@@ -137,6 +141,8 @@ const renderedChapters = await Promise.all(
   </div>
 </section>
 <script>
+  import { trackViewChapterDetails } from '@lib/analytics'
+
   const chapters = document.querySelectorAll('.chapter')
 
   chapters.forEach((chapter) => {
@@ -144,6 +150,14 @@ const renderedChapters = await Promise.all(
     const chapterOpen = chapter.querySelector('.chapter-open')
     const chapterContent = chapter.querySelector('.chapter-content')
 
+    // Get chapter data for analytics
+    const chapterElement = chapter as HTMLElement
+    const chapterNumber = parseInt(
+      chapterElement.dataset.chapterNumber || '0',
+      10,
+    )
+    const chapterTitle = chapterElement.dataset.chapterTitle || ''
+
     chapterContent?.classList.add('hidden')
     chapterClose?.classList.add('hidden')
     chapterOpen?.classList.remove('hidden')
@@ -155,6 +169,12 @@ const renderedChapters = await Promise.all(
         chapterClose?.classList.remove('hidden')
         chapterOpen?.classList.add('hidden')
         status = 'open'
+
+        // Track chapter expansion
+        trackViewChapterDetails({
+          chapter_number: chapterNumber,
+          chapter_title: chapterTitle,
+        })
       } else {
         chapterContent?.classList.add('hidden')
         chapterClose?.classList.add('hidden')
diff --git a/src/components/pages/Home/FreeChapter.astro b/src/components/pages/Home/FreeChapter.astro
index 6c9ce56..7e28ea8 100644
--- a/src/components/pages/Home/FreeChapter.astro
+++ b/src/components/pages/Home/FreeChapter.astro
@@ -123,7 +123,13 @@ import {
           </div>
 
           <!-- Email Form -->
-          <form action={FREE_CHAPTER_FORM_ACTION} method="POST" target="_blank">
+          <form
+            id="free-chapter-form"
+            action={FREE_CHAPTER_FORM_ACTION}
+            method="POST"
+            target="_blank"
+            data-analytics-form="free_chapter"
+          >
             <div class="space-y-4">
               <div>
                 <label
@@ -176,3 +182,35 @@ import {
     </div>
   </div>
 </section>
+
+<script>
+  import {
+    trackViewFreeChapterForm,
+    trackSubmitFreeChapterForm,
+    observeOnce,
+  } from '@lib/analytics'
+
+  function initFreeChapterFormTracking() {
+    const form = document.getElementById('free-chapter-form')
+    if (!form) return
+
+    const formLocation = 'homepage_free_chapter_section'
+
+    // Track view when form section becomes visible
+    observeOnce(form, () => {
+      trackViewFreeChapterForm({ form_location: formLocation })
+    })
+
+    // Track form submission
+    form.addEventListener('submit', () => {
+      trackSubmitFreeChapterForm({ form_location: formLocation })
+    })
+  }
+
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initFreeChapterFormTracking)
+  } else {
+    initFreeChapterFormTracking()
+  }
+</script>
diff --git a/src/components/pages/Home/Hero.astro b/src/components/pages/Home/Hero.astro
index 4c0b7f4..619aebd 100644
--- a/src/components/pages/Home/Hero.astro
+++ b/src/components/pages/Home/Hero.astro
@@ -54,7 +54,7 @@ const numberFormatter = new Intl.NumberFormat('en-US', {
           </div>
 
           <div class="flex flex-col gap-2">
-            <BuyButtons />
+            <BuyButtons location="hero" />
             <p class="text-sm text-base-content/70">
               Or you can{' '}
               <a href="#free-chapter" class="font-bold hover:underline">
diff --git a/src/components/pages/Home/ProblemStatement.astro b/src/components/pages/Home/ProblemStatement.astro
index 1770058..1dea64e 100644
--- a/src/components/pages/Home/ProblemStatement.astro
+++ b/src/components/pages/Home/ProblemStatement.astro
@@ -168,7 +168,7 @@ import { Construction } from '@lucide/astro'
     </div>
 
     <div class="flex justify-center">
-      <BuyButtons />
+      <BuyButtons location="problem_statement" />
     </div>
   </div>
 </section>
diff --git a/src/components/pages/Home/Quotes.astro b/src/components/pages/Home/Quotes.astro
index 8bd65cc..4d0d634 100644
--- a/src/components/pages/Home/Quotes.astro
+++ b/src/components/pages/Home/Quotes.astro
@@ -91,7 +91,7 @@ const renderedQuotes = (
       </div>
 
       <div class="flex justify-center mt-16">
-        <BuyButtons />
+        <BuyButtons location="quotes" />
       </div>
     </div>
   </div>
diff --git a/src/components/pages/Home/Reviews.astro b/src/components/pages/Home/Reviews.astro
index 6cd5201..86a7cf3 100644
--- a/src/components/pages/Home/Reviews.astro
+++ b/src/components/pages/Home/Reviews.astro
@@ -79,7 +79,7 @@ const renderedReviews = await Promise.all(
     </div>
 
     <div class="flex justify-center mt-16">
-      <BuyButtons />
+      <BuyButtons location="reviews" />
     </div>
   </div>
 
diff --git a/src/components/pages/Home/components/BuyButtons.astro b/src/components/pages/Home/components/BuyButtons.astro
index 210b011..e8e0fb3 100644
--- a/src/components/pages/Home/components/BuyButtons.astro
+++ b/src/components/pages/Home/components/BuyButtons.astro
@@ -2,16 +2,90 @@
 import Button from '@components/ui/button.astro'
 import { Book, TabletSmartphone } from '@lucide/astro'
 import { BUY_LINK_PRINT, BUY_LINK_EBOOK } from '@lib/const'
+import type { ButtonLocation } from '@lib/analytics'
+
+interface Props {
+  location?: ButtonLocation
+}
+
+const { location = 'hero' } = Astro.props
 ---
 
-<div class="flex flex-col sm:flex-row gap-4">
-  <Button element="a" href={BUY_LINK_PRINT} variant="primary" size="lg">
+<div
+  class="buy-buttons-container flex flex-col sm:flex-row gap-4"
+  data-analytics-location={location}
+>
+  <Button
+    element="a"
+    href={BUY_LINK_PRINT}
+    variant="primary"
+    size="lg"
+    data-analytics-format="print"
+  >
     <Book class="mr-2 h-5 w-5" />
     Buy print
   </Button>
 
-  <Button element="a" href={BUY_LINK_EBOOK} variant="default" size="lg">
+  <Button
+    element="a"
+    href={BUY_LINK_EBOOK}
+    variant="default"
+    size="lg"
+    data-analytics-format="ebook"
+  >
     <TabletSmartphone class="mr-2 h-5 w-5" />
     Buy e-book
   </Button>
 </div>
+
+<script>
+  import {
+    trackViewBuyButtons,
+    trackClickBuyButton,
+    observeOnce,
+    getPagePath,
+    validateBookFormat,
+    validateButtonLocation,
+  } from '@lib/analytics'
+
+  function initBuyButtonsTracking() {
+    const containers = document.querySelectorAll('.buy-buttons-container')
+
+    containers.forEach((container) => {
+      const location = validateButtonLocation(
+        container.getAttribute('data-analytics-location') || 'hero',
+      )
+      const pagePath = getPagePath()
+
+      // Track view when buttons become visible (once per container)
+      observeOnce(container, () => {
+        trackViewBuyButtons({
+          source_page: pagePath,
+          button_location: location,
+        })
+      })
+
+      // Track clicks on buy buttons
+      const buttons = container.querySelectorAll('a[data-analytics-format]')
+      buttons.forEach((button) => {
+        button.addEventListener('click', () => {
+          const format = validateBookFormat(
+            button.getAttribute('data-analytics-format') || 'print',
+          )
+          trackClickBuyButton({
+            book_format: format,
+            source_page: pagePath,
+            button_location: location,
+          })
+        })
+      })
+    })
+  }
+
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initBuyButtonsTracking)
+  } else {
+    initBuyButtonsTracking()
+  }
+</script>
diff --git a/src/lib/analytics.ts b/src/lib/analytics.ts
new file mode 100644
index 0000000..44fff3a
--- /dev/null
+++ b/src/lib/analytics.ts
@@ -0,0 +1,477 @@
+/**
+ * Analytics Utility Module for GA4 Event Tracking
+ *
+ * This module provides type-safe helper functions for sending GA4 events.
+ * It handles Partytown's async nature and provides debug mode for development.
+ *
+ * @module analytics
+ */
+
+// Type for gtag function (loaded by Google Tag Manager via Partytown)
+type GtagFunction = (
+  command: string,
+  eventNameOrConfig: string,
+  params?: Record<string, unknown>,
+) => void
+
+// ============================================================================
+// Types & Interfaces
+// ============================================================================
+
+/** Book format options for purchase tracking */
+export type BookFormat = 'print' | 'ebook'
+
+/** Button/CTA location identifiers */
+export type ButtonLocation =
+  | 'hero'
+  | 'problem_statement'
+  | 'action_plan'
+  | 'quotes'
+  | 'reviews'
+  | 'sidebar'
+  | 'footer'
+  | 'blog_promo'
+  | 'free_chapter_section'
+
+/** CTA position within a page */
+export type CtaPosition = 'sidebar' | 'inline' | 'footer'
+
+/** Blog promo variant identifiers (promo01-promo10) */
+export type PromoVariant =
+  | 'promo01'
+  | 'promo02'
+  | 'promo03'
+  | 'promo04'
+  | 'promo05'
+  | 'promo06'
+  | 'promo07'
+  | 'promo08'
+  | 'promo09'
+  | 'promo10'
+
+/** Scroll depth thresholds */
+export type ScrollDepthThreshold = 25 | 50 | 75 | 100
+
+/** Navigation type identifiers */
+export type NavigationType = 'header_link' | 'footer_link' | 'inline_link'
+
+// ============================================================================
+// Event Parameter Interfaces
+// ============================================================================
+
+export interface ViewBuyButtonsParams {
+  [key: string]: unknown
+  source_page: string
+  button_location: ButtonLocation
+}
+
+export interface ClickBuyButtonParams {
+  [key: string]: unknown
+  book_format: BookFormat
+  source_page: string
+  button_location: ButtonLocation
+}
+
+export interface ViewFreeChapterFormParams {
+  [key: string]: unknown
+  form_location: string
+}
+
+export interface SubmitFreeChapterFormParams {
+  [key: string]: unknown
+  form_location: string
+}
+
+export interface ClickOutboundLinkParams {
+  [key: string]: unknown
+  link_url: string
+  link_domain: string
+  link_text: string
+  source_page: string
+}
+
+export interface ScrollDepthParams {
+  [key: string]: unknown
+  percent_scrolled: ScrollDepthThreshold
+  page_path: string
+  content_type: string
+}
+
+export interface BlogReadCompleteParams {
+  [key: string]: unknown
+  page_path: string
+  estimated_read_time: number
+  time_on_page: number
+}
+
+export interface ViewBlogCtaParams {
+  [key: string]: unknown
+  cta_type: string
+  cta_position: CtaPosition
+  cta_variant: PromoVariant
+  page_path: string
+}
+
+export interface ClickBlogCtaParams {
+  [key: string]: unknown
+  cta_type: string
+  cta_position: CtaPosition
+  cta_variant: PromoVariant
+  page_path: string
+}
+
+export interface InternalNavigationParams {
+  [key: string]: unknown
+  from_page: string
+  to_page: string
+  navigation_type: NavigationType
+}
+
+export interface ViewChapterDetailsParams {
+  [key: string]: unknown
+  chapter_number: number
+  chapter_title: string
+}
+
+// ============================================================================
+// Event Names (constants to prevent typos)
+// ============================================================================
+
+export const ANALYTICS_EVENTS = {
+  // Conversion events
+  VIEW_BUY_BUTTONS: 'view_buy_buttons',
+  CLICK_BUY_BUTTON: 'click_buy_button',
+  VIEW_FREE_CHAPTER_FORM: 'view_free_chapter_form',
+  SUBMIT_FREE_CHAPTER_FORM: 'submit_free_chapter_form',
+  // Engagement events
+  CLICK_OUTBOUND_LINK: 'click_outbound_link',
+  SCROLL_DEPTH: 'scroll_depth',
+  BLOG_READ_COMPLETE: 'blog_read_complete',
+  // CTA events
+  VIEW_BLOG_CTA: 'view_blog_cta',
+  CLICK_BLOG_CTA: 'click_blog_cta',
+  // Navigation events
+  INTERNAL_NAVIGATION: 'internal_navigation',
+  VIEW_CHAPTER_DETAILS: 'view_chapter_details',
+} as const
+
+export type AnalyticsEventName =
+  (typeof ANALYTICS_EVENTS)[keyof typeof ANALYTICS_EVENTS]
+
+// ============================================================================
+// Debug Mode
+// ============================================================================
+
+/**
+ * Check if analytics debug mode is enabled.
+ * Enable via URL param: ?debug_analytics=true
+ * Or in development mode (localhost)
+ */
+export function isDebugMode(): boolean {
+  if (typeof window === 'undefined') return false
+
+  const urlParams = new URLSearchParams(window.location.search)
+  const debugParam = urlParams.get('debug_analytics') === 'true'
+  const isDev =
+    window.location.hostname === 'localhost' ||
+    window.location.hostname === '127.0.0.1'
+
+  return debugParam || isDev
+}
+
+/**
+ * Log analytics event to console in debug mode
+ */
+function debugLog<T extends Record<string, unknown>>(
+  eventName: string,
+  params: T,
+): void {
+  if (!isDebugMode()) return
+
+  console.group(`📊 Analytics Event: ${eventName}`)
+  console.log('Parameters:', params)
+  console.log('Timestamp:', new Date().toISOString())
+  console.groupEnd()
+}
+
+// ============================================================================
+// Core Tracking Function
+// ============================================================================
+
+/**
+ * Safely get the gtag function, handling Partytown's async loading
+ */
+function getGtag(): GtagFunction | null {
+  if (typeof window === 'undefined') return null
+  // gtag is loaded via Partytown, may not be immediately available
+  return (window as unknown as { gtag?: GtagFunction }).gtag ?? null
+}
+
+/**
+ * Generic event tracking function
+ * Handles cases where gtag might not be loaded yet (Partytown delay)
+ */
+export function trackEvent<T extends Record<string, unknown>>(
+  eventName: string,
+  params: T,
+): void {
+  debugLog(eventName, params)
+
+  const gtagFn = getGtag()
+  if (gtagFn) {
+    gtagFn('event', eventName, params)
+  } else {
+    // If gtag not ready, queue the event for when it becomes available
+    // This is a fallback for slow Partytown initialization
+    let timeoutId: ReturnType<typeof setTimeout> | null = null
+    const checkInterval = setInterval(() => {
+      const fn = getGtag()
+      if (fn) {
+        fn('event', eventName, params)
+        clearInterval(checkInterval)
+        if (timeoutId) clearTimeout(timeoutId)
+      }
+    }, 100)
+
+    // Give up after 5 seconds
+    timeoutId = setTimeout(() => clearInterval(checkInterval), 5000)
+  }
+}
+
+// ============================================================================
+// Typed Event Tracking Functions
+// ============================================================================
+
+/** Track when buy buttons become visible */
+export function trackViewBuyButtons(params: ViewBuyButtonsParams): void {
+  trackEvent(ANALYTICS_EVENTS.VIEW_BUY_BUTTONS, params)
+}
+
+/** Track buy button clicks */
+export function trackClickBuyButton(params: ClickBuyButtonParams): void {
+  trackEvent(ANALYTICS_EVENTS.CLICK_BUY_BUTTON, params)
+}
+
+/** Track when free chapter form becomes visible */
+export function trackViewFreeChapterForm(
+  params: ViewFreeChapterFormParams,
+): void {
+  trackEvent(ANALYTICS_EVENTS.VIEW_FREE_CHAPTER_FORM, params)
+}
+
+/** Track free chapter form submissions */
+export function trackSubmitFreeChapterForm(
+  params: SubmitFreeChapterFormParams,
+): void {
+  trackEvent(ANALYTICS_EVENTS.SUBMIT_FREE_CHAPTER_FORM, params)
+}
+
+/** Track outbound link clicks */
+export function trackClickOutboundLink(params: ClickOutboundLinkParams): void {
+  trackEvent(ANALYTICS_EVENTS.CLICK_OUTBOUND_LINK, params)
+}
+
+/** Track scroll depth milestones */
+export function trackScrollDepth(params: ScrollDepthParams): void {
+  trackEvent(ANALYTICS_EVENTS.SCROLL_DEPTH, params)
+}
+
+/** Track blog article read completion */
+export function trackBlogReadComplete(params: BlogReadCompleteParams): void {
+  trackEvent(ANALYTICS_EVENTS.BLOG_READ_COMPLETE, params)
+}
+
+/** Track when blog CTA becomes visible */
+export function trackViewBlogCta(params: ViewBlogCtaParams): void {
+  trackEvent(ANALYTICS_EVENTS.VIEW_BLOG_CTA, params)
+}
+
+/** Track blog CTA clicks */
+export function trackClickBlogCta(params: ClickBlogCtaParams): void {
+  trackEvent(ANALYTICS_EVENTS.CLICK_BLOG_CTA, params)
+}
+
+/** Track internal navigation */
+export function trackInternalNavigation(
+  params: InternalNavigationParams,
+): void {
+  trackEvent(ANALYTICS_EVENTS.INTERNAL_NAVIGATION, params)
+}
+
+/** Track chapter details view */
+export function trackViewChapterDetails(
+  params: ViewChapterDetailsParams,
+): void {
+  trackEvent(ANALYTICS_EVENTS.VIEW_CHAPTER_DETAILS, params)
+}
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+
+/**
+ * Extract domain from a URL
+ */
+export function extractDomain(url: string): string {
+  try {
+    const urlObj = new URL(url)
+    return urlObj.hostname.replace('www.', '')
+  } catch {
+    return 'unknown'
+  }
+}
+
+/**
+ * Check if a URL is external (not same domain)
+ */
+export function isExternalUrl(url: string): boolean {
+  if (typeof window === 'undefined') return false
+  try {
+    const urlObj = new URL(url, window.location.origin)
+    return urlObj.hostname !== window.location.hostname
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Get current page path
+ */
+export function getPagePath(): string {
+  if (typeof window === 'undefined') return '/'
+  return window.location.pathname
+}
+
+/**
+ * Create an Intersection Observer that fires a callback once when element is visible
+ * @param element - DOM element to observe
+ * @param callback - Function to call when element becomes visible
+ * @param threshold - Visibility threshold (0-1), default 0.5 (50% visible)
+ */
+export function observeOnce(
+  element: Element,
+  callback: () => void,
+  threshold = 0.5,
+): IntersectionObserver {
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          callback()
+          observer.disconnect()
+        }
+      })
+    },
+    { threshold },
+  )
+
+  observer.observe(element)
+  return observer
+}
+
+/**
+ * Extract promo variant ID from image path
+ * e.g., "/src/images/promo/promo05.png" -> "promo05"
+ */
+export function extractPromoVariant(imagePath: string): PromoVariant {
+  const match = imagePath.match(/promo(\d+)/)
+  if (match) {
+    return `promo${match[1].padStart(2, '0')}` as PromoVariant
+  }
+  if (isDebugMode()) {
+    console.warn(
+      `[Analytics] Could not extract promo variant from: ${imagePath}`,
+    )
+  }
+  return 'promo01' // fallback
+}
+
+// ============================================================================
+// Type Validation Helpers (with debug warnings)
+// ============================================================================
+
+const VALID_BOOK_FORMATS: BookFormat[] = ['print', 'ebook']
+const VALID_BUTTON_LOCATIONS: ButtonLocation[] = [
+  'hero',
+  'problem_statement',
+  'action_plan',
+  'quotes',
+  'reviews',
+  'sidebar',
+  'footer',
+  'blog_promo',
+  'free_chapter_section',
+]
+const VALID_PROMO_VARIANTS: PromoVariant[] = [
+  'promo01',
+  'promo02',
+  'promo03',
+  'promo04',
+  'promo05',
+  'promo06',
+  'promo07',
+  'promo08',
+  'promo09',
+  'promo10',
+]
+const VALID_CTA_POSITIONS: CtaPosition[] = ['sidebar', 'inline', 'footer']
+
+/**
+ * Validate book format value with debug warning for invalid values
+ */
+export function validateBookFormat(value: string): BookFormat {
+  if (VALID_BOOK_FORMATS.includes(value as BookFormat)) {
+    return value as BookFormat
+  }
+  if (isDebugMode()) {
+    console.warn(
+      `[Analytics] Invalid book_format: "${value}". Expected one of: ${VALID_BOOK_FORMATS.join(', ')}`,
+    )
+  }
+  return 'print' // fallback
+}
+
+/**
+ * Validate button location value with debug warning for invalid values
+ */
+export function validateButtonLocation(value: string): ButtonLocation {
+  if (VALID_BUTTON_LOCATIONS.includes(value as ButtonLocation)) {
+    return value as ButtonLocation
+  }
+  if (isDebugMode()) {
+    console.warn(
+      `[Analytics] Invalid button_location: "${value}". Expected one of: ${VALID_BUTTON_LOCATIONS.join(', ')}`,
+    )
+  }
+  return 'hero' // fallback
+}
+
+/**
+ * Validate promo variant value with debug warning for invalid values
+ */
+export function validatePromoVariant(value: string): PromoVariant {
+  if (VALID_PROMO_VARIANTS.includes(value as PromoVariant)) {
+    return value as PromoVariant
+  }
+  if (isDebugMode()) {
+    console.warn(
+      `[Analytics] Invalid promo_variant: "${value}". Expected one of: ${VALID_PROMO_VARIANTS.join(', ')}`,
+    )
+  }
+  return 'promo01' // fallback
+}
+
+/**
+ * Validate CTA position value with debug warning for invalid values
+ */
+export function validateCtaPosition(value: string): CtaPosition {
+  if (VALID_CTA_POSITIONS.includes(value as CtaPosition)) {
+    return value as CtaPosition
+  }
+  if (isDebugMode()) {
+    console.warn(
+      `[Analytics] Invalid cta_position: "${value}". Expected one of: ${VALID_CTA_POSITIONS.join(', ')}`,
+    )
+  }
+  return 'sidebar' // fallback
+}