Відстежуйте відвідувачів сайту в реальному часі без підписок

Клієнт хотів бачити, хто перебуває на їхньому сайті в режимі реального часу.

Їм сподобався віджет Tidio, але вони не хотіли платити за підписку.

Завдання складалося з двох частин:

  • Сайт використовував WordPress на іншому хостингу.
  • Я не міг додати Firebase безпосередньо до налаштувань WordPress.

Я створив зовнішній трекер за допомогою Firebase. Ось як він працює.

Рішення

Я використав один тег <script> у заголовку (header) WordPress. Цей скрипт підключається до незалежного проєкту Firebase.

• Live Presence: Я використав Firebase Realtime Database із функцією onDisconnect(). Це автоматично видаляє користувача зі списку «онлайн», коли він закриває вкладку або втрачає зв'язок. • Visitor History: Я використав Netlify Function для запису даних у Firestore. Це дозволяє здійснювати геолокацію за IP на стороні сервера. • Security: Я використав анонімну автентифікацію. Відвідувачі можуть записувати дані лише у свій власний вузол сесії. Тільки адміністратор може прочитати повний список.

Складні баги

Процес розробки не був гладким. Я зіткнувся з трьома серйозними технічними перешкодами.

  1. Пастка кешування В історії відображалося нуль сесій. Я з'ясував, що скрипт трекера мав політику кешування на один рік. Відвідувачі залишалися на старій версії скрипта.
  • Виправлення: Я встановив п'ятихвилинну політику кешування для скрипта трекера.
  1. Фейкова помилка CORS Браузер повідомляв про помилку CORS. Я подумав, що проблема у білому списку доменів. Простий тест через curl показав, що сервер працює нормально. Правда була іншою. Насправді сервер «падав». У Node.js, якщо ви використовуєте статус-код 204, ви не можете використовувати порожній рядок як тіло відповіді. Ви повинні використовувати null. Порожній рядок спричиняв збій ще до того, як надсилалися заголовки CORS. Браузер не бачив заголовків і припускав, що це проблема CORS.
  • Виправлення: Змінив тіло відповіді з '' на null.
  1. Прогалина в даних Фільтри «Сьогодні» або «За останні 7 днів» нічого не повертали. Деякі користувачі мали локацію «Unknown» (Невідомо). Це ставалося тому, що я обчислював мітку часу та місцезнаходження лише під час найпершого завантаження сторінки. Якщо у користувача в браузері була стара сесія, сервер пропускав подію «start».
  • Виправлення: Я зробив обчислення ідемпотентним. Тепер скрипт перераховує ці значення під час кожної події.

Ключові висновки

• Помилка CORS у браузері — це не завжди проблема конфігурації. Вона може приховувати збій сервера. Завжди перевіряйте логи сервера. • Тест curl POST не є еквівалентним тесту в браузері. Браузери спочатку надсилають попередній запит (preflight request) OPTIONS. Ваш тест має включати це, щоб бути коректним. • Використовуйте null для HTTP-статусів «без вмісту», таких як 204. Не використовуйте порожні рядки.

Джерело: https://dev.to/androve2k/whos-online-on-the-site-without-tidio-live-presence-and-visitor-history-with-firebase-37il