Dark Mode

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Add localStorage analytics tracking and analytics dashboard#131

Merged
simonw merged 1 commit intomainfrom
claude/add-analytics-tracking-01Hqrn2BckKU4NLdCxQoZYKW
Dec 1, 2025
Merged

Add localStorage analytics tracking and analytics dashboard#131
simonw merged 1 commit intomainfrom
claude/add-analytics-tracking-01Hqrn2BckKU4NLdCxQoZYKW

Conversation

Copy link
Owner

simonw commented Dec 1, 2025 *
edited
Loading

  • footer.js now records each page visit with slug (pathname only) and timestamp
  • New analytics.html page shows:
    • Summary stats (total visits, unique pages, today, this week)
    • Visits over time line chart (last 14 days)
    • Top pages doughnut chart (top 10)
    • Most visited pages table (top 20)
    • Recent visits table (last 100 with human-readable times)
    • Copy JSON to clipboard button for full data export
    • Clear data option
  • Uses Chart.js for visualizations

The footer.js script should also record basic analytics in localStorage - I want a localStorage array of every visit I make to any page where it records the page slug (the path, excluding any fragment URL or query string) and a timestamp integer.

Also build an analytics.html page which shows the most recent hundred visits (with human readable times in the user's timezone), shows the user's most visited 20 pages with a count of visits, and offers an option to copy JSON to the clipboard containing the entire analytics history

Have that page use a popular chatting library to show some cool charts as well

- footer.js now records each page visit with slug (pathname only) and timestamp
- New analytics.html page shows:
- Summary stats (total visits, unique pages, today, this week)
- Visits over time line chart (last 14 days)
- Top pages doughnut chart (top 10)
- Most visited pages table (top 20)
- Recent visits table (last 100 with human-readable times)
- Copy JSON to clipboard button for full data export
- Clear data option
- Uses Chart.js for visualizations
Copy link
Contributor

claude bot commented Dec 1, 2025 *
edited
Loading

Claude finished @simonw's task ---- View job


PR Code Review

Todo List:

  • Read repository guidelines (CLAUDE.md)
  • Analyze footer.js changes
  • Analyze analytics.html implementation
  • Review code quality and best practices
  • Check for potential bugs and issues
  • Evaluate performance considerations
  • Assess security concerns
  • Review test coverage needs
  • Provide comprehensive feedback

Code Review Feedback

Strengths

  1. Clean Implementation: The analytics tracking is well-structured and self-contained
  2. Graceful Degradation: Proper error handling for localStorage availability (footer.js:12-15)
  3. Responsive Design: Good mobile-first CSS with appropriate breakpoints (analytics.html:200-226)
  4. User Experience: Clean UI with Charts.js visualizations and intuitive data management
  5. Security: No obvious XSS vulnerabilities - proper HTML escaping in escapeHtml() function (analytics.html:431-435)

Areas for Improvement

1. Data Structure & Performance

  • Issue: Analytics data grows indefinitely in localStorage without cleanup (footer.js:10)
  • Impact: Could hit localStorage limits (~5-10MB) and degrade performance over time
  • Recommendation: Implement data rotation/cleanup strategy:
    // Keep only last N visits or visits from last X days
    const MAX_ENTRIES = 10000;
    if (analytics.length > MAX_ENTRIES) {
    analytics.splice(0, analytics.length - MAX_ENTRIES);
    }

2. Error Handling

  • Issue: Silent failures in analytics recording (footer.js:12-15)
  • Impact: No visibility into why tracking might fail
  • Recommendation: Add optional debug logging or fallback mechanisms

3. Security Considerations

  • Medium Priority: CDN dependency for Chart.js (analytics.html:6)
  • Impact: External dependency could be compromised or unavailable
  • Recommendation: Consider self-hosting Chart.js for better security/reliability

4. Code Organization

  • Issue: Large HTML file (544 lines) with inline styles and JavaScript
  • Impact: Harder to maintain and test
  • Recommendation: Consider splitting into separate CSS/JS files for better organization

5. Browser Compatibility

  • Issue: Uses modern APIs without fallbacks:
    • navigator.clipboard (analytics.html:523)
    • toLocaleString() formatting
  • Impact: May break in older browsers
  • Recommendation: Add feature detection or polyfills

Potential Bugs

  1. Chart Memory Leaks: Charts are destroyed before recreation (analytics.html:442, 481) but consider adding null checks
  2. Date Calculation: Week calculation assumes 7 days but uses 6 days (analytics.html:384)
    // Should be 7 days for a full week
    const weekStart = todayStart - (6 * 24 * 60 * 60 * 1000); // This is 7 days total including today

Performance Considerations

  1. DOM Updates: render() function rebuilds entire tables on each call - consider incremental updates for large datasets
  2. Chart Rendering: Charts are recreated on each render - could cache when data hasn't changed
  3. Storage Operations: JSON parsing on every analytics read - could cache parsed data

Test Coverage

Missing Test Areas:

  • Analytics data collection and storage
  • Chart rendering with various data states
  • Edge cases (empty data, localStorage unavailable)
  • Date/time calculations for different timezones
  • Data export functionality

Recommendation: Add unit tests for:

// Example test cases needed
- recordAnalytics() with various pathnames
- getPageCounts() with duplicate entries
- getVisitsByDay() across month boundaries
- formatTime() in different locales

Minor Issues

  1. Consistency: Mixed quote styles in HTML attributes
  2. Accessibility: Missing ARIA labels for charts and buttons
  3. Color Scheme: Hardcoded colors could benefit from CSS custom properties
  4. Filename Logic: The filename handling in footer.js:17-25 might not be needed for analytics

Summary

This is a solid implementation of client-side analytics with good UX and clean code structure. The main concerns are around data growth management and long-term maintainability. Consider implementing data cleanup strategies and splitting the large HTML file for better organization.

Recommended Priority Order:

  1. Implement localStorage size management
  2. Add basic error logging
  3. Split large HTML file into components
  4. Add test coverage
  5. Enhance browser compatibility

Copy link

cloudflare-workers-and-pages bot commented Dec 1, 2025

Deploying tools with Cloudflare Pages

Latest commit: b9552f9
Status: Deploy successful!
Preview URL: https://1fd9be4b.tools-b1q.pages.dev
Branch Preview URL: https://claude-add-analytics-trackin.tools-b1q.pages.dev

View logs

simonw merged commit 1fde317 into main Dec 1, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants