Supabase Kullanarak Blogunuzdaki Sayfa Görüntülemelerini Nasıl Takip Edebilirsiniz?

Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Sayfa görüntülemeleri, web performansını izlemek için önemli bir ölçümdür. Google Analytics ve Fathom gibi yazılım araçları, bunu harici bir komut dosyasıyla yapmanın basit bir yolunu sunar.

Ancak üçüncü taraf bir kitaplık kullanmak istemiyor olabilirsiniz. Böyle bir durumda, sitenizin ziyaretçilerini takip etmek için bir veri tabanı kullanabilirsiniz.

Supabase, sayfa görüntülemelerini gerçek zamanlı olarak takip etmenize yardımcı olabilecek açık kaynaklı bir Firebase alternatifidir.

Sayfa Görüntülemelerini İzlemeye Başlamak İçin Sitenizi Hazırlayın

Bu öğreticiyi takip etmek için bir Next.js blogunuzun olması gerekir. Zaten sahip değilseniz, yapabilirsiniz tepki-markdown kullanarak Markdown tabanlı bir blog oluşturun .

Resmi Next.js blog başlangıç şablonunu da kopyalayabilirsiniz. GitHub depo.

Supabase, Postgres veritabanı, kimlik doğrulama, anlık API'ler, Edge İşlevleri, gerçek zamanlı abonelikler ve depolama sağlayan bir Firebase alternatifidir.

Her blog gönderisi için sayfa görüntülemelerini depolamak için kullanacaksınız.

Bir Supabase Veritabanı Oluşturun

Gitmek supabase web sitesi ve oturum açın veya bir hesap için kaydolun.

Supabase kontrol panelinde, üzerine tıklayın Yeni proje ve bir organizasyon seçin (Supabase, hesabınızın kullanıcı adı altında bir organizasyon oluşturmuş olacaktır).

onlar bilmeden snapchat'te ekran görüntüsü nasıl alınır

Supabase kontrol panelinin ekran görüntüsü

Proje adını ve şifreyi girin ve ardından tıklayın Yeni proje oluştur.

Supabase'deki proje detaylarının ekran görüntüsü

API bölümünün altındaki ayarlar sayfasında, proje URL'sini ve genel ve gizli anahtarları kopyalayın.

Supabase projesi API anahtarlarını gösteren ekran görüntüsü

Aç .env.yerel Next.js projesinde dosya oluşturun ve bu API ayrıntılarını kopyalayın.

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

Ardından, SQL editörüne gidin ve üzerine tıklayın. Yeni sorgu .

Kullan tablo oluşturmak için standart SQL komutu isminde Görüntüleme .

 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

Alternatif olarak, görünüm tablosunu oluşturmak için tablo düzenleyiciyi kullanabilirsiniz:

Tablo düzenleyici, panonun sol bölmesindedir.

Görünümleri Güncellemek için Supabase Saklı Prosedürü Oluşturma

Postgres, Supabase API aracılığıyla çağırabileceğiniz yerleşik SQL işlevleri desteğine sahiptir. Bu işlev, görüntüleme tablosundaki görüntüleme sayısını artırmaktan sorumlu olacaktır.

Bir veritabanı işlevi oluşturmak için şu talimatları izleyin:

Sol bölmedeki SQL düzenleyici bölümüne gidin.
Yeni Sorgu'ya tıklayın.

Veritabanı işlevini oluşturmak için bu SQL sorgusunu ekleyin.

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

Sorguyu yürütmek için Çalıştır'a veya Cmd + Enter'a (Ctrl + Enter) tıklayın.

Bu SQL işlevine update_views adı verilir ve bir metin bağımsız değişkenini kabul eder. Önce o blog gönderisinin tabloda var olup olmadığını kontrol eder ve varsa görüntüleme sayısını 1 artırır. Yoksa, görüntüleme sayısı varsayılan olarak 1 olan gönderi için yeni bir giriş oluşturur.

Next.js'de Supabase İstemcisini Kurun

Supabase'i Kurun ve Yapılandırın

Next.js'den veritabanına bağlanmak için @supabase/supabase-js paketini npm aracılığıyla kurun.

tarayıcım neden sürekli kilitleniyor

 npm install @supabase/supabase-js\n

Ardından, bir /lib/supabase.ts projenizin kök dizininde dosya oluşturun ve Supabase istemcisini başlatın.

 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

Veritabanını oluştururken API kimlik bilgilerini .env.local dosyasına kaydettiğinizi unutmayın.

Sayfa Görünümlerini Güncelle

Supabase'den sayfa görüntülemelerini alan ve bir kullanıcı bir sayfayı her ziyaret ettiğinde görüntüleme sayısını güncelleyen bir API rotası oluşturun.

Bu rotayı /api adlı bir dosyanın içindeki klasör görünümler/[slug].ts . Dosya adının etrafında parantez kullanmak, dinamik bir yol oluşturur. Eşleşen parametreler, bilgi adı verilen bir sorgu parametresi olarak gönderilecektir.

 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

İlk if ifadesi, isteğin bir POST isteği olup olmadığını kontrol eder. Öyleyse, update_views SQL işlevini çağırır ve bilgi parçasını bir bağımsız değişken olarak iletir. İşlev, görüntüleme sayısını artıracak veya bu gönderi için yeni bir giriş oluşturacaktır.

İkinci if ifadesi, isteğin bir GET yöntemi olup olmadığını kontrol eder. Öyleyse, o gönderi için toplam görüntüleme sayısını getirir ve döndürür.

İstek bir POST veya GET isteği değilse işleyici işlevi 'Geçersiz istek' mesajı döndürür.

Blog'a Sayfa Görünümleri Ekleme

Sayfa görüntülemelerini izlemek için, bir kullanıcı bir sayfaya her gittiğinde API yoluna gitmeniz gerekir.

Swr paketini yükleyerek başlayın. Verileri API'den almak için kullanacaksınız.

 npm install swr\n

swr, yeniden doğrularken bayat anlamına gelir. Arka planda güncel verileri getirirken görünümleri kullanıcıya göstermenizi sağlar.

Ardından, viewsCounter.tsx adlı yeni bir bileşen oluşturun ve aşağıdakileri ekleyin:

 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

Bu bileşen, her blog için toplam görüntüleme sayısını oluşturur. Bir gönderi bilgisini destek olarak kabul eder ve bu değeri API'ye istekte bulunmak için kullanır. API görünümleri döndürürse, bu değeri görüntüler, aksi takdirde '0 görüntüleme' görüntüler.

Görünümleri kaydetmek için, her gönderiyi işleyen bileşene aşağıdaki kodu ekleyin.

 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

Görüntüleme sayısının nasıl güncellendiğini görmek için Supabase veritabanını kontrol edin. Bir gönderiyi her ziyaret ettiğinizde 1 artmalıdır.

google play filmlerini paylaşır mısın

Birden Fazla Sayfa Görüntülemesini İzleme

Sayfa görünümleri, sitenizdeki belirli sayfaları kaç kullanıcının ziyaret ettiğini bilmenizi sağlar. Hangi sayfaların iyi performans gösterdiğini ve hangilerinin olmadığını görebilirsiniz.

Daha da ileri gitmek için trafiğin nereden geldiğini görmek için ziyaretçinizin yönlendirenini takip edin veya verileri daha iyi görselleştirmenize yardımcı olacak bir pano oluşturun. Google Analytics gibi bir analiz aracı kullanarak işleri her zaman basitleştirebileceğinizi unutmayın.