سجل الصفحات في لغة JavaScript

المقدمة: ليش نحتاج نسجل الصفحات؟

يا هلا! تخيل موقعك شغال زي الفل، بس كيف تعرف المستخدمين وين يروحون بالضبط؟ وش الصفحات اللي يزورونها أكثر شي؟ أو حتى لو صار خطأ، كيف تعرف وين صار؟ هنا يجي دور "سجل الصفحات" أو "Page Logging" في JavaScript. ببساطة، هو إنك تسجل كل حركة مهمة يسويها المستخدم عشان تفهم سلوكه وتطور موقعك.

الأساسيات: تسجيل زيارة الصفحة

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

ملاحظة: أفضل وقت لتسجيل زيارة الصفحة هو بعد ما كل محتويات الصفحة تكون حملت، عشان نضمن إن المستخدم شافها بالفعل.

نستخدم DOMContentLoaded (أفضل من window.onload لأنه أسرع) عشان نتأكد إن الـ HTML جاهز.

document.addEventListener('DOMContentLoaded', () => {
    const pageData = {
        url: window.location.href,
        timestamp: new Date().toISOString(),
        userAgent: navigator.userAgent,
        // ممكن تضيف user ID لو المستخدم مسجل دخول
        // userId: someUserIdVariable
    };

    // إرسال البيانات للخادم
    fetch('/api/log-page-visit', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(pageData),
    })
    .then(response => {
        if (!response.ok) {
            console.error('Failed to log page visit:', response.statusText);
        }
    })
    .catch(error => {
        console.error('Error sending page visit log:', error);
    });
});

في الكود اللي فوق، جمعنا شوية معلومات زي رابط الصفحة window.location.href، الوقت new Date().toISOString()، ونوع المتصفح navigator.userAgent. بعدين أرسلناها لخادمك (على مسار /api/log-page-visit كمثال) باستخدام fetch بطلب POST.

تسجيل تفاعلات المستخدم (الأكثر فائدة!)

تسجيل زيارة الصفحة حلو، بس الأهم هو وش يسوي المستخدم داخل الصفحة. نقدر نسجل نقرات الأزرار، إرسال الفورمات، وغيرها.

1. تسجيل النقرات (Clicks)

لو عندك زر مهم أو رابط تبغى تعرف كم مرة انضغط، تقدر تضيف له Event Listener.

document.addEventListener('DOMContentLoaded', () => {
    const myButton = document.getElementById('myImportantButton');
    if (myButton) {
        myButton.addEventListener('click', () => {
            const clickData = {
                elementId: 'myImportantButton',
                action: 'button_click',
                page: window.location.pathname,
                timestamp: new Date().toISOString(),
            };
            fetch('/api/log-event', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(clickData),
            }).catch(error => console.error('Error logging click:', error));
        });
    }
});

نصيحة: لا تسجل كل نقرة صغيرة! ركز على التفاعلات اللي لها معنى وتفيدك في تحسين تجربة المستخدم أو أهداف العمل.

2. تسجيل إرسال الفورم (Form Submissions)

هذي مهمة جداً عشان تعرف كم فورم يتم إرساله بنجاح أو حتى لو صار خطأ.

document.addEventListener('DOMContentLoaded', () => {
    const contactForm = document.getElementById('contactForm');
    if (contactForm) {
        contactForm.addEventListener('submit', (event) => {
            // هنا ممكن تسجل إن الفورم انرسل بنجاح أو حتى البيانات اللي انرسلت (بحذر لأجل الخصوصية!)
            const formData = {
                formName: 'contactForm',
                status: 'submitted',
                page: window.location.pathname,
                timestamp: new Date().toISOString(),
            };
            fetch('/api/log-form-submission', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(formData),
            }).catch(error => console.error('Error logging form submission:', error));
        });
    }
});

اعتبارات مهمة

قبل لا تسجل كل شي، فيه كم نقطة لازم تحطها ببالك:

• الأداء: كثرة طلبات الـ fetch ممكن تبطئ الموقع. حاول تجمع الأحداث وترسلها دفعة واحدة كل فترة (Batching) أو عند مغادرة المستخدم للصفحة (navigator.sendBeacon).
• الخصوصية (Privacy): لا تسجل أي معلومات حساسة عن المستخدم (مثل كلمات المرور، أرقام البطاقات، أو معلومات شخصية جداً) إلا إذا كان عندك مبرر قوي وموافقة صريحة. التزم بقوانين الخصوصية مثل GDPR.
• معالجة الأخطاء: تأكد إن كود الإرسال يتعامل مع الأخطاء بشكل جيد عشان ما يعطل تجربة المستخدم.
• مرونة الخادم: الخادم اللي يستقبل السجلات لازم يكون مصمم يتحمل عدد كبير من الطلبات.

الخاتمة

سجل الصفحات في JavaScript أداة قوية جداً عشان تفهم سلوك المستخدمين وتحسن موقعك. ابدأ بتسجيل الأساسيات، وبعدين ابدأ أضف تسجيل للتفاعلات المهمة اللي فعلاً بتفيدك. بالتوفيق!

← السابقالفهرس