SPA:er rapporterar en sidvisning
En React-app laddas en gång och byter sedan vyer i webbläsaren. PulsePanda spårar varje navigering i appen så att din analys speglar verklig användning, inte en enda landning.
Analys för React
Produktanalys för React
PulsePanda ger din React-enkelsidesapp full produktanalys — events, tratt, session replay och heatmaps — från en enda skripttagg, med klientsidiga ruttändringar spårade direkt ur lådan.
Varför det spelar roll
Vad React-team äntligen kan se
Ingen insikt i vilka komponenter som används
Utlös anpassade events på de knappar och flöden du bryr dig om för att mäta adoption av specifika funktioner och komponenter.
Svåråterskapade UI-buggar
Session replay fångar den renderade DOM:en och felen så att du kan se exakt vilket tillstånd som gick sönder för en användare.
Installation
Lägg till PulsePanda i React
PulsePanda är ramverksoberoende, så den enklaste installationen är en skripttagg i ditt HTML-skal. Lägg till den i <head> i din startfil för HTML.
Vite — index.html (eller public/index.html för CRA)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script
src="https://pulsepanda.dev/sdk.js"
data-project="YOUR_PROJECT_ID"
defer></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>När det är laddat, anropa pulsepanda.track("event_name", { ...props }) från vilken komponent som helst för att registrera anpassade events och bygga tratt.
Arbetsflöde
Från installation till insikt
Installera kodavsnittet
Lägg till skriptet en gång i ditt React-projekt. Webbanalys, automatiskt fångade klick, session replay och heatmaps börjar samla in data direkt.
Spåra det som betyder något
Anropa pulsepanda.track() vid viktiga händelser och pulsepanda.identify() efter inloggning för att koppla events, sessioner och feedback till varje användare.
Agera på datan
Bygg trattar, se replays bakom avhopp, läs heatmaps och samla in feedback direkt i produkten — allt i en och samma arbetsyta.
Det här får du
Ett kodavsnitt, hela bilden
| Analyslager | Sidvisningar, custom events, konverteringstrattar och retention. |
|---|---|
| Beteendelager | Session replay, klick- och scroll-heatmaps samt felkontext. |
| Feedbacklager | Undersökningar i produkten, feedback-widgetar, formulär och en tavla för funktionsröstning. |
Vanliga frågor
React-frågor
Fungerar det med React Router?
Ja. SDK:t spårar History API-navigering, så ruttändringar från React Router, TanStack Router eller vilken klientrouter som helst fångas automatiskt som sidvisningar.
Fungerar det med Create React App och Vite?
Ja, med båda. Lägg till skriptet i public/index.html för CRA eller index.html för Vite. Det finns inget beroende av byggsteg.
Hur identifierar jag inloggade användare?
Efter inloggning, anropa pulsepanda.identify("user_id", { email, plan }) så att sessioner, events och feedback kopplas till samma person över besök.
Relaterade sidor
Utforska mer
Lägg till analys i din React-app
Installera en gång och koppla samman analys, session replay, heatmaps, trattar och feedback på några minuter.
Kom igång gratis