Rum Os Salões do Seu Site Edgio (Com Dados!)
Você quer obter insights mais profundos sobre como os usuários interagem com o seu site Next.js construído nos sites do Edgio (Frontend Cloud Platform)? Habilitar o Real User Monitoring (RUM) permite que você colete dados valiosos sobre a experiência do usuário, ajudando a identificar gargalos de desempenho e otimizar o seu site para um melhor envolvimento do usuário.
Este guia fornece uma abordagem passo a passo para ativar O RUM no seu Projeto Next.js implementado nos sites do Edgio. Enquanto os exemplos de código específicos têm como alvo o Next.js, os conceitos gerais também se aplicam a outros frameworks JS.
Antes de mergulhar:
Este guia assume que o seu site Next.js já está implementado na sua organização Edgio. Se você quiser uma atualização sobre isso, pode ir para a nossa documentação sobre como implantar o Next.js nos sites do Edgio . Além disso, a estrutura da pasta do projeto e o código DE RUM podem variar ligeiramente dependendo da estrutura do JS que você estiver usando.
Passos para ATIVAR O RUM:
- Localizar o seu TOKEN DE RUM exclusivo: Depois de ter feito login no Edgio Console, navegue até o >Ambiente específico da propriedade >Monitoramento de usuário real no painel do Edgio. Você vai encontrar um token único gerado para a sua propriedade.
- Instale o PACOTE RUM: Abra o terminal e navegue até o diretório do projeto. Instale o pacote de rum usando npm ou YARN:
instalação do npm
ou
o fio adiciona o rum - Verifique novamente a instalação: Verifique se o pacote edgio/rum está listado nas dependências do pacote.json e existe dentro do diretório node_modules.
- Crie o arquivo de CONFIGURAÇÃO RUM: Crie um novo arquivo chamado rum.ts dentro da pasta src/app do seu projeto.
- Implementar coleção de MÉTRICAS DE RUM: Adicione o seguinte código ao arquivo rum.ts:
JavaScript
'use client';
import { useEffect } from 'react';
import { Metrics } from '@edgio/rum';
const RumMetrics = () => {
useEffect(() => {
console.log('Initializing RUM metrics...');
new Metrics({
token: 'REPLACE_WITH_YOUR_TOKEN', // Replace with your unique token from Edgio
}).collect();
console.log('RUM metrics initialized');
}, []);
return null;
};
export default RumMetrics;
Lembre-se de substituir ‘REPLACE_with_your_token’ pelo seu token real obtido do Edgio.
- Importe MÉTRICAS DE RUM para o seu layout: Navegue até o arquivo src/app/layout.tsx (ou o seu arquivo de layout principal) e importe o componente RumMetrics que você criou na etapa 5:
JavaScript –
Importar RumMetrics de ‘./rum’;
- ADICIONAR RUM ao layout: Dentro da função de exportação do componente de layout (normalmente uma função chamada layout ou similar), adicione <RumMetrics /> para garantir que a INICIALIZAÇÃO DO RUM aconteça sempre que o layout for carregado. Isso INJETA RUM em cada carregamento de página ou evento de navegação na sua aplicação Next.js.
Aqui está um exemplo:
JavaScript
export default function RootLayout({ children }) {
return (
<html>
<head />
<body>
<RumMetrics /> {/* RUM initialization */}
{children}
</body>
</html>
);
}
Verificação:
- Lance o seu site: Abra o seu site Next.js e abra o console do desenvolvedor do navegador.
- Procure por logs de console RUM: Se O RUM foi inicializado com sucesso, você deve ver mensagens como “Inicializando MÉTRICAS DE RUM…” e “MÉTRICAS DE RUM inicializadas” no console.
Você ativou com sucesso o RUM no seu site do Edgio Sites Next.js. Ao contrário do monitoramento sintético, que simula as interações do usuário a partir de locais e dispositivos pré-definidos, O RUM captura dados de interações reais do usuário em vários dispositivos, redes e localizações geográficas.
Com estes dados pode:
- Veja o Impacto em Tempo Real: Você pode observar como as mudanças no seu site afetam o Core Web Vitals e a experiência geral do usuário em tempo real, permitindo uma resposta e ajustes mais rápidos.
- Correlacionar Web Vitals com as rotas da aplicação: O rum permite que você entenda o desempenho de diferentes partes da sua aplicação correlacionando Core Web Vitals com as rotas da sua aplicação.
- Analisar o desempenho através das dimensões: O RUM permite analisar o desempenho em várias dimensões, como país, tipo de dispositivo e tipo de ligação, ajudando-o a identificar áreas específicas que podem precisar de otimização.
- Identificar o impactos no Ranking de Pesquisa: Como os Web Vitals principais são um fator de classificação para os motores de busca, O RUM ajuda a identificar quais páginas podem estar afetando negativamente a sua classificação de pesquisa, permitindo que você dê prioridade às otimizações onde elas são mais necessárias.
Portanto, vá em frente e ative O RUM no seu projeto Edgio Sites hoje para começar a obter informações valiosas sobre o usuário! Para obter mais informações sobre RUM, consulte a documentação do EDGIO RUM – Monitoramento Real do Usuário (RUM)
