Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

Просмотры страниц — важная метрика для отслеживания веб-производительности. Программные инструменты, такие как Google Analytics и Fathom, предоставляют простой способ сделать это с помощью внешнего скрипта.

Но, возможно, вы не хотите использовать стороннюю библиотеку. В таком случае вы можете использовать базу данных для отслеживания посетителей вашего сайта.

Supabase — это альтернатива Firebase с открытым исходным кодом, которая может помочь вам отслеживать просмотры страниц в режиме реального времени.

Подготовьте свой сайт к началу отслеживания просмотров страниц

Вам нужно иметь блог Next.js, чтобы следовать этому руководству. Если у вас его еще нет, вы можете создать блог на основе Markdown, используя react-markdown.

Вы также можете клонировать официальный стартовый шаблон блога Next.js из его Гитхаб репозиторий.

Supabase — это альтернатива Firebase, которая предоставляет базу данных Postgres, аутентификацию, мгновенные API, пограничные функции, подписки в реальном времени и хранилище.

instagram viewer

Вы будете использовать его для хранения просмотров страниц для каждого поста в блоге.

Создать базу данных Supabase

Перейти к Веб-сайт супабазы и войдите или зарегистрируйте учетную запись.

На панели инструментов Supabase нажмите Новый проект и выберите организацию (Supabase создаст организацию под именем пользователя вашей учетной записи).

Введите имя проекта и пароль, затем нажмите Создать новый проект.

На странице настроек в разделе API скопируйте URL-адрес проекта, а также открытый и секретный ключи.

Открой .env.local файл в проекте Next.js и скопируйте эти данные API.

NEXT_PUBLIC_SUPABASE_URL=""\nNEXT_PUBLIC_SUPABASE_KEY=""\nSUPABASE_SERVICE_KEY=""\n

Затем перейдите в редактор SQL и нажмите Новый запрос.

Использовать стандартная команда SQL для создания таблицы называется Просмотры.

СОЗДАВАТЬСТОЛ просмотры (\n идентификаторбольшойинтСОЗДАНКПО УМОЛЧАНИЮКАКЛИЧНОСТЬ НАЧАЛЬНЫЙ КЛЮЧ,\n слаг текстУНИКАЛЬНЫЙНЕТНУЛЕВОЙ,\nколичество_просмотров большойинтПО УМОЛЧАНИЮ1НЕТНУЛЕВОЙ,\n updated_at отметка времениПО УМОЛЧАНИЮСЕЙЧАС() НЕТНУЛЕВОЙ\п);\п

Кроме того, вы можете использовать редактор таблиц для создания таблицы представлений:

Редактор таблиц находится на левой панели панели инструментов.

Создайте хранимую процедуру Supabase для обновления представлений

Postgres имеет встроенную поддержку функций SQL, которые вы можете вызывать через API Supabase. Эта функция будет отвечать за увеличение количества просмотров в таблице просмотров.

Чтобы создать функцию базы данных, следуйте этим инструкциям:

  1. Перейдите в раздел редактора SQL на левой панели.
  2. Щелкните Новый запрос.
  3. Добавьте этот SQL-запрос, чтобы создать функцию базы данных. 
    СОЗДАВАТЬИЛИЗАМЕНЯТЬФУНКЦИЯ update_views (page_slug ТЕКСТ)
    ВОЗВРАТ пустота
    ЯЗЫК
    КАК $$
    НАЧИНАТЬ
     ЕСЛИ СУЩЕСТВУЕТ (ВЫБИРАТЬОТ Просмотры ГДЕ слаг=страница_слаг) ЗАТЕМ
    ОБНОВЛЯТЬ Просмотры
    НАБОР количество_просмотров = количество_просмотров + 1,
     updated_at = сейчас()
     ГДЕ slug = page_slug;
    ЕЩЕ
    ВСТАВЛЯТЬв просмотры (слаг) ЦЕННОСТИ (страница_слаг);
    КОНЕЦЕСЛИ;
    КОНЕЦ;
    $$;
  4. Нажмите Run или Cmd + Enter (Ctrl + Enter), чтобы выполнить запрос.

Эта функция SQL называется update_views и принимает текстовый аргумент. Сначала он проверяет, существует ли этот пост блога в таблице, и если да, то увеличивает количество просмотров на 1. Если это не так, он создает новую запись для сообщения, количество просмотров которого по умолчанию равно 1.

Настройте клиент Supabase в Next.js

Установите и настройте Supabase

Установите пакет @supabase/supabase-js через npm, чтобы подключиться к базе данных из Next.js.

установка нпм @supabase/supabase-js\n

Далее создайте /lib/supabase.ts в корне вашего проекта и инициализируйте клиент Supabase.

Импортировать { создать клиент } от'@supabase/supabase-js';\nconst supabaseUrl: string = process.env. NEXT_PUBLIC_SUPABASE_URL || '';\nconst supabaseServerKey: string = process.env. SUPABASE_SERVICE_KEY || '';\nconst supabase = createClient (supabaseUrl, supabaseServerKey);\nexport { supabase };\n

Помните, что вы сохранили учетные данные API в .env.local при создании базы данных.

Обновление просмотров страниц

Создайте маршрут API, который извлекает просмотры страниц из Supabase и обновляет количество просмотров каждый раз, когда пользователь посещает страницу.

Вы создадите этот маршрут в /api папка внутри файла с именем просмотров/[slug].ts. Использование скобок вокруг имени файла создает динамический маршрут. Совпадающие параметры будут отправлены в виде параметра запроса, который называется slug.

Импортировать { супербаза } от"../../../библиотека/супабаза/админ";\nimport { NextApiRequest, NextApiResponse } от"следующий";\nконстантный обработчик = асинхронный (требуется: NextApiRequest, разрешение: NextApiResponse) => {\n если (треб.метод "ПОЧТА") {\ п Ждите супабаза.rpc("обновление_просмотров", {\n page_slug: req.query.slug,\n});\n возвращаться рез.статус(200).json({\n сообщение: "Успех",\n });\n }\n если (треб.метод "ПОЛУЧАТЬ") {\ п константа {данные} = Ждите супабаза\n .от("Просмотры")\n .выбрать("количество_просмотров")\n .фильтр("слизняк", "экв", req.query.slug);\n если (данные) {\ п возвращаться рез.статус(200).json({\n всего: данные[0]?.view_count || 0,\n });\n }\n }\n возвращаться рез.статус(400).json({\n сообщение: "Неверный запрос",\n });\n};\nэкспорт по умолчанию обработчик;\n

Первый оператор if проверяет, является ли запрос запросом POST. Если это так, он вызывает SQL-функцию update_views и передает слаг в качестве аргумента. Функция увеличит количество просмотров или создаст новую запись для этого поста.

Второй оператор if проверяет, является ли запрос методом GET. Если это так, он извлекает общее количество просмотров для этого сообщения и возвращает его.

Если запрос не является запросом POST или GET, функция обработчика возвращает сообщение «Неверный запрос».

Добавить просмотры страниц в блог

Чтобы отслеживать просмотры страниц, вам нужно использовать маршрут API каждый раз, когда пользователь переходит на страницу.

Начните с установки пакета swr. Вы будете использовать его для получения данных из API.

нпм установить скорость\n

swr означает устаревший во время повторной проверки. Это позволяет вам отображать представления для пользователя, получая актуальные данные в фоновом режиме.

Затем создайте новый компонент с именем viewsCounter.tsx и добавьте следующее:

Импортировать использоватьSWR от"свир";\ninterface Props {\n slug: string;\n}\nconst fetcher = асинхронный (ввод: RequestInfo) => {\n константа рез: Ответ = Ждите выборка (ввод);\n возвращатьсяЖдите res.json();\n};\nconst ViewsCounter = ({ слаг }: Реквизит) => {\ nconst {данные} = useSWR (`/API/просмотры/${слаг}`, сборщик);\nвозврат (\n {`${\n (данные?.всего)? данные.всего:"0"\п } просмотры`}</span>\n );\n};\nэкспортировать ViewsCounter по умолчанию;\n

Этот компонент отображает общее количество просмотров для каждого блога. Он принимает слаг сообщения в качестве реквизита и использует это значение для выполнения запроса к API. Если API возвращает просмотры, он отображает это значение, в противном случае он отображает «0 просмотров».

Чтобы зарегистрировать представления, добавьте следующий код в компонент, который отображает каждое сообщение.

Импортировать { использовать эффект } от"реагировать";\nимпорт счетчика просмотров от"../../components/viewsCounter";\ninterface Props {\n slug: string;\n}\nconst Post = ({ слаг }: Реквизит) => {\n использоватьЭффект(() => {\ п получить (`/API/просмотры/${слаг}`, {\ п метод: 'ПОЧТА'\n });\n }, [slug]);\nreturn (\n 
\n \n // содержимое блога\n 

\n)\n}\nexport Post по умолчанию\n

Проверьте базу данных Supabase, чтобы увидеть, как обновляется количество просмотров. Он должен увеличиваться на 1 каждый раз, когда вы посещаете пост.

Отслеживание не только просмотров страниц

Просмотры страниц позволяют узнать, сколько пользователей посещают определенные страницы вашего сайта. Вы можете увидеть, какие страницы работают хорошо, а какие нет.

Чтобы пойти еще дальше, отслеживайте реферера вашего посетителя, чтобы увидеть, откуда идет трафик, или создайте панель мониторинга, чтобы лучше визуализировать данные. Помните, что вы всегда можете упростить ситуацию, используя такой инструмент аналитики, как Google Analytics.