كيفية الحصول على العدد الحقيقي لمرات مشاهدة الصفحة لموقع ثابت

بالنظر إلى موقع ثابت ، كيف تحصل على العدد الحقيقي للزائرين؟

تحديث: ما عليك سوى استخدام Netlify Analytics إذا كنت جادًا في هذا الأمر.

هذا موقع ثابت. أنا أستخدم Google Analytics ، وجمهوري من المطورين.

مزيج مثالي لبيانات التحليلات غير الدقيقة ، نظرًا لأن العديد من المطورين يستخدمون أداة حظر الإعلانات ، والتي قد (أو قد لا تعتمد على ذلك) تمنع نقل بيانات Google Analytics إلى الخوادم. حتى أن بعض المطورين يحظرون JavaScript تمامًا ، لكنني أفترض أن هذه مجموعة أصغر من الأشخاص ، وبالتالي فهي أقل إشكالية.

لطالما كان لدي هذا الشك: ما هو العدد الحقيقي للزوار؟ ما هي النسبة المئوية للزائرين الذين أتطلع إليهم؟

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

لذلك قررت اختبار فكرة.

أقوم بتضمين صورة في كل منشور ، صورة صغيرة جدًا.

إنه ليس شيئًا جديدًا: تستخدم برامج التسويق عبر البريد الإلكتروني هذه "الحيلة" تلقائيًا لحساب معدلات الفتح.

لقد استخدمت صورة SVG بحجم 1 بكسل × 1 بكسل ، و 141 بايت من البيانات للحصول على تأثير ضئيل.

لقد أنشأت خادم ويب Node.js على Glitch:https://glitch.com/~static-site-visitors-counter. إذا قمت بتضمين الصورة في موقع الويب ، مثل هذا:

<img src="https://<name-of-the-project>.glitch.me/pixel.svg" />

خادم الويب Node.js الذي يعيش على ذلك<name-of-the-project>.glitch.meURL سيقوم بإرسال الصورة مرة أخرى.

لكن أولاً ، تزيد القيمة:

const express = require('express')
const app = express()
let counter = 0

app.use( express.static(‘public’, { setHeaders: (res, path, stat) => { console.log(++counter) }, }) )

const listener = app.listen(process.env.PORT, () => { console.log('Your app is listening on port ’ + listener.address().port) })

الجزء المهم من هذا التطبيق هو الشيء الذي نمررهexpress.static(). عادة لا نقوم بتمرير كائن إضافي لهذه الطريقة ، ولكن هناكsetHeaders()يتم توفير الوظيفة حتى نتمكن من تعيين بعض الرؤوس الإضافية للملف الذي سيتم تقديمه.

نضيف لديناconsole.log()هناك ، إساءة استخدام هذه الوظيفة لغرضنا.

الأمر بسيط للغاية ، وبسبب طريقة عمل Glitch ، ستتم إعادة ضبط العداد في كل مرة تقوم فيها بتحديث التطبيق.

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

ويمكن القيام بذلك بشكل مختلف ، نظرًا لأنني أستخدم SVG ، يمكنني أيضًا إرسال سلسلة مرة أخرى إلى العميل ، باستخدامContent-Typeرأس. لا أعرف ما إذا كان ذلك سيكون أسرع أم لا ، لم أحاول.

يمكنك أيضًا تقديم ملف CSS بنفس الطريقة. لقد صادفت للتو اختيار صورة.

لقد تركت هذا يعمل لمدة 3-4 ساعات وأظهرت البيانات ، مقارنة بسجلات Google Analytics ، أن حوالي 10 ٪ من الأشخاص الذين يزورون موقعي لا يرسلون البيانات إلى Google Analytics.

ليس كثيرا. كنت أتوقع أكثر من ذلك بكثير ، مثل ضعف عدد الزوار. أو 50٪ أكثر. لكن بزيادة قدرها 10٪ فقط.

وهو في الواقع الأفضل بالنسبة لي ، لأن هذا يعني أن بيانات Google Analytics لا تزال مفيدة للغاية.

إليك رمز التطبيق الكامل:https://glitch.com/edit/#!/static-site-visitors-counter


المزيد من الدروس المعملية: