تحليلات ومراقبة تطبيقات الويب التقدمية

<script> // تتبع أحداث تثبيت PWA let deferredPrompt; let installSource = 'unknown'; // الاستماع لحدث beforeinstallprompt window.addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); deferredPrompt = e; // تتبع أن مطالبة التثبيت تم عرضها trackEvent('pwa_install_prompt_shown', { timestamp: new Date().toISOString(), userAgent: navigator.userAgent }); // عرض زر التثبيت المخصص document.getElementById('installButton').style.display = 'block'; }); // معالجة نقرة زر التثبيت document.getElementById('installButton').addEventListener('click', async () => { if (!deferredPrompt) return; installSource = 'custom_button'; // عرض مطالبة التثبيت deferredPrompt.prompt(); // انتظر اختيار المستخدم const { outcome } = await deferredPrompt.userChoice; // تتبع قرار التثبيت trackEvent('pwa_install_decision', { outcome: outcome, // 'accepted' أو 'dismissed' source: installSource, timestamp: new Date().toISOString() }); if (outcome === 'accepted') { console.log('تم تثبيت PWA بنجاح'); } deferredPrompt = null; }); // تتبع التثبيت الناجح window.addEventListener('appinstalled', (e) => { trackEvent('pwa_installed', { source: installSource, timestamp: new Date().toISOString(), platform: getPlatform() }); console.log('تم تثبيت PWA'); }); // الكشف عما إذا كان PWA يعمل كتطبيق مثبت function isPWAInstalled() { return window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true; // iOS } if (isPWAInstalled()) { trackEvent('pwa_launched', { displayMode: 'standalone', timestamp: new Date().toISOString() }); } function getPlatform() { const ua = navigator.userAgent; if (/android/i.test(ua)) return 'android'; if (/iPad|iPhone|iPod/.test(ua)) return 'ios'; if (/Win/.test(ua)) return 'windows'; if (/Mac/.test(ua)) return 'macos'; if (/Linux/.test(ua)) return 'linux'; return 'unknown'; } </script>

// offline-analytics.js - وضع التحليلات في قائمة الانتظار عندما تكون غير متصل class OfflineAnalytics { constructor() { this.dbName = 'pwa-analytics'; this.storeName = 'events'; this.db = null; this.init(); } async init() { this.db = await this.openDatabase(); this.setupSyncListener(); } openDatabase() { return new Promise((resolve, reject) => { const request = indexedDB.open(this.dbName, 1); request.onerror = () => reject(request.error); request.onsuccess = () => resolve(request.result); request.onupgradeneeded = (event) => { const db = event.target.result; if (!db.objectStoreNames.contains(this.storeName)) { db.createObjectStore(this.storeName, { keyPath: 'id', autoIncrement: true }); } }; }); } async track(eventName, eventData = {}) { const event = { name: eventName, data: eventData, timestamp: Date.now(), synced: false, offline: !navigator.onLine }; if (navigator.onLine) { // الإرسال فورًا إذا كان متصلاً await this.sendToServer(event); } else { // الانتظار لاحقًا إذا كان غير متصل await this.queueEvent(event); console.log('تم وضع الحدث في قائمة الانتظار للمزامنة دون اتصال:', eventName); } } async sendToServer(event) { try { const response = await fetch('/api/analytics', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(event) }); if (response.ok) { event.synced = true; return true; } } catch (error) { console.error('فشل إرسال التحليلات:', error); await this.queueEvent(event); } return false; } setupSyncListener() { window.addEventListener('online', () => { console.log('تمت استعادة الاتصال، مزامنة التحليلات...'); this.syncQueuedEvents(); }); } } // تهيئة التحليلات دون اتصال const analytics = new OfflineAnalytics(); // تتبع الأحداث function trackEvent(name, data) { analytics.track(name, data); } </script>

<script> // تتبع مؤشرات الويب الحيوية باستخدام مكتبة web-vitals import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals'; // تتبع جميع مؤشرات الويب الحيوية الأساسية function trackWebVitals() { getCLS((metric) => { trackEvent('web_vital_cls', { value: metric.value, rating: getRating(metric.rating), delta: metric.delta, id: metric.id }); }); getFID((metric) => { trackEvent('web_vital_fid', { value: metric.value, rating: getRating(metric.rating), delta: metric.delta, id: metric.id }); }); getLCP((metric) => { trackEvent('web_vital_lcp', { value: metric.value, rating: getRating(metric.rating), delta: metric.delta, id: metric.id }); }); } // تهيئة التتبع trackWebVitals(); </script>

<script> // نظام تتبع الأخطاء class ErrorTracker { constructor() { this.setupGlobalErrorHandler(); this.setupUnhandledRejectionHandler(); this.setupServiceWorkerErrorHandler(); } setupGlobalErrorHandler() { window.addEventListener('error', (event) => { this.trackError({ type: 'javascript_error', message: event.message, filename: event.filename, line: event.lineno, column: event.colno, stack: event.error?.stack, timestamp: Date.now(), userAgent: navigator.userAgent, url: window.location.href }); }); } setupUnhandledRejectionHandler() { window.addEventListener('unhandledrejection', (event) => { this.trackError({ type: 'unhandled_promise_rejection', message: event.reason?.message || event.reason, stack: event.reason?.stack, timestamp: Date.now(), userAgent: navigator.userAgent, url: window.location.href }); }); } trackError(errorData) { console.error('تم تتبع الخطأ:', errorData); this.sendToServer(errorData); } async sendToServer(errorData) { try { await fetch('/api/errors', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(errorData) }); } catch (error) { console.error('فشل إرسال تقرير الخطأ:', error); } } } // تهيئة متتبع الأخطاء const errorTracker = new ErrorTracker(); </script>

<script> // تتبع تفاعل المستخدم class EngagementTracker { constructor() { this.sessionStart = Date.now(); this.totalEngagementTime = 0; this.isActive = true; this.setupTracking(); } setupTracking() { // تتبع رؤية الصفحة document.addEventListener('visibilitychange', () => { if (document.hidden) { this.pauseEngagement(); } else { this.resumeEngagement(); } }); // تتبع تفاعلات المستخدم ['click', 'scroll', 'keydown', 'mousemove'].forEach(event => { document.addEventListener(event, () => this.recordActivity(), { passive: true }); }); } recordActivity() { this.isActive = true; this.lastActivityTime = Date.now(); } getMetrics() { return { sessionDuration: Date.now() - this.sessionStart, engagementTime: this.totalEngagementTime, isActive: this.isActive }; } } // تهيئة متتبع التفاعل const engagement = new EngagementTracker(); </script>