Lytics Developer Tools Chrome Extension - Product Requirements Document

Executive Summary

The Lytics Developer Tools Chrome Extension is a comprehensive debugging and validation tool designed to help developers, marketers, data analysts, and sales teams effectively test, debug, and optimize personalization platform implementations. This extension provides real-time insights into SDK installation, visitor profiles, personalization experiences, and data collection activities, while also serving as a demonstration platform for showcasing personalization capabilities to prospects and stakeholders.

Product Overview

Purpose

To provide a unified platform for debugging, validating, and demonstrating personalization capabilities, enabling users to:

Current Capabilities

• Verify Installation: Confirm proper SDK installation, configuration, and data collection
• Monitor Activity: Track all API calls and interactions managed by personalization SDKs
• Analyze Profiles: Review visitor profiles in real-time as they change with interactions
• Educate Teams: Help teams understand personalization platform capabilities

Future Capabilities

• Secure API Access: Explore advanced features through secure authorization to additional APIs
• Live Configuration: Modify settings in real-time based on browser feedback (e.g., allowlist fields, surface audience membership)

Primary Use Cases

1. Implementation Debugging: Debug and validate personalization platform integrations
2. Performance Monitoring: Track and analyze real-time personalization performance
3. Data Validation: Verify data collection and profile accuracy
4. Sales Support: Demonstrate platform capabilities to prospects and clients
5. Team Education: Train teams on personalization platform features and best practices

Target Users

• Frontend Developers: Implementing and debugging SDK integrations
• Data Engineers: Validating data collection and attribute mapping
• Marketing Teams: Testing and optimizing personalization campaigns
• QA Engineers: Validating functionality across environments
• Sales Engineers & TSO: Demonstrating platform capabilities to prospects

Core Features and Requirements

1. Extension Architecture

1.1 Multi-Component Architecture

• Background Service Worker: Handles network monitoring, state management, and cross-tab communication
• Side Panel Interface: Main user interface with tabbed navigation (React-based)
• Content Script: Injected into web pages to interface with Lytics SDK
• Tag Link Bridge: Communication layer between extension and Lytics JavaScript SDK

1.2 State Management

• Extension State: Global on/off toggle with persistent storage
• Domain Pinning: Ability to pin specific domains for focused debugging
• Cross-Tab Synchronization: Maintains state consistency across browser tabs
• Data Persistence: Chrome storage API integration for configuration and activity logs

DL Notes:

^^ Are we saying these are requirements? Or just how it's currently architected. It seems like the toggle and the pinning aren't ideal. Some kind of centralized extension config (with all of the items in point 6) would yield some better ergonomics.

2. Multi-Platform SDK Detection & Validation

2.1 Platform Detection

• Lytics SDK Detection: Real-time monitoring for Lytics JavaScript SDK presence
• Contentstack Detection: Identify Contentstack personalization implementations
• Version Validation: Identify SDK versions and flag deprecated implementations

2.2 Configuration Display

• Lytics Configuration: Complete SDK configuration including:
  • Account ID (CID)
  • Collection Stream Configuration
  • Cookies & LocalStorage Values
• Contentstack Configuration: Personalization setup including:
  • API Configuration
  • Personalization Rules
  • Content Delivery Settings

2.3 Health Monitoring

• Installation Status Indicators: Visual status indicators for both platforms
• Configuration Validation: Verify critical configuration parameters
• Legacy Version Warnings: Alert users to deprecated SDK versions
• Installation Guidance: Links to documentation for troubleshooting

3. Network Activity Monitoring & Debugging

3.1 Real-Time Request Tracking

• API Call Monitoring: Track all requests to *.lytics.io domains
• Request Classification: Categorize requests by type:
  • Core SDK loading (load-js-tag)
  • Profile loading (load-profile)
  • Data collection (collect-data)
  • Pathfora SDK loading (load-pathfora-tag)
  • CSS loading (load-pathfora-css)
  • Experience configuration (load-experience-config)
  • Legacy campaign configuration (load-campaign-config)

DL Notes:

^^ Do we want to include CS requests in this?

3.2 Activity Logging

• Chronological Log: Time-stamped activity feed with detailed request information
• Request Details: Expandable view showing:
  • URL parameters
  • POST data payload
  • Request timestamp
  • Human-readable descriptions
• Data Validation: Inspect jstag.send payloads and collected data
• Log Management: Clear logs functionality

4. Visitor Profile Management

4.1 Profile Access

• Real-Time Profile Loading: Fetch current visitor's complete Lytics profile
• Profile Summary View: Key metrics dashboard including:
  • Unique visitor ID
  • Unique anonymous cookie (_uid / seerid)
  • Behavioral scores (consistency, frequency, intensity, maturity, momentum)
  • Interest scores
  • Segment membership
  • Total available attributes count

DL Notes:

Seeing the identity graph here would be great, too.

5. Personalization Experience Management

5.1 Experience Discovery

• Active Experience Detection: Identify all active Lytics experiences on the current page
• Contentstack Experience Detection: Identify active Contentstack personalization experiences
• Configuration Display: Show experience configurations including:
  • Experience ID and type
  • Targeting criteria
  • Content variations
  • Priority settings
  • Platform-specific parameters

5.2 Legacy Campaign Support

• Campaign Detection: Identify active legacy campaigns and A/B tests
• Deprecation Warnings: Alert users to sunset features
• Migration Guidance: Provide information about experience migration

DL Notes:

fwiw, point 5 seems relatively optional to me.

6. Domain Management

6.1 Domain Pinning System

• Active Domain Detection: Automatically detect current website domain
• Domain Validation: Ensure extension is analyzing the correct domain
• Cross-Tab Tracking: Maintain domain focus across browser tabs
• Multi-Domain Support: Handle switching between different domains

6.2 URL Validation

• Domain Matching: Verify current tab matches pinned domain
• URL Filtering: Focus analysis on specific URL patterns
• Multi-Tab Support: Handle multiple tabs with same domain

7. Data Storage and Persistence

7.1 Storage Architecture

• Chrome Storage API: Utilize browser's extension storage
• Local Persistence: Maintain state across browser sessions
• Data Synchronization: Sync data between extension components
• Storage Management: Efficient data cleanup and management

7.2 Stored Data Types

• Platform Configuration: SDK configurations and settings
• Visitor Profiles: Current user profile data
• Activity Logs: Network request history
• Extension State: User preferences and settings
• Domain Settings: Pinned domains and URL configurations

8. Error Handling and Recovery

8.1 Robust Error Management

• Network Error Handling: Graceful handling of failed API requests
• Data Parsing: Safe JSON parsing with error recovery
• Retry Logic: Automatic retry mechanisms for failed operations
• Fallback States: Default states when data is unavailable

8.2 User Feedback

• Error Messages: Clear, actionable error communication
• Loading States: Progress indicators during data loading
• Empty States: Helpful guidance when no data is available
• Status Notifications: Real-time feedback on extension operations

9. Security and Privacy

9.1 Permission Management

• Minimal Permissions: Request only necessary Chrome permissions:
  • activeTab: Access to current tab
  • storage: Data persistence
  • webRequest: Network monitoring
  • sidePanel: UI interface
  • declarativeNetRequest: Request filtering
• Host Permissions: Access to all URLs for network monitoring

9.2 Data Protection

• Local Data Only: All data stored locally in browser
• Secure Communication: Safe message passing between components
• Data Cleanup: Automatic cleanup of temporary data

DL Notes:

"Local Data Only" may change if/when we support the extension making POST requests (Product Overview > Purpose > Future Capabilities).

10. Development and Build Requirements

10.1 Technology Stack

• Frontend Framework: React with TypeScript
• UI Library: Material-UI
• Build System: Vite 5.0+
• Testing Framework: Vitest with React Testing Library
• Code Quality: ESLint, Prettier, Commitlint integration
• Visualization Libraries: Chart.js, D3.js for data visualization

10.2 Build Pipeline

• Development Mode: Hot module replacement and live reloading
• Production Builds: Optimized builds for Chrome Web Store
• Testing: Automated unit and integration testing
• Packaging: Automated ZIP generation for distribution

11. User Experience Requirements

11.1 Onboarding & Training

• Installation Guide: Clear setup instructions
• Feature Discovery: Guided tour of debugging features
• Documentation Links: Easy access to help resources
• Quick Start: Immediate value for new users

11.2 Workflow Optimization

• Context Switching: Smooth navigation between debugging tasks
• Data Refresh: Real-time updates without manual refresh
• Keyboard Shortcuts: Power user functionality
• Export Capabilities: Data export for external analysis

12. Maintenance and Updates

12.1 Version Management

• Semantic Versioning: Clear version numbering strategy
• Update Notifications: Inform users of new features
• Backward Compatibility: Maintain compatibility with existing installations
• Migration Paths: Smooth upgrades between versions

12.2 Monitoring and Analytics

• Error Tracking: Monitor extension errors and crashes
• Usage Analytics: Understand feature adoption
• Performance Monitoring: Track extension performance metrics

Success Metrics

User Adoption

• Installation Rate: Target growth in Chrome Web Store installs
• Active Usage: Daily/weekly active users
• User Retention: 30-day and 90-day retention rates
• Feature Utilization: Usage distribution across main features

User Satisfaction

• Chrome Web Store Rating: Target 4.5+ star rating
• User Feedback: Positive feedback ratio
• Support Tickets: Reduction in support requests
• Documentation Usage: Self-service success rate

Technical Performance

• Extension Performance: Memory usage, load times, crash rates
• API Response Times: Speed of data loading and processing
• Error Rates: Frequency of extension errors and failures
• Browser Compatibility: Success rate across different Chrome versions

Future Enhancements

Phase 1 - Security & Authentication

• Authorized API Access: Implement secure API token management tied to specific domains to unlock advanced debugging features
• Cross-Customer Data Protection: Implement safeguards to prevent accidental exposure of customer data across different domains/accounts
• Enhanced Permission Model: Role-based access controls for different user types

Phase 2 - Advanced Features

• Enhanced Data Export: Export profile and activity data to multiple formats
• Custom Dashboards: User-configurable analytics views
• Advanced Filtering: Enhanced search and filter capabilities
• Historical Analytics: Trend analysis over time
• Multi-Site Management: Manage multiple implementations across sites

DL Notes:

Which trends are these?

Phase 3 - Platform Expansion

• Cross-Browser Support: Extension for other browsers
• Mobile Debugging: Tools for mobile app implementations
• Integration APIs: Connect with external debugging tools
• Advanced AI: Automated issue detection and recommendations

Constraints and Limitations

Technical Constraints

• Chrome Extension Limitations: Bound by browser extension capabilities
• Security Restrictions: Limited by Chrome's security model
• Network Access: Restricted to HTTPS contexts for sensitive operations
• Storage Limits: Chrome extension storage quotas

Security Constraints

• Unauthenticated Access: Currently limited to public data due to lack of API authentication
• Cross-Customer Risk: Risk of exposing customer data across different domains without proper safeguards
• Domain Isolation: Must ensure complete data isolation between different customer domains

This PRD serves as the comprehensive specification for rebuilding the Lytics Developer Tools Chrome Extension, providing detailed requirements for debugging, validation, and demonstration capabilities while maintaining security and user experience standards.