Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

As visualizações de página são uma métrica importante para acompanhar o desempenho da web. Ferramentas de software como Google Analytics e Fathom fornecem uma maneira simples de fazer isso com um script externo.

Mas talvez você não queira usar uma biblioteca de terceiros. Nesse caso, você pode usar um banco de dados para acompanhar os visitantes do seu site.

Supabase é uma alternativa Firebase de código aberto que pode ajudá-lo a acompanhar as visualizações de página em tempo real.

Prepare seu site para começar a rastrear exibições de página

Você precisa ter um blog Next.js para acompanhar este tutorial. Se você ainda não tem um, você pode crie um blog baseado em Markdown usando react-markdown.

Você também pode clonar o modelo inicial do blog oficial Next.js de seu GitHub repositório.

Supabase é uma alternativa do Firebase que fornece um banco de dados Postgres, autenticação, APIs instantâneas, funções de borda, assinaturas em tempo real e armazenamento.

instagram viewer

Você o usará para armazenar as exibições de página de cada postagem do blog.

Criar um banco de dados Supabase

Vou ao Site Supabase e faça login ou crie uma conta.

No painel do Supabase, clique em Novo projeto e escolha uma organização (o Supabase terá criado uma organização com o nome de usuário da sua conta).

Preencha o nome do projeto e a senha e clique em Criar novo projeto.

Na página de configurações na seção API, copie a URL do projeto e as chaves públicas e secretas.

Abra o .env.local arquivo no projeto Next.js e copie esses detalhes da API.

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

Em seguida, navegue até o editor SQL e clique em Nova consulta.

Use o comando SQL padrão para criar uma tabela chamado Visualizações.

CRIARMESA visualizações (\n eu iabigintGERADOPORPADRÃOCOMOIDENTIDADE PRIMÁRIO CHAVE,\n slug textoEXCLUSIVONÃONULO,\n view_count bigintPADRÃO1NÃONULO,\n atualizado_em carimbo de data/horaPADRÃOAGORA() NÃONULO\n);\n

Como alternativa, você pode usar o editor de tabelas para criar a tabela de visualizações:

O editor de tabela está no painel esquerdo do painel.

Crie um procedimento armazenado Supabase para atualizar exibições

O Postgres possui suporte interno para funções SQL que você pode chamar por meio da API Supabase. Esta função será responsável por incrementar a contagem de visualizações na tabela de visualizações.

Para criar uma função de banco de dados, siga estas instruções:

  1. Vá para a seção do editor SQL no painel esquerdo.
  2. Clique em Nova consulta.
  3. Adicione esta consulta SQL para criar a função de banco de dados. 
    CRIAROUSUBSTITUIRFUNÇÃO update_views (page_slug TEXTO)
    DEVOLUÇÕES vazio
    IDIOMA plpgsql
    COMO $$
    COMEÇAR
     SE EXISTE (SELECIONEDE Visualizações ONDE slug=page_slug) ENTÃO
    ATUALIZAR Visualizações
    DEFINIR view_count = view_count + 1,
     atualizado_at = agora ()
     WHERE slug = page_slug;
    OUTRO
    INSERIRem visualizações (slug) VALORES (page_slug);
    FIMSE;
    FIM;
    $$;
  4. Clique em Executar ou Cmd + Enter (Ctrl + Enter) para executar a consulta.

Essa função SQL é chamada update_views e aceita um argumento de texto. Ele primeiro verifica se a postagem do blog já existe na tabela e, se existir, incrementa sua contagem de visualizações em 1. Caso contrário, ele cria uma nova entrada para a postagem cujo padrão de contagem de visualizações é 1.

Configurar cliente Supabase em Next.js

Instalar e configurar o Supabase

Instale o pacote @supabase/supabase-js via npm para se conectar ao banco de dados do Next.js.

npm instalar @supabase/supabase-js\n

A seguir, crie um /lib/supabase.ts arquivo na raiz do seu projeto e inicialize o cliente Supabase.

importar {criarCliente} de'@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

Lembre-se de que você salvou as credenciais da API em .env.local quando criou o banco de dados.

Atualizar exibições de página

Crie uma rota de API que busque as visualizações de página do Supabase e atualize a contagem de visualizações sempre que um usuário visita uma página.

Você criará esta rota no /api pasta dentro de um arquivo chamado views/[slug].ts. O uso de colchetes ao redor do nome do arquivo cria uma rota dinâmica. Os parâmetros correspondentes serão enviados como um parâmetro de consulta chamado slug.

importar { supabase } de"../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } de"próximo";\nmanipulador const = assíncrono (req: NextApiRequest, res: NextApiResponse) => {\n se (req.método "PUBLICAR") {\n aguardam supabase.rpc("atualizar_visualizações", {\n page_slug: req.query.slug,\n });\n retornar res.status(200).json({\n mensagem: "Sucesso",\n });\n }\n se (req.método "PEGAR") {\n const { dados } = aguardam supabase\n .from("Visualizações")\n .select("view_count")\n .filter("lesma", "eq", req.query.slug);\n se (dados) {\n retornar res.status(200).json({\n total: dados[0]?.view_count || 0,\n });\n }\n }\n retornar res.status(400).json({\n mensagem: "Pedido inválido",\n });\n};\nexportar padrão manipulador;\n

A primeira instrução if verifica se a solicitação é uma solicitação POST. Se for, ele chama a função SQL update_views e passa o slug como um argumento. A função aumentará a contagem de visualizações ou criará uma nova entrada para esta postagem.

A segunda instrução if verifica se a solicitação é um método GET. Se for, ele busca a contagem total de visualizações para aquela postagem e a retorna.

Se a solicitação não for uma solicitação POST ou GET, a função do manipulador retornará uma mensagem “Solicitação inválida”.

Adicionar visualizações de página ao blog

Para rastrear exibições de página, você precisa acessar a rota da API sempre que um usuário navegar para uma página.

Comece instalando o pacote swr. Você o usará para buscar os dados da API.

npm instalar swr\n

swr significa obsoleto enquanto revalidate. Ele permite que você exiba as visualizações para o usuário enquanto busca dados atualizados em segundo plano.

Em seguida, crie um novo componente chamado viewsCounter.tsx e adicione o seguinte:

importar usar SWR de"swr";\ninterface Props {\n slug: string;\n}\nconst fetcher = assíncrono (entrada: RequestInfo) => {\n const res: Resposta = aguardam buscar (entrada);\n retornaraguardam res.json();\n};\nconst ViewsCounter = ({ slug }: Adereços) => {\nconst { dados } = useSWR(`/api/views/${slug}`, buscador);\nretorno (\n {`${\n (dados?.total)? dados.total:"0"\n} visualizações`}</span>\n );\n};\nexport padrão ViewsCounter;\n

Esse componente renderiza o total de visualizações para cada blog. Ele aceita o slug de uma postagem como prop e usa esse valor para fazer a solicitação à API. Se a API retornar visualizações, ela exibirá esse valor, caso contrário, exibirá “0 visualizações”.

Para registrar visualizações, adicione o seguinte código ao componente que renderiza cada post.

importar { useEffect } de"reagir";\nimportar ViewsCounter de"../../components/viewsCounter";\ninterface Props {\n slug: string;\n}\nconst Post = ({ slug }: Adereços) => {\n useEffect(() => {\n busca(`/api/views/${slug}`, {\n método: 'PUBLICAR'\n });\n }, [slug]);\nretorno (\n 
\n \n // conteúdo do blog\n 

\n)\n}\nexportar postagem padrão\n

Verifique o banco de dados Supabase para ver como a contagem de visualizações está sendo atualizada. Deve aumentar em 1 cada vez que você visitar um post.

Rastreando mais do que exibições de página

As visualizações de página permitem que você saiba quantos usuários estão visitando páginas específicas em seu site. Você pode ver quais páginas estão tendo um bom desempenho e quais não estão.

Para ir ainda mais longe, acompanhe o referenciador do seu visitante para ver de onde vem o tráfego ou crie um painel para ajudar a visualizar melhor os dados. Lembre-se de que você sempre pode simplificar as coisas usando uma ferramenta de análise como o Google Analytics.