У цій статті ми розглянемо, як налаштувати аналітику Goatcounter в React додатку.
Goatcounter? Що це?
Goatcounter — це інструмент для веб-аналітики з відкритим кодом. Для більших проектів його можна хостити на власному сервері. Для менших особистих проектів можна використовувати goatcounter.com безкоштовно.
Він стверджує, що є більш дружнім до конфіденційності, ніж широко використовуваний Google Analytics, і зазвичай не потребує повідомлення про GDPR.
Для цілей цього посібника ми будемо використовувати безкоштовну хостингову версію на goatcounter.com
Попередні вимоги
- У вас є обліковий запис Goatcounter - https://www.goatcounter.com/signup
Як налаштувати
Для початку створіть новий React додаток:
yarn create vite my-react-app --template react
Далі давайте перейдемо в наш новий проект і встановимо залежності:
cd my-react-app && yarn
Після того, як всі залежності будуть встановлені, створимо файл .env для збереження налаштувань Goatcounter:
touch .env
Усередині файлу .env додамо наступне:
// .env
VITE_GOATCOUNTER_ALLOW_LOCAL=true
VITE_GOATCOUNTER_URL=https://{your-account}.goatcounter.com
Замість {your-account} вкажіть ім’я вашого облікового запису Goatcounter, це налаштовується під час реєстрації.
Тепер, коли у нас є налаштування, потрібно переконатися, що наш React додаток правильно викликає функцію підрахунку Goatcounter. Спочатку оновимо файл index.html, щоб додати необхідні скрипти:
Тут ми додали елемент script до нашого HTML. Також ви побачите, що ми вказали атрибут integrity — це дозволяє браузеру клієнта перевірити скрипт і переконатися, що він не був змінений. Це важливий крок при включенні сторонніх скриптів в ваш веб-додаток.
Вам слід безпосередньо перейти до списку версій на Goatcounter, щоб знайти останню версію.
Ми також посилаємось на змінні .env, які ми створили на попередньому етапі. Це дозволяє скрипту Goatcounter знати, який обліковий запис використовувати для відстеження аналітики. Оскільки ми будемо запускати додаток локально, ми також передаємо змінну VITE_GOATCOUNTER_ALLOW_LOCAL до відповідного атрибуту.
Тепер перейдемо до файлу App.jsx і оновимо імпорти React:
// src/App.jsx
import { useEffect, useState } from 'react'
Тепер ми використаємо хук useEffect, щоб викликати функцію підрахунку щоразу, коли змінюється наше місцезнаходження. Усередині функції App ми додамо:
// src/App.jsx
function App() {
const [count, setCount] = useState(0)
useEffect(() => {
if (window.goatcounter) {
window.goatcounter.count({
path: location.pathname + location.search + location.hash,
});
}
}, [location]);
І все! Тепер ми повинні бути в змозі запустити додаток, використовуючи команду yarn dev, і перейти до нього в браузері за адресою http://localhost:5173/
Якщо ви відкриєте вкладку "Network" у інструментах розробника, ви побачите, що при завантаженні сторінки був здійснений запит до Goatcounter для відстеження перегляду сторінки:
Запит до Goatcounter
І в нашому обліковому записі Goatcounter ми побачимо, що перегляд сторінки було зареєстровано:
Goatcounter успішно відстежив перегляд сторінки
Перекладено з: Goatcounter analytics in a React app