* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; background: #f5f5f5; } .nav { background: #2c3e50; padding: 1rem 0; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; } .nav-brand { color: white; font-size: 1.5rem; font-weight: bold; text-decoration: none; } .nav-links { display: flex; gap: 2rem; list-style: none; } .nav-links a { color: white; text-decoration: none; padding: 0.5rem 1rem; border-radius: 4px; transition: background 0.3s; } .nav-links a:hover { background: rgba(255, 255, 255, 0.1); } .nav-links a.active { background: rgba(255, 255, 255, 0.2); } .container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; } .page-header { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; padding: 60px 40px; text-align: center; border-radius: 12px; margin-bottom: 40px; } .page-header h1 { font-size: 2.5rem; margin-bottom: 15px; } .content-section { background: white; padding: 40px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); margin-bottom: 30px; } .content-section h2 { color: #4facfe; margin-bottom: 20px; } .content-section p { color: #666; line-height: 1.8; margin-bottom: 15px; } .content-section ul { margin-left: 30px; color: #666; line-height: 2; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 30px; } .stat-card { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; padding: 30px; border-radius: 12px; text-align: center; } .stat-card h3 { font-size: 2.5rem; margin-bottom: 10px; } .stat-card p { color: white; opacity: 0.9; } .cta-box { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 40px; border-radius: 12px; text-align: center; margin-top: 40px; } .cta-box h2 { margin-bottom: 20px; } .btn { display: inline-block; padding: 12px 30px; background: white; color: #667eea; text-decoration: none; border-radius: 6px; font-weight: 600; transition: transform 0.3s; } .btn:hover { transform: translateY(-2px); } .debug-panel { position: fixed; bottom: 20px; right: 20px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); max-width: 400px; font-size: 0.9rem; } .debug-panel h4 { margin-bottom: 10px; color: #4facfe; } .debug-panel pre { background: #f4f4f4; padding: 10px; border-radius: 4px; overflow-x: auto; font-size: 0.85rem; } .feature-card { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s, box-shadow 0.3s; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } .feature-card h3 { color: #667eea; margin-bottom: 15px; font-size: 1.5rem; }

ما هو UX SDK؟

UX SDK هو مكتبة JavaScript خفيفة الوزن وتراعي الخصوصية مصممة لجمع بيانات تجربة المستخدم المجهولة من المواقع الإلكترونية. على عكس أدوات التحليلات التقليدية، نعطي الأولوية لخصوصية المستخدم مع توفير رؤى قيمة حول كيفية تفاعل المستخدمين مع موقعك.

تتتبع مكتبتنا مشاهدات الصفحات والنقرات والتمرير وتفاعلات النماذج دون جمع أي معلومات تعريف شخصية (PII). يتم تخزين جميع معرفات الزوار محلياً ولا يتم مشاركتها عبر النطاقات.

الميزات الرئيسية

تتبع الإحصائيات

تميز مكتبتنا بين الزوار والجلسات لتوفير تحليلات دقيقة:

يتيح لك ذلك فهم عدد المستخدمين الفريدين ومدى تكرار عودتهم إلى موقعك.

~17KB

حجم الحزمة

0

التبعيات

100%

آمن للخصوصية

مفتوح

المصدر

هل أنت مستعد للبدء؟

اتصل بنا لمعرفة المزيد حول تنفيذ UX SDK

اتصل بنا ←

🚨 اختبار الأخطاء

اختبر تتبع الأخطاء عن طريق إثارة أنواع مختلفة من الأخطاء:

سيتم التقاط الأخطاء وإرسالها إلى الخادم. تحقق من وحدة التحكم للتفاصيل.