๐Ÿ“Š๐Ÿ”

Custom Analytics System

Purpose-built analytics platform for tracking landing page interactions and user engagement patterns

๐Ÿ“… Published on December 13, 2025

๐ŸŽฏ What is Custom Analytics?

A Custom Analytics System is a purpose-built tracking infrastructure that monitors user interactions, engagement patterns, and conversion behaviors specifically tailored to your application's unique needs. Unlike generic analytics platforms, it captures business-specific metrics and provides actionable insights aligned with your product goals.

Analytics Formula: User Events + Session Tracking + Database Storage + Admin Dashboard = Data-Driven Decisions

๐Ÿ’ก Why Build a Custom Solution?

๐ŸŽฏ

Precise Tracking

Track exactly what matters for your business without generic bloat

๐Ÿ’ฐ

Cost Efficiency

No expensive third-party subscriptions or per-event pricing

๐Ÿ”’

Data Ownership

Complete control over your data without third-party dependencies

โšก

Real-Time Access

Instant access to your data without API rate limits

๐Ÿ”ง

Full Customization

Add, modify, or remove tracking without vendor limitations

๐Ÿ“Š

Custom Reporting

Build dashboards specific to your KPIs and metrics

๐Ÿ“ˆ Generic vs. Custom Analytics

โŒ Generic Solutions

  • One-size-fits-all tracking
  • Monthly subscription costs
  • Third-party data ownership
  • Limited customization
  • Generic metrics

โœ… Custom Solution

  • Business-specific events
  • One-time development cost
  • Complete data control
  • Unlimited customization
  • Actionable insights

๐Ÿ—๏ธ Technical Architecture

Core Technology Stack

  • Frontend Tracking: JavaScript utility class (demoAnalytics.js)
  • Backend API: Next.js API routes for event processing
  • Database: MySQL for persistent event storage
  • Admin Dashboard: React-based analytics visualization
  • Session Management: Client-side session ID generation
  • Performance: Debounced event tracking and batching

๐Ÿ“Š Data Flow Architecture

User Interaction
โ†“
Event Tracking (Client)
โ†“
API Endpoint (/api/demo-analytics)
โ†“
Database Storage (MySQL)
โ†“
Aggregation & Analysis
โ†“
Admin Dashboard Visualization

Client-Side Tracking Implementation

// Initialize analytics singleton
class DemoAnalytics {
  constructor() {
    this.sessionId = this.generateSessionId();
    this.events = [];
    this.startTime = Date.now();
  }

  generateSessionId() {
    return 'demo_' + Date.now() + '_' + 
           Math.random().toString(36).substring(2, 9);
  }

  trackEvent(action, data = {}) {
    const event = {
      sessionId: this.sessionId,
      action,
      timestamp: Date.now(),
      timeFromStart: Date.now() - this.startTime,
      data,
      viewport: {
        width: window.innerWidth,
        height: window.innerHeight
      }
    };
    
    this.sendEvent(event);
  }
}

๐Ÿ“„ Landing Page Structure

The analytics system is specifically designed to track the current landing page structure of CeFinan, which has evolved to focus on conversion-optimized sections.

๐ŸŽจ Current Page Sections (December 2025)

1

Hero Section

Purpose: First impression and value proposition

Components:

  • Main title: "Understand Any Company From a Different Angle"
  • Subtitle with key value props (70,000+ companies)
  • Social proof stats (500+ analyses, 100+ customers)
  • Trustpilot widget with animated stars
  • Landing Search Bar (primary CTA)

Tracked Events: Search queries, search results, Trustpilot clicks

2

Apple Preview Card

Purpose: Interactive demo showcase

Features:

  • Company insight card with Apple stock data
  • "Interactive demo" visual label
  • Copy ticker symbol button (AAPL)
  • Copy ISIN code button
  • Share functionality

Tracked Events: Card views, copy actions, share clicks

3

Roadmap Section

Purpose: Feature transparency and future vision

Layout: Two-column display

  • Currently Available Features (9 items)
  • Features in Development (2 items)

Tracked Events: Section visibility, time spent

4

Pricing Section

Purpose: Conversion and monetization

Plans: 10, 20, 50, 100 analyses (monthly/yearly)

Tracked Events: Plan selection, CTA clicks, pricing engagement

5

FAQ Section

Purpose: Address objections and questions

Content: 11 expandable questions

Tracked Events: Question expansions, reading time, contact CTA

โš ๏ธ Removed Components

Previous versions included SimpleHeatmap, SimpleLineChart, and AIAnalysisPreview components. These are no longer rendered but their event types remain for backward compatibility with historical data.

๐Ÿ“ก Event Tracking System

๐ŸŽฏ Tracked Event Categories

1. Search Interactions (โœ… Active)

Event Type: demo_search

Captured Data:

  • Search query text (lowercase, trimmed)
  • Query length
  • Number of results returned
  • Search method (landing_search_bar)
analytics.trackSearch('apple', 8); // Sends: { query: 'apple', queryLength: 5, // resultsCount: 8, searchMethod: 'landing_search_bar' }

2. Stock Selection (โœ… Active)

Event Type: demo_stock_selected

Captured Data:

  • Stock symbol (ticker)
  • Company name
  • Asset type (stock, ETF, crypto)
  • Position in suggestion list (1st, 2nd, 3rd...)
  • Sector and country information
analytics.trackStockSelection(stock, position); // Sends: { symbol: 'AAPL', name: 'Apple Inc.', // type: 'stock', position: 1 }

3. CTA Clicks (โœ… Active)

Event Type: demo_cta_click

Captured Data:

  • Button type (go_to_premium, start_free_trial, etc.)
  • Location on page (pricing_section, hero_section, etc.)
analytics.trackCTAClick('go_to_premium', 'pricing_section'); // Tracks conversion funnel position and button effectiveness

4. Copy/Share Actions (โœ… Active)

Event Type: demo_copy_action

Captured Data:

  • Copy type (ticker, isin)
  • Value copied
analytics.trackCopyAction('ticker', 'AAPL'); // Measures user engagement with stock data

5. Scroll Progress (โœ… Active - New!)

Event Type: demo_scroll_progress

Captured Data:

  • Scroll percentage (0-100%)
  • Scroll depth in pixels
  • Viewport height
  • Document height
// Debounced tracking - updates every 10% change analytics.trackScrollProgress(75, 2500); // Measures content engagement depth

โšก Performance: Debounced with 500ms delay, tracks only 10%+ changes

6. Session Summary (โœ… Active)

Event Type: demo_session_summary

Triggered: On page unload or visibility change

Captured Data:

  • Total session duration (ms)
  • Total events count
  • Events breakdown by type
  • Engagement score (calculated)

โš ๏ธ Legacy Events (Inactive)

These events remain in the codebase for historical data compatibility:

  • demo_chart_interaction - Removed charts
  • demo_heatmap_interaction - Removed heatmap
  • demo_ai_interaction - Removed AI preview section

๐Ÿ† Engagement Scoring System

Each user session receives an engagement score based on their interactions:

Event TypePointsRationale
Search2Basic exploration intent
Stock Selection5Strong interest signal
Chart Interaction3Data analysis engagement
CTA Click10Conversion intent (highest value)
Copy Action3Active data usage
Scroll Progress1Content consumption
Duration Bonus0-20Time-based engagement (max 20 pts)

Score Interpretation:

  • < 20: Low engagement - bounce risk
  • 20-50: Moderate engagement - interested visitor
  • > 50: High engagement - strong conversion potential

๐Ÿ—„๏ธ Database Schema

๐Ÿ“Š Table Structure: demo_analytics

CREATE TABLE demo_analytics ( id INT AUTO_INCREMENT PRIMARY KEY, session_id VARCHAR(255) NOT NULL, action VARCHAR(100) NOT NULL, timestamp DATETIME NOT NULL, time_from_start INT DEFAULT 0, data JSON, url VARCHAR(500), user_agent TEXT, client_ip VARCHAR(45), viewport_width INT, viewport_height INT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP, -- Performance indexes INDEX idx_session_id (session_id), INDEX idx_action (action), INDEX idx_timestamp (timestamp) );

Field Descriptions

session_id

Unique identifier for each user session (format: demo_timestamp_random)

action

Event type identifier (demo_search, demo_cta_click, etc.)

timestamp

Exact time of event occurrence (client-side)

time_from_start

Milliseconds elapsed since session start

data (JSON)

Event-specific metadata (query text, stock details, etc.)

viewport_width/height

Browser viewport dimensions for device analytics

๐Ÿ“ˆ Common Analytics Queries

Get Popular Searches
SELECT JSON_UNQUOTE(JSON_EXTRACT(data, '$.query')) as search_query, COUNT(*) as search_count FROM demo_analytics WHERE action = 'demo_search' AND created_at >= DATE_SUB(NOW(), INTERVAL 7 DAY) GROUP BY search_query ORDER BY search_count DESC LIMIT 10;
Calculate Average Scroll Depth
SELECT AVG(CAST(JSON_UNQUOTE(JSON_EXTRACT(data, '$.scrollPercentage')) AS SIGNED)) as avg_scroll_percentage FROM demo_analytics WHERE action = 'demo_scroll_progress' AND created_at >= DATE_SUB(NOW(), INTERVAL 7 DAY);
CTA Click-Through Rate
SELECT JSON_UNQUOTE(JSON_EXTRACT(data, '$.buttonType')) as cta_button, JSON_UNQUOTE(JSON_EXTRACT(data, '$.location')) as page_location, COUNT(*) as clicks FROM demo_analytics WHERE action = 'demo_cta_click' AND created_at >= DATE_SUB(NOW(), INTERVAL 30 DAY) GROUP BY cta_button, page_location ORDER BY clicks DESC;

๐Ÿ“Š Admin Dashboard

The analytics admin dashboard at /admin/demo-analytics provides real-time visualization of user behavior and engagement metrics.

๐ŸŽจ Dashboard Components

๐Ÿ“… Timeframe Selector

Filter data by time period:

  • Last 24 hours
  • Last 7 days
  • Last 30 days
  • Last 90 days

๐Ÿ“ˆ Overview Metrics

High-level KPIs:

  • Unique sessions count
  • Total events triggered
  • Average session duration

๐Ÿท๏ธ Action Breakdown

Event distribution with labels:

  • โœ… Active events (current page)
  • โšซ Legacy events (removed components)
  • Percentage distribution

๐ŸŽฏ CTA Performance

Conversion tracking:

  • Click counts per CTA button
  • ๐Ÿ“ Location mapping
  • Conversion funnel analysis

๐Ÿ” Search Analytics

Top searches with ranking:

  • Numbered list (#1, #2, #3...)
  • Search frequency (ร—)
  • User intent insights

๐Ÿ“Š Stock Selections

Popular symbols:

  • Ranked by selection count
  • Company name display
  • Interest pattern analysis

๐Ÿ† Engagement Metrics

User interaction quality:

  • Average engagement score
  • High engagement sessions (>50)
  • Total analyzed sessions

๐Ÿ“œ Scroll Analytics

Content consumption depth:

  • Average max scroll percentage
  • Distribution by depth ranges
  • Section visibility mapping

๐Ÿ’ก Dashboard Insights

The dashboard provides context-aware insights based on the landing page structure:

๐ŸŽฏ Scroll Depth Interpretation

  • 0-25%: Only saw Hero + Search bar
  • 25-50%: Reached Apple Preview Card
  • 50-75%: Viewed Roadmap or Pricing
  • 75-100%: Read FAQ (highly engaged!)

๐Ÿ“Š Action Status Labels

Events are clearly marked to distinguish current vs. historical tracking:

  • Active - Currently tracked on live page
  • Legacy - Historical data from removed components

๐Ÿ“œ Scroll Progress Analytics

Scroll tracking is one of the most valuable features of the custom analytics system, providing insights into content engagement depth and user attention spans.

โš™๏ธ Implementation Details

๐Ÿ“Š Tracking Mechanism

useEffect(() => { let lastScrollPercentage = 0; let scrollTimeout; const handleScroll = () => { clearTimeout(scrollTimeout); scrollTimeout = setTimeout(() => { const scrollTop = window.pageYOffset; const scrollHeight = document.documentElement.scrollHeight - window.innerHeight; const scrollPercentage = Math.round((scrollTop / scrollHeight) * 100); // Track only significant changes (10%+) if (Math.abs(scrollPercentage - lastScrollPercentage) >= 10) { analytics.trackScrollProgress(scrollPercentage, scrollTop); lastScrollPercentage = scrollPercentage; } }, 500); // 500ms debounce }; window.addEventListener('scroll', handleScroll, { passive: true }); return () => window.removeEventListener('scroll', handleScroll); }, []);

โšก Performance Optimizations

  • Debouncing: 500ms delay prevents excessive event firing
  • Threshold filtering: Only tracks 10%+ changes
  • Passive listeners: Improves scroll performance
  • Integer rounding: Reduces data granularity for efficiency

๐Ÿ“ˆ Calculated Metrics

Average Max Scroll

Mean of the maximum scroll percentage reached per session

Distribution Ranges

Breakdown by depth: 0-25%, 25-50%, 50-75%, 75-100%

Sessions Tracked

Total sessions with scroll event data

๐ŸŽจ Dashboard Visualization

The dashboard displays scroll data with color-coded progress bars:

  • Red 0-25% (Low engagement)
  • Yellow 25-50% (Moderate engagement)
  • Blue 50-75% (Good engagement)
  • Green 75-100% (Excellent engagement)

๐Ÿ’ก Actionable Insights from Scroll Data

๐Ÿ“‰ Low Scroll Rates (< 30% avg)

Diagnosis: Content above the fold isn't engaging enough

Action:

  • Improve hero section copy and value proposition
  • Add more compelling visual elements
  • Test different search bar placements
  • Reduce initial page load content density

๐Ÿ“Š Moderate Scroll (30-60% avg)

Diagnosis: Good initial engagement, drop-off mid-page

Action:

  • Strengthen mid-page content (Roadmap section)
  • Add internal navigation or anchor links
  • Test visual breaks or interactive elements
  • Review page length vs. content value

๐Ÿ“ˆ High Scroll Rates (> 70% avg)

Diagnosis: Excellent content engagement throughout

Action:

  • Maintain current content structure
  • Test adding more conversion CTAs in FAQ
  • Consider extending content with testimonials
  • Analyze which sections drive highest engagement

๐ŸŽฏ Insights & Optimization

๐Ÿ” Data-Driven Decisions

The analytics system enables continuous optimization through measurable insights:

๐Ÿ”Ž Search Intent Analysis

Metric: Popular search queries

Insight: Understand what users are looking for

Action:

  • Add frequently searched stocks to homepage examples
  • Create content for top search terms
  • Optimize search algorithm for common queries
  • Identify market trends and user interests

๐ŸŽฏ CTA Effectiveness

Metric: Click-through rates by button type and location

Insight: Which CTAs drive conversions

Action:

  • A/B test CTA copy and design
  • Optimize button placement based on clicks
  • Remove or redesign underperforming CTAs
  • Test different pricing page layouts

๐Ÿ“Š Stock Interest Patterns

Metric: Most selected stocks from suggestions

Insight: User investment preferences and market sentiment

Action:

  • Feature popular stocks in marketing materials
  • Create targeted content for trending stocks
  • Adjust search ranking algorithms
  • Inform product roadmap based on user interests

โฑ๏ธ Engagement Quality

Metric: Engagement scores and session duration

Insight: User satisfaction and content quality

Action:

  • Identify high-value user behaviors
  • Optimize for high-engagement session patterns
  • Reduce friction in user journeys
  • Test content improvements for low-engagement sessions

๐Ÿ“ฑ Device & Viewport Analysis

Metric: Viewport dimensions and user agent data

Insight: Device usage patterns (mobile vs desktop)

Action:

  • Optimize responsive design for common screen sizes
  • Prioritize mobile experience if dominant
  • Test touch vs mouse interaction patterns
  • Adjust content density for different devices

๐Ÿ”„ Continuous Improvement Cycle

1

Collect Data

Track user interactions across landing page

โ†’
2

Analyze Patterns

Identify trends and user behavior insights

โ†’
3

Hypothesize

Form data-driven improvement hypotheses

โ†’
4

Test Changes

Implement and measure improvements

โ†’
5

Iterate

Refine based on results and repeat

๐Ÿ”’ Privacy & Compliance

The custom analytics system is designed with privacy-first principles to comply with GDPR and data protection regulations.

๐Ÿ›ก๏ธ Privacy Safeguards

๐Ÿ”

No PII Collection

No personally identifiable information is stored:

  • No names, emails, or user accounts
  • No cross-session user tracking
  • No third-party cookies
  • Anonymous session IDs only
๐ŸŒ

IP Address Handling

Client IP addresses are:

  • Hashed for privacy protection
  • Used only for analytics aggregation
  • Not linked to individual users
  • Compliant with GDPR requirements
๐Ÿ“Š

Data Minimization

Only essential data is collected:

  • Event types and timestamps
  • Interaction context (no personal data)
  • Technical metadata (viewport, user agent)
  • No behavioral profiling across sites
โฐ

Data Retention

Configurable retention policies:

  • Default: 6-month retention period
  • Automated cleanup of old data
  • Aggregated analytics persist longer
  • Deletion upon user request
๐Ÿ”’

Data Security

Protection measures in place:

  • Encrypted database connections
  • Admin access restrictions
  • Secure API endpoints
  • Regular security audits
๐Ÿ“œ

Transparency

Users are informed through:

  • Privacy policy disclosure
  • Clear data usage explanations
  • Opt-out mechanisms available
  • Data access requests honored

โœ… GDPR Compliance Checklist

โœ“

Lawful Basis: Legitimate interest for analytics purposes

โœ“

Data Minimization: Only essential data collected

โœ“

Purpose Limitation: Data used only for analytics

โœ“

Storage Limitation: Automated data retention policies

โœ“

Integrity & Confidentiality: Secure data storage

โœ“

Transparency: Privacy policy disclosure

โœ“

User Rights: Data access and deletion upon request

๐Ÿ—‘๏ธ Database Maintenance

Regular cleanup ensures data freshness and compliance:

-- Automated cleanup script (run monthly) DELETE FROM demo_analytics WHERE created_at < DATE_SUB(NOW(), INTERVAL 6 MONTH); -- Analyze table performance ANALYZE TABLE demo_analytics; -- Check storage usage SELECT ROUND(((data_length + index_length) / 1024 / 1024), 2) AS "DB Size in MB" FROM information_schema.tables WHERE table_name = "demo_analytics";

๐ŸŽฏ Conclusion

The Custom Analytics System represents a privacy-first, cost-effective solution for understanding user behavior and optimizing landing page performance. By combining targeted event tracking, scroll progress analytics, and engagement scoring, it provides actionable insights that drive continuous improvement while maintaining full data ownership and GDPR compliance. This purpose-built system delivers exactly the metrics that matter for CeFinan's business goals without the overhead of generic analytics platforms. ๐Ÿš€๐Ÿ“Š