Hvad er Client-Side Rendering?
Client-Side Rendering (CSR) er en webudviklingsteknik, der bruger JavaScript til at generere en webside's endelige HTML-indhold og brugergrænseflade i brugerens browser.
Hvordan påvirker CSR analyse?
Med konventionelle sider, der bruger Server-Side Rendering, kan analyseværktøjer automatisk registrere, at en side er blevet indlæst.
Med CSR resulterer navigation ikke i en fuld sideindlæsning. Dette betyder, at de fleste analyseværktøjer ikke kan måle, hvad der sker med CSR-websteder uden yderligere tilpasning.
Hvordan understøtter man CSR med Silktide Analytics
Der er to hovedmetoder til at understøtte CSR med Silktide. Den bedste løsning afhænger af, hvordan dit websted fungerer:
Løsning 1: manuelt spore sidehændelser
Når det, du definerer som en ny "side", indlæses, skal du kalde silktide() funktionen direkte:
silktide("page_load");Dette vil logge den nuværende URL som værende åbnet, dvs. URL'en i browseren på det tidspunkt, denne funktion kaldes. Dette er, hvad der vil blive logget i Silktide Analytics, og hvad Silktide Analytics vil forsøge at gengive i sin brugergrænseflade (til heatmaps osv.).
Afhængigt af hvordan du har implementeret CSR, kan dine URL'er være utilstrækkeligt unikke til at logge den nuance, du ønsker. Hvis det er tilfældet, kan du overveje at udløse tilpassede hændelser.
Løsning 2: spore sidehændelser, når URL'en ændres programmatisk
De fleste CSR-implementeringer bør opdatere sidens URL, når brugeren navigerer.
Hvis du gør dette, er det muligt automatisk at give Silktide besked, når din URL ændres, uden at skulle implementere silktide("page_load") kaldet manuelt, som vist ovenfor.
Denne JavaScript vil gøre dette:
(function() { let currentUrl = window.location.href; const checkUrlChange = () => { const newUrl = window.location.href; if (newUrl !== currentUrl) { silktide("page_load"); currentUrl = newUrl; } }; // Fang pushState og replaceState const originalPushState = history.pushState; const originalReplaceState = history.replaceState; history.pushState = function(...args) { originalPushState.apply(this, args); checkUrlChange(); }; history.replaceState = function(...args) { originalReplaceState.apply(this, args); checkUrlChange(); }; // Lyt efter hashændringer (for hash-baseret navigation) window.addEventListener('hashchange', checkUrlChange, false); // Lyt efter popstate-hændelsen (tilbage/frem browsernavigation) window.addEventListener('popstate', checkUrlChange, false);})();Tilføj blot denne kode til hver side, du bruger, under det standard Silktide Analytics JavaScript-udsnit.
Du er velkommen til at ændre denne kode efter dine behov, f.eks. er kommentarerne unødvendige.