Paano Subaybayan ang Mga Page View sa Iyong Blog Gamit ang Supabase

Ang mga mambabasang tulad mo ay tumutulong sa pagsuporta sa MUO. Kapag bumili ka gamit ang mga link sa aming site, maaari kaming makakuha ng isang affiliate na komisyon. Magbasa pa.

Ang mga page view ay isang mahalagang sukatan para sa pagsubaybay sa pagganap ng web. Ang mga tool sa software tulad ng Google Analytics at Fathom ay nagbibigay ng isang simpleng paraan ng paggawa nito gamit ang isang panlabas na script.

Ngunit marahil ay hindi mo gustong gumamit ng isang third-party na library. Sa ganoong kaso, maaari kang gumamit ng database upang subaybayan ang mga bisita ng iyong site.

Ang Supabase ay isang open-source na alternatibong Firebase na makakatulong sa iyong subaybayan ang mga page view nang real time.

Ihanda ang Iyong Site para Simulan ang Pagsubaybay sa Mga Page View

Kailangan mong magkaroon ng Next.js blog upang masundan kasama ng tutorial na ito. Kung wala ka pa, maaari mo lumikha ng Markdown-based na blog gamit ang react-markdown .

Maaari mo ring i-clone ang opisyal na Next.js blog starter template mula dito GitHub imbakan.

Ang Supabase ay isang alternatibo sa Firebase na nagbibigay ng database ng Postgres, pagpapatotoo, instant API, Edge Function, real-time na subscription, at storage.

Gagamitin mo ito upang iimbak ang mga page view para sa bawat post sa blog.

Gumawa ng Supabase Database

Pumunta sa Website ng Supabase at mag-sign in o mag-sign up para sa isang account.

Sa dashboard ng Supabase, mag-click sa Bagong proyekto at pumili ng isang organisasyon (Gumawa ang Supabase ng isang organisasyon sa ilalim ng username ng iyong account).

Punan ang pangalan ng proyekto at ang password pagkatapos ay i-click Gumawa ng bagong proyekto.

Screenshot ng mga detalye ng proyekto sa Supabase

Sa page ng mga setting sa ilalim ng seksyong API, kopyahin ang URL ng proyekto at ang pampubliko at mga lihim na key.

Screenshot na nagpapakita ng mga Supabase project API key

Buksan ang .env.local file sa Next.js project at kopyahin ang mga detalye ng API na ito.

paano tanggalin ang iba pa sa iphone

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

Susunod, mag-navigate sa SQL editor at mag-click sa Bagong query .

Gamitin ang karaniwang SQL command upang lumikha ng isang talahanayan tinawag mga pananaw .

hindi gumagana ang aking mouse pad hp

 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

Bilang kahalili, maaari mong gamitin ang editor ng talahanayan upang lumikha ng talahanayan ng mga view:

Ang editor ng talahanayan ay nasa kaliwang pane ng dashboard.

Gumawa ng Supabase Stored Procedure para I-update ang Mga View

Ang mga Postgres ay may built-in na suporta para sa mga function ng SQL na maaari mong tawagan sa pamamagitan ng Supabase API. Ang function na ito ay magiging responsable para sa pagtaas ng view count sa view table.

Upang lumikha ng isang function ng database, sundin ang mga tagubiling ito:

Pumunta sa seksyong SQL editor sa kaliwang pane.
I-click ang Bagong Query.

Idagdag ang SQL query na ito upang lumikha ng function ng database.

 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; 
$$;

I-click ang Run o Cmd + Enter (Ctrl + Enter) upang isagawa ang query.

Ang SQL function na ito ay tinatawag na update_views at tumatanggap ng text argument. Tinitingnan muna nito kung umiiral na ang post sa blog na iyon sa talahanayan at kung mayroon ito, dinaragdagan nito ang bilang ng view ng 1. Kung hindi, gagawa ito ng bagong entry para sa post na ang bilang ng view ay default sa 1.

I-set Up ang Supabase Client sa Next.js

I-install at I-configure ang Supabase

I-install ang @supabase/supabase-js package sa pamamagitan ng npm para kumonekta sa database mula sa Next.js.

 npm install @supabase/supabase-js\n

Susunod, lumikha ng a /lib/supabase.ts file sa ugat ng iyong proyekto at simulan ang Supabase client.

 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

Tandaan na na-save mo ang mga kredensyal ng API sa .env.local noong ginawa mo ang database.

I-update ang Mga Pagtingin sa Pahina

Gumawa ng ruta ng API na kumukuha ng mga page view mula sa Supabase at ina-update ang bilang ng view sa tuwing bibisita ang isang user sa isang page.

Gagawin mo ang rutang ito sa /api folder sa loob ng isang file na tinatawag na view/[slug].ts . Ang paggamit ng mga bracket sa paligid ng pangalan ng file ay lumilikha ng isang dynamic na ruta. Ipapadala ang mga katugmang parameter bilang parameter ng query na tinatawag na 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

Sinusuri ng unang if statement kung ang kahilingan ay isang POST na kahilingan. Kung ito ay, tinatawag nito ang update_views SQL function at ipinapasa sa slug bilang isang argumento. Dadagdagan ng function ang bilang ng view o lilikha ng bagong entry para sa post na ito.

Sinusuri ng pangalawang if statement kung ang kahilingan ay isang GET method. Kung oo, kinukuha nito ang kabuuang bilang ng view para sa post na iyon at ibinabalik ito.

Kung ang kahilingan ay hindi isang POST o GET na kahilingan, ang handler function ay nagbabalik ng isang 'Di-wastong kahilingan' na mensahe.

Magdagdag ng Mga Page View sa Blog

Upang subaybayan ang mga page view, kailangan mong pindutin ang ruta ng API sa tuwing mag-navigate ang isang user sa isang page.

samsung s21 vs iphone 12 pro max

Magsimula sa pamamagitan ng pag-install ng swr package. Gagamitin mo ito upang kunin ang data mula sa API.

 npm install swr\n

Ang ibig sabihin ng swr ay lipas habang nagpapatunay. Pinapayagan ka nitong ipakita ang mga view sa user habang kumukuha ng up-to-date na data sa background.

Pagkatapos ay lumikha ng bagong bahagi na tinatawag na viewsCounter.tsx at idagdag ang sumusunod:

 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

Ang bahaging ito ay nagbibigay ng kabuuang view para sa bawat blog. Tumatanggap ito ng slug ng isang post bilang prop at ginagamit ang value na iyon para gawin ang kahilingan sa API. Kung ang API ay nagbabalik ng mga view, ipinapakita nito ang halagang iyon kung hindi man ay nagpapakita ito ng '0 view'.

Para magrehistro ng mga view, idagdag ang sumusunod na code sa component na nagre-render sa bawat post.

 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

Tingnan ang database ng Supabase upang makita kung paano nag-a-update ang bilang ng view. Dapat itong tumaas ng 1 sa tuwing bibisita ka sa isang post.

Pagsubaybay ng Higit sa Mga Page View

Ang mga page view ay nagpapaalam sa iyo kung gaano karaming mga user ang bumibisita sa mga partikular na page sa iyong site. Makikita mo kung aling mga page ang mahusay na gumaganap at alin ang hindi.

Upang higit pa, subaybayan ang referrer ng iyong bisita upang makita kung saan nanggagaling ang trapiko o gumawa ng dashboard upang makatulong na mailarawan nang mas mahusay ang data. Tandaan na maaari mong palaging pasimplehin ang mga bagay sa pamamagitan ng paggamit ng tool ng analytics tulad ng Google Analytics.