Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Tampilan halaman adalah metrik penting untuk melacak kinerja web. Alat perangkat lunak seperti Google Analytics dan Fathom menyediakan cara sederhana untuk melakukannya dengan skrip eksternal.

Tapi mungkin Anda tidak ingin menggunakan perpustakaan pihak ketiga. Dalam kasus seperti itu, Anda dapat menggunakan database untuk melacak pengunjung situs Anda.

Supabase adalah alternatif Firebase open-source yang dapat membantu Anda melacak tampilan halaman secara real time.

Persiapkan Situs Anda untuk Memulai Pelacakan Tampilan Halaman

Anda harus memiliki blog Next.js untuk mengikuti tutorial ini. Jika Anda belum memilikinya, Anda bisa buat blog berbasis Markdown menggunakan react-markdown.

Anda juga dapat mengkloning template pemula blog Next.js resmi darinya GitHub gudang.

Supabase adalah alternatif Firebase yang menyediakan database Postgres, autentikasi, API instan, Fungsi Edge, langganan waktu nyata, dan penyimpanan.

instagram viewer

Anda akan menggunakannya untuk menyimpan tampilan halaman untuk setiap posting blog.

Buat Database Supabase

Pergi ke Situs web Supbase dan masuk atau daftar akun.

Di dasbor Supabase, klik Proyek baru dan pilih organisasi (Supabase akan membuat organisasi dengan nama pengguna akun Anda).

Isikan nama project dan password kemudian klik Buat proyek baru.

Di halaman pengaturan di bawah bagian API, salin URL proyek dan kunci publik dan rahasia.

Buka .env.local file di proyek Next.js dan salin detail API ini.

NEXT_PUBLIC_SUPABASE_URL=""\nNEXT_PUBLIC_SUPABASE_KEY=""\nSUPABASE_SERVICE_KEY=""\N

Selanjutnya, navigasikan ke editor SQL dan klik Kueri baru.

Menggunakan perintah SQL standar untuk membuat tabel ditelepon pandangan.

MEMBUATMEJA dilihat (\n pengenalbigintDIHASILKANOLEHBAWAANSEBAGAIIDENTITAS UTAMA KUNCI,\n siput teksUNIKBUKANBATAL,\n lihat_hitung bigintBAWAAN1BUKANBATAL,\n diperbarui_at cap waktuBAWAANSEKARANG() BUKANBATAL\n);\n

Sebagai alternatif, Anda dapat menggunakan editor tabel untuk membuat tabel tampilan:

Editor tabel ada di panel kiri dasbor.

Buat Prosedur Tersimpan Supabase untuk Memperbarui Tampilan

Postgres memiliki dukungan bawaan untuk fungsi SQL yang dapat Anda panggil melalui Supabase API. Fungsi ini akan bertanggung jawab untuk menambah jumlah tampilan di tabel tampilan.

Untuk membuat fungsi database, ikuti petunjuk berikut:

  1. Buka bagian editor SQL di panel kiri.
  2. Klik Kueri Baru.
  3. Tambahkan kueri SQL ini untuk membuat fungsi basis data. 
    MEMBUATATAUMENGGANTIFUNGSI update_views (page_slug TEKS)
    PENGEMBALIAN ruang kosong
    BAHASA plpgsql
    SEBAGAI $$
    MULAI
     JIKA ADA (PILIHDARI pandangan DI MANA siput=halaman_siput) KEMUDIAN
    MEMPERBARUI pandangan
    MENGATUR view_count = view_count + 1,
     updated_at = sekarang()
     DI MANA siput = halaman_siput;
    KALAU TIDAK
    MENYISIPKANke dalam dilihat (siput) NILAI (lamban_slug);
    AKHIRJIKA;
    AKHIR;
    $$;
  4. Klik Jalankan atau Cmd + Enter (Ctrl + Enter) untuk menjalankan kueri.

Fungsi SQL ini disebut update_views dan menerima argumen teks. Ini pertama-tama memeriksa apakah posting blog itu sudah ada di tabel dan jika ya, jumlah tampilannya bertambah 1. Jika tidak, itu membuat entri baru untuk posting yang jumlah tampilannya default ke 1.

Siapkan Klien Supabase di Next.js

Instal dan Konfigurasikan Supabase

Instal paket @supabase/supabase-js melalui npm untuk terhubung ke database dari Next.js.

instal npm @supabase/supabase-js\n

Selanjutnya, buat a /lib/supabase.ts file di root proyek Anda dan menginisialisasi klien Supabase.

impor { buatKlien } dari'@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

Ingat Anda menyimpan kredensial API di .env.local saat Anda membuat database.

Perbarui Tampilan Halaman

Buat rute API yang mengambil tampilan halaman dari Supabase dan memperbarui jumlah tampilan setiap kali pengguna mengunjungi halaman.

Anda akan membuat rute ini di /api folder di dalam file bernama dilihat/[siput].ts. Menggunakan tanda kurung di sekitar nama file membuat rute dinamis. Parameter yang cocok akan dikirim sebagai parameter kueri yang disebut slug.

impor { supabase } dari"../../../lib/supabase/admin";\import { NextApiRequest, NextApiResponse } dari"Berikutnya";\nconst penangan = asinkron (req: NextApiRequest, res: NextApiResponse) => {\n jika (req.method "POS") {\N menunggu supabase.rpc("perbarui_tampilan", {\n page_slug: req.query.slug,\n });\n kembali res.status(200.json({\n pesan: "Kesuksesan",\n });\n }\n jika (req.method "MENDAPATKAN") {\N const {data} = menunggu supabase\n .from("melihat")\n .pilih("view_count")\n .filter("siput", "eq", req.query.slug);\n jika (data) {\n kembali res.status(200.json({\n total: data[0]?.view_count || 0,\n });\n }\n }\n kembali res.status(400.json({\n pesan: "Permintaan tidak valid",\n });\n};\ekspor bawaan penangan;\n

Pernyataan if pertama memeriksa apakah permintaan tersebut adalah permintaan POST. Jika ya, ia akan memanggil fungsi SQL update_views dan meneruskan slug sebagai argumen. Fungsi akan menambah jumlah tampilan atau membuat entri baru untuk posting ini.

Pernyataan if kedua memeriksa apakah permintaan adalah metode GET. Jika ya, itu mengambil jumlah total tampilan untuk posting itu dan mengembalikannya.

Jika permintaan tersebut bukan permintaan POST atau GET, fungsi penangan mengembalikan pesan "Permintaan tidak valid".

Tambahkan Tampilan Halaman ke Blog

Untuk melacak tampilan halaman, Anda harus menekan rute API setiap kali pengguna membuka halaman.

Mulailah dengan menginstal paket swr. Anda akan menggunakannya untuk mengambil data dari API.

npm Install swr\n

swr singkatan basi saat memvalidasi ulang. Ini memungkinkan Anda untuk menampilkan tampilan kepada pengguna sambil mengambil data terkini di latar belakang.

Kemudian buat komponen baru bernama viewsCounter.tsx dan tambahkan berikut ini:

impor gunakan SWR dari"swr";\nAntarmuka Props {\n slug: string;\n}\nconst fetcher = asinkron (masukan: RequestInfo) => {\n const res: Tanggapan = menunggu ambil (input);\n kembalimenunggu res.json();\n};\nconst ViewsCounter = ({ siput }: Alat peraga) => {\nconst { data } = useSWR(`/api/tampilan/${slug}`, pengambil);\nkembali (\n {`${\n (data?.total)? data.total :"0"\N } views`}</span>\n );\n};\nexport default ViewsCounter;\n

Komponen ini menampilkan total tampilan untuk setiap blog. Itu menerima siput posting sebagai penyangga dan menggunakan nilai itu untuk membuat permintaan ke API. Jika API mengembalikan tampilan, itu menampilkan nilai itu jika tidak menampilkan "0 tampilan".

Untuk mendaftarkan tampilan, tambahkan kode berikut ke komponen yang merender setiap kiriman.

impor { gunakanEfek } dari"reaksi";\impor Penghitung Tampilan dari"../../components/viewsCounter";\nAntarmuka Props {\n slug: string;\n}\nconst Posting = ({ siput }: Alat peraga) => {\n gunakanEfek(() => {\n ambil(`/api/tampilan/${slug}`, {\n metode: 'POS'\n });\n }, [siput]);\nkembali (\n 
\N \N // konten blog\n 

\n)\n}\ekspor Pos bawaan\n

Periksa basis data Supabase untuk melihat bagaimana jumlah tampilan diperbarui. Seharusnya bertambah 1 setiap kali Anda mengunjungi pos.

Melacak Lebih Dari Tampilan Halaman

Tampilan halaman memberi tahu Anda berapa banyak pengguna yang mengunjungi halaman tertentu di situs Anda. Anda dapat melihat halaman mana yang berkinerja baik dan mana yang tidak.

Untuk melangkah lebih jauh, lacak perujuk pengunjung Anda untuk melihat dari mana lalu lintas berasal atau buat dasbor untuk membantu memvisualisasikan data dengan lebih baik. Ingat Anda selalu dapat menyederhanakan berbagai hal dengan menggunakan alat analitik seperti Google Analytics.