Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере. Опширније.

Прикази странице су важан показатељ за праћење веб учинка. Софтверски алати као што су Гоогле аналитика и Фатхом пружају једноставан начин да се то уради помоћу спољне скрипте.

Али можда не желите да користите библиотеку треће стране. У том случају, можете користити базу података да бисте пратили посетиоце вашег сајта.

Супабасе је Фиребасе алтернатива отвореног кода која вам може помоћи да пратите приказе страница у реалном времену.

Припремите свој сајт за почетак праћења приказа страница

Морате да имате Нект.јс блог да бисте пратили овај водич. Ако га већ немате, можете направите блог заснован на Маркдовну користећи реацт-маркдовн.

Такође можете да клонирате званични Нект.јс шаблон за покретање блога из његовог ГитХуб репозиторијум.

Супабасе је Фиребасе алтернатива која обезбеђује Постгрес базу података, аутентификацију, тренутне АПИ-је, Едге функције, претплате у реалном времену и складиште.

Користићете га за чување приказа страница за сваки пост на блогу.

Направите базу података Супабасе

Иди на Супабасе вебсите и пријавите се или се пријавите за налог.

На контролној табли Супабасе кликните на Нови пројекат и изаберите организацију (Супабасе ће креирати организацију под корисничким именом вашег налога).

Унесите име пројекта и лозинку, а затим кликните Креирајте нови пројекат.

На страници са подешавањима у одељку АПИ копирајте УРЛ пројекта и јавни и тајни кључ.

Отвори .енв.лоцал датотеку у Нект.јс пројекту и копирајте ове детаље о АПИ-ју.

НЕКСТ_ПУБЛИЦ_СУПАБАСЕ_УРЛ=""\нНЕКСТ_ПУБЛИЦ_СУПАБАСЕ_КЕИ=""\нСУПАБАСЕ_СЕРВИЦЕ_КЕИ=""\н

Затим идите до СКЛ едитора и кликните на Нови упит.

Користити стандардна СКЛ команда за креирање табеле зове погледа.

КРЕИРАЈСТО прегледа (\н идбигинтГЕНЕРИСАНОД СТРАНЕУОБИЧАЈЕНОКАОИДЕНТИТЕТ ПРИМАРНА КЉУЧ,\н пуж текстУНИКУЕНЕНУЛА,\н виев_цоунт бигинтУОБИЧАЈЕНО1НЕНУЛА,\н упдатед_ат временска ознакаУОБИЧАЈЕНОСАДА() НЕНУЛА\н);\н

Алтернативно, можете користити уређивач табеле да креирате табелу приказа:

Уређивач табеле се налази у левом окну на контролној табли.

Креирајте сачувану процедуру Супабасе за ажурирање погледа

Постгрес има уграђену подршку за СКЛ функције које можете позвати преко Супабасе АПИ-ја. Ова функција ће бити одговорна за повећање броја прегледа у табели приказа.

Да бисте креирали функцију базе података, пратите ова упутства:

  1. Идите на одељак СКЛ едитор на левом окну.
  2. Кликните на Нови упит.
  3. Додајте овај СКЛ упит да бисте креирали функцију базе података. 
    КРЕИРАЈИЛИЗАМЕНИТИФУНЦТИОН упдате_виевс (паге_слуг ТЕКСТ)
    РЕТУРНС празнина
    ЈЕЗИК плпгскл
    КАО $$
    ЗАПОЧЕТИ
     АКО ПОСТОЈИ (СЕЛЕЦТИЗ погледа ГДЕ слуг=пуж_странице) ОНДА
    АЖУРИРАЊЕ погледа
    КОМПЛЕТ виев_цоунт = виев_цоунт + 1,
     упдатед_ат = сада()
     ВХЕРЕ пуж = паге_слуг;
    ЕЛСЕ
    ИНСЕРТу погледи (пуж) ВРЕДНОСТИ (паге_слуг);
    КРАЈАКО;
    КРАЈ;
    $$;
  4. Кликните на Покрени или Цмд + Ентер (Цтрл + Ентер) да бисте извршили упит.

Ова СКЛ функција се зове упдате_виевс и прихвата текстуални аргумент. Прво проверава да ли тај блог пост већ постоји у табели и ако постоји, повећава број прегледа за 1. Ако није, креира нови унос за објаву чији је број прегледа подразумевано 1.

Подесите Супабасе Цлиент у Нект.јс

Инсталирајте и конфигуришите Супабасе

Инсталирајте пакет @супабасе/супабасе-јс преко нпм-а да бисте се повезали са базом података из Нект.јс.

нпм инсталл @супабасе/supabase-js\n

Затим креирајте а /lib/supabase.ts датотеку у корену вашег пројекта и иницијализујте Супабасе клијента.

увоз { цреатеЦлиент } из'@супабасе/супабасе-јс';\нцонст супабасеУрл: стринг = процесс.енв. НЕКСТ_ПУБЛИЦ_СУПАБАСЕ_УРЛ || '';\нцонст супабасеСерверКеи: стринг = процесс.енв. СУПАБАСЕ_СЕРВИЦЕ_КЕИ || '';\нцонст супабасе = цреатеЦлиент (супабасеУрл, супабасеСерверКеи);\некпорт { супабасе };\н

Запамтите да сте сачували АПИ акредитиве у .енв.лоцал када сте креирали базу података.

Ажурирајте приказе странице

Направите АПИ руту која преузима приказе страница из Супабасе-а и ажурира број прегледа сваки пут када корисник посети страницу.

Ову руту ћете креирати у /api фолдер унутар датотеке под називом виевс/[слуг].тс. Коришћење заграда око имена датотеке ствара динамичку руту. Подударни параметри ће бити послати као параметар упита који се зове слуг.

увоз { супабасе } из"../../../либ/супабасе/админ";\нимпорт { НектАпиРекуест, НектАпиРеспонсе} из"следећи";\нцонст хандлер = асинц (захтев: НектАпиРекуест, рес: НектАпиРеспонсе) => {\н ако (рек.метход "ПОШТА") {\н чекати супабасе.рпц("упдате_виевс", {\н паге_слуг: рек.куери.слуг,\н });\н повратак рес.статус(200).јсон({\н порука: "Успех",\н });\н }\н ако (рек.метход "ДОБИТИ") {\н конст {подаци} = чекати супабасе\н .фром("прегледи")\н .селецт("виев_цоунт")\н .филтер("пуж", "ек", рек.куери.слуг);\н ако (подаци) {\н повратак рес.статус(200).јсон({\н укупно: подаци[0]?.виев_цоунт || 0,\н });\н }\н }\н повратак рес.статус(400).јсон({\н порука: "Неважећи Упит",\н });\н};\неизвези Уобичајено руковалац;\н

Први иф наредба проверава да ли је захтев ПОСТ захтев. Ако јесте, позива СКЛ функцију упдате_виевс и прослеђује слаг као аргумент. Функција ће повећати број прегледа или креирати нови унос за ову објаву.

Други иф наредба проверава да ли је захтев ГЕТ метод. Ако јесте, преузима укупан број прегледа за тај пост и враћа га.

Ако захтев није ПОСТ или ГЕТ захтев, функција руковаоца враћа поруку „Неважећи захтев“.

Додајте приказе страница на блог

Да бисте пратили приказе страница, морате да погодите АПИ руту сваки пут када корисник дође до странице.

Почните тако што ћете инсталирати свр пакет. Користићете га за преузимање података из АПИ-ја.

нпм инсталирај свр\н

свр означава застарели док поново потврди. Омогућава вам да прикажете приказе кориснику док преузимате ажуриране податке у позадини.

Затим креирајте нову компоненту под називом виевсЦоунтер.тск и додајте следеће:

увоз усеСВР из"свр";\нинтерфејс Реквизити {\н пуж: стринг;\н}\нконст дохват = асинц (унос: РекуестИнфо) => {\н конст рес: Одговор = чекати дохватити (унос);\н повратакчекати рес.јсон();\н};\нцонст ВиевсЦоунтер = ({ слуг }: Реквизити) => {\нцонст { дата } = усеСВР(`/апи/виевс/${слуг}`, преузимање);\нповратак (\н {`${\н (подаци?.укупно)? дата.тотал :"0"\н } погледа`}</спан>\н );\н};\неизвези подразумевани ВиевсЦоунтер;\н

Ова компонента приказује укупан број прегледа за сваки блог. Он прихвата ознаку поста као пропс и користи ту вредност да упути захтев АПИ-ју. Ако АПИ враћа приказе, он приказује ту вредност, иначе приказује „0 прегледа“.

Да бисте регистровали приказе, додајте следећи код компоненти која приказује сваки пост.

увоз { усеЕффецт } из"реаговати";\импорт ВиевсЦоунтер из"../../цомпонентс/виевсЦоунтер";\ниинтерфаце Пропс {\н слуг: стринг;\н}\нцонст Пост = ({ слуг }:Реквизити) => {\н усеЕффецт(() => {\н дохвати(`/апи/виевс/${слуг}`, {\н метод: 'ПОШТА'\н });\н }, [пуж]);\нповратак (\н 
\н \н // садржај блога\н 

\н)\н}\неизвези подразумевани пост\н

Проверите базу података Супабасе да видите како се ажурира број прегледа. Требало би да се повећа за 1 сваки пут када посетите пост.

Праћење више од приказа странице

Прикази странице вам дају до знања колико корисника посећује одређене странице на вашем сајту. Можете видети које странице имају добар учинак, а које не.

Да бисте отишли ​​још даље, пратите упућивача вашег посетиоца да бисте видели одакле долази саобраћај или направите контролну таблу да бисте боље визуелизовали податке. Запамтите да увек можете да поједноставите ствари помоћу аналитичког алата као што је Гоогле аналитика.