Как отслеживать просмотры страниц в вашем блоге с помощью Supabase

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

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

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

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

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

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

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

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

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

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

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

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

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

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

как избавиться от вредоносного ПО в Windows 10

Снимок экрана с ключами API проекта Supabase

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

ФБК4ДЕ517БДА0Д89АД943Ф90891Б0БКД910А06А3

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

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

 CREATE TABLE views (\n id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,\n slug text UNIQUE NOT NULL,\n view_count bigint DEFAULT 1 NOT NULL,\n updated_at timestamp DEFAULT NOW() NOT NULL\n);\n

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

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

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

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

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

Перейдите в раздел редактора SQL на левой панели.
Щелкните Новый запрос.

Добавьте этот SQL-запрос, чтобы создать функцию базы данных.

 CREATE OR REPLACE FUNCTION update_views(page_slug TEXT) 
RETURNS void 
LANGUAGE plpgsql 
AS $$ 
BEGIN 
    IF EXISTS (SELECT FROM views WHERE slug=page_slug) THEN 
        UPDATE views 
        SET view_count = view_count + 1, 
            updated_at = now() 
        WHERE slug = page_slug; 
    ELSE 
        INSERT into views(slug) VALUES (page_slug); 
    END IF; 
END; 
$$;

Нажмите Run или Cmd + Enter (Ctrl + Enter), чтобы выполнить запрос.

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

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

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

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

 npm install @supabase/supabase-js\n

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

 import { createClient } from '@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 и обновляет количество просмотров каждый раз, когда пользователь посещает страницу.

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

 import { supabase } from "../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } from "next";\nconst handler = async (req: NextApiRequest, res: NextApiResponse) => {\n if (req.method === "POST") {\n await supabase.rpc("update_views", {\n page_slug: req.query.slug,\n });\n return res.status(200).json({\n message: "Success",\n });\n }\n if (req.method === "GET") {\n const { data } = await supabase\n .from("views")\n .select("view_count")\n .filter("slug", "eq", req.query.slug);\n if (data) {\n return res.status(200).json({\n total: data[0]?.view_count || 0,\n });\n }\n }\n return res.status(400).json({\n message: "Invalid request",\n });\n};\nexport default handler;\n

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

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

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

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

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

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

Ф072574338535ФД5Д88Э403АД802ФЭ1046487КБ1

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

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

 import useSWR from "swr";\ninterface Props {\n slug: string;\n}\nconst fetcher = async (input: RequestInfo) => {\n const res: Response = await fetch(input);\n return await res.json();\n};\nconst ViewsCounter = ({ slug }: Props) => {\nconst { data } = useSWR(`/api/views/${slug}`, fetcher);\nreturn (\n <span>{`${\n (data?.total) ? data.total :"0"\n } views`}</span>\n );\n};\nexport default ViewsCounter;\n

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

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

 import { useEffect } from "react";\nimport ViewsCounter from "../../components/viewsCounter";\ninterface Props {\n slug: string;\n}\nconst Post = ({ slug }:Props) => {\n useEffect(() => {\n fetch(`/api/views/${slug}`, {\n method: 'POST'\n });\n }, [slug]);\nreturn (\n <div>\n <ViewsCounter slug={slug}/>\n // blog content\n </div>\n)\n}\nexport default Post\n

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

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

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

скачать музыку бесплатно без регистрации

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