Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Показванията на страници са важен показател за проследяване на ефективността в мрежата. Софтуерни инструменти като Google Analytics и Fathom предоставят лесен начин за това с външен скрипт.

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

Supabase е алтернатива на Firebase с отворен код, която може да ви помогне да следите изгледите на страници в реално време.

Подгответе вашия сайт, за да започнете да проследявате показвания на страници

Трябва да имате блог Next.js, за да следвате този урок. Ако все още нямате такъв, можете създайте блог, базиран на Markdown, като използвате react-markdown.

Можете също да клонирате официалния шаблон за стартиране на блога Next.js от неговия GitHub хранилище.

Supabase е алтернатива на Firebase, която предоставя база данни на Postgres, удостоверяване, незабавни API, Edge функции, абонаменти в реално време и съхранение.

instagram viewer

Ще го използвате, за да съхранявате изгледите на страници за всяка публикация в блог.

Създайте база данни Supabase

Отидете на Уеб сайт на Supabase и влезте или се регистрирайте за акаунт.

На таблото за управление на Supabase щракнете върху Нов проект и изберете организация (Supabase ще създаде организация под потребителското име на вашия акаунт).

Попълнете името на проекта и паролата, след което щракнете Създайте нов проект.

В страницата с настройки в секцията API копирайте URL адреса на проекта и публичния и секретния ключ.

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

NEXT_PUBLIC_SUPABASE_URL=""\nNEXT_PUBLIC_SUPABASE_KEY=""\nSUPABASE_SERVICE_KEY=""\н

След това отворете SQL редактора и щракнете върху Нова заявка.

Използвай стандартна SQL команда за създаване на таблица Наречен изгледи.

СЪЗДАВАЙТЕТАБЛИЦА изгледи (\n документ за самоличностbigintГЕНЕРИРАНОТПО ПОДРАЗБИРАНЕКАТОИДЕНТИЧНОСТ ПЪРВИЧЕН КЛЮЧ,\n плужек текстЕДИНСТВЕН ПО РОДА СИНЕНУЛА,\n view_count bigintПО ПОДРАЗБИРАНЕ1НЕНУЛА,\n актуализиран_в клеймо за времеПО ПОДРАЗБИРАНЕСЕГА() НЕНУЛА\n);\n

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

Редакторът на таблици е в левия панел на таблото за управление.

Създайте Supabase съхранена процедура за актуализиране на изгледи

Postgres има вградена поддръжка за SQL функции, които можете да извикате чрез Supabase API. Тази функция ще отговаря за увеличаването на броя на изгледите в таблицата с изгледи.

За да създадете функция на база данни, следвайте тези инструкции:

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

Тази SQL функция се нарича update_views и приема текстов аргумент. Първо проверява дали тази публикация в блога вече съществува в таблицата и ако съществува, увеличава броя на показванията си с 1. Ако не го направи, той създава нов запис за публикацията, чийто брой показвания по подразбиране е 1.

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

Инсталирайте и конфигурирайте Supabase

Инсталирайте пакета @supabase/supabase-js чрез npm, за да се свържете с базата данни от Next.js.

npm инсталирайте @supabase/supabase-js\n

След това създайте a /lib/supabase.ts файл в корена на вашия проект и инициализирайте клиента Supabase.

импортиране { createClient } от„@supabase/supabase-js“;\nconst supabaseUrl: низ = process.env. NEXT_PUBLIC_SUPABASE_URL || '';\nconst supabaseServerKey: низ = process.env. SUPABASE_SERVICE_KEY || '';\nconst supabase = createClient (supabaseUrl, supabaseServerKey);\nexport { supabase };\n

Не забравяйте, че сте запазили идентификационните данни за API в .env.local, когато сте създали базата данни.

Актуализиране на изгледите на страници

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

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

импортиране { supabase } от"../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } от"следващия";\nconst манипулатор = асинхронен (req: NextApiRequest, рез: NextApiResponse) => {\n ако (необходим метод "ПУБЛИКУВАНЕ") {\н изчакайте supabase.rpc("актуализация_изгледи", {\n page_slug: req.query.slug,\n });\n връщане res.status(200).json({\n съобщение: "успех",\n });\n }\n ако (необходим метод "ВЗЕМИ") {\н конст {данни} = изчакайте supabase\n .from("изгледи")\n .select("Брой показвания")\n .filter("охлюв", "eq", req.query.slug);\n ако (данни) {\n връщане res.status(200).json({\n общо: данни[0]?.view_count || 0,\n });\n }\n }\n връщане res.status(400).json({\n съобщение: "Невалидна заявка",\n });\n};\nекспорт по подразбиране манипулатор;\n

Първият оператор if проверява дали заявката е POST заявка. Ако е така, той извиква SQL функцията update_views и предава slug-а като аргумент. Функцията ще увеличи броя на показванията или ще създаде нов запис за тази публикация.

Вторият оператор if проверява дали заявката е метод GET. Ако е така, той извлича общия брой показвания за тази публикация и го връща.

Ако заявката не е POST или GET заявка, манипулаторната функция връща съобщение „Невалидна заявка“.

Добавете показвания на страници към блога

За да проследявате изгледите на страници, трябва да използвате API маршрута всеки път, когато потребител навигира до страница.

Започнете с инсталирането на swr пакета. Ще го използвате, за да извлечете данните от API.

npm Инсталирай swr\n

swr означава остаряло при повторно валидиране. Тя ви позволява да показвате изгледите на потребителя, докато извличате актуални данни във фонов режим.

След това създайте нов компонент, наречен viewsCounter.tsx, и добавете следното:

импортиране използвайте КСВ от"swr";\ninterface Props {\n slug: низ;\n}\nconst fetcher = асинхронен (вход: RequestInfo) => {\n конст res: Отговор = изчакайте извличане (въвеждане);\n връщанеизчакайте res.json();\n};\nconst ViewsCounter = ({slug}: Реквизити) => {\nconst { data } = useSWR(`/api/гледания/${slug}`, извличане);\nвръщане (\n {`${\n (данни?.общо)? data.total:"0"\н } изгледи`}</span>\n );\n};\nекспортиране на брояча на изгледи по подразбиране;\n

Този компонент изобразява общите изгледи за всеки блог. Той приема slug на публикация като опора и използва тази стойност, за да направи заявка към API. Ако API връща изгледи, той показва тази стойност, в противен случай показва „0 изгледа“.

За да регистрирате изгледи, добавете следния код към компонента, който изобразява всяка публикация.

импортиране {useEffect} от"реагира";\nimport ViewsCounter от"../../components/viewsCounter";\ninterface Props {\n slug: string;\n}\nconst Post = ({ slug }:Реквизити) => {\n useEffect(() => {\n извличане(`/api/гледания/${slug}`, {\n метод: „ПУБЛИКУВАНЕ“\n });\n }, [slug]);\nвръщане (\n 
\н \н // съдържание на блога\n 

\n)\n}\nекспортиране на публикация по подразбиране\n

Проверете базата данни на Supabase, за да видите как се актуализира броят на изгледите. Трябва да се увеличава с 1 всеки път, когато посетите публикация.

Проследяване на повече от показвания на страници

Показванията на страници ви дават да знаете колко потребители посещават определени страници на вашия сайт. Можете да видите кои страници се представят добре и кои не.

За да отидете още по-далеч, следете референта на вашия посетител, за да видите откъде идва трафикът или създайте табло за управление, за да визуализирате по-добре данните. Не забравяйте, че винаги можете да опростите нещата, като използвате инструмент за анализ като Google Analytics.