Att Införa Netlify Analytics

0
15

Du arbetar en stund på en sida projekt. Du tror att det är ganska coolt! Du bestämmer dig för att släppa den i världen. Och sedan… det går bra. Eller det går inte bra. Vänta, är det rätt? Du glömde att lägga till analytics — det bara inte korsar ditt sinne vid den tidpunkten. Nu är du ganska nyfiken på hur många personer som har besökt webbplatsen, men… du är inte säker på. Ange Netlify Analytics.

Det finns så många tillfällen då jag:

  • Har glömt att lägga till analytics
  • Vill inte drabbas av extra sida i vikt, eller
  • Jag sysslar med frågor som rör integritet

Jag släppte en CSS-Grid Generator förra månaden och jag glömde att lägga till analytics. Lanseringen gick bra, men nu är det lite av en svart låda för mig så långt vad som har hänt eller om jag behöver justera en release i framtiden. Nu kan jag dock göra det möjligt Netlify Analytics och se in i det förflutna utan att ha förlorat någon information. Söt.

Netlify Analytics inte har massor av klockor och visselpipor — det är inte avsett att vara en ersättning för super omfattande marknadsföring. Men om du vill få några uppgifter om din webbplats utan att lägga en hel del skript, det kan vara ett praktiskt verktyg.

En riktigt trevlig sak om det är noggrannhet. Eftersom data kommer från servern, kan du ha en klar bild av vad servern faktiskt tjänade, snarare än att förlita sig på en tredje part som kan få en varierad rapportering på grund av saker som att lägga till blockerare som kan skeva klient-sidan rapportering (15% av användarna är beräknad att använda verktyg som Ghostery, till exempel), caching, och andra faktorer.

Analytics-Instrumentpanel

Instrumentpanelen för varje webbplats visar några “i korthet” information:

Då kan du dyka in mer detaljerad information av visst datum:

Det är lite av information från topp källor och bästa sidor:

Det är ett område för “Top Resurser som Inte Finns”, som visar alla sidor, bilder, något som dina besökare är att försöka och misslyckas att hämta från din webbplats. När jag gjorde det på min, jag kunde fixa en trasig resurs som jag länge hade glömt bort.

Det kommer att bli häftigt att kunna kontrollera hur några av mina dev projekt gör. Men jag är också väldigt glada över att ta det extra genomförande steg ut av mitt arbete. De varningar att hålla i åtanke är att din webbplats behöver för att vara värd för Netlify för att kunna använda Analytics-verktyg, och det är en betald funktionen. Varje webbplats du aktiverar kommer att visa upp till 90 dagar (3 fakturering cykler) i “Bandbredd som används för” diagram, och upp till 30 dagar i alla andra diagram som om det är gamla nog, men det kan ta upp till 2 dagar mellan när du aktiverar analytics och när instrumentpanelen beräknas och fylls i.

Under huven

Analytics-instrumentpanel i sig är byggd med att Reagera och Highcharts. Highcharts är ett JavaScript-kartläggning bibliotek som innehåller lyhörd alternativ och en tillgänglighet modul. Alla komponenter konsumera data från våra interna analytics API.

Innan utvecklingen började, vi genomförde en intern jämförelse undersökning av data visualisering bibliotek för att välja det som är bäst för våra behov. Vi landade på Highcharts över andra populära alternativ som d3.js främst på grund av att det innebär någon ingenjör på Netlify med JavaScript erfarenhet kan hoppa in och bidra, oavsett om de har djupt SVG-och D3-specifika kunskaper eller inte.

Medan diagram själva återges som SVG-element, Highcharts tillåter dig att göra någon text i diagrammet med hjälp av HTML, förenkla och påskynda vår utveckling tid och tillåter oss att använda CSS för att skapa avancerade styling. Den Highcharts docs är också top notch och erbjuder massor av alternativ för anpassning genom sina föresatser API.

Vi använde Highcharts skal för att Reagera för att skapa återanvändbara komponenter Reagerar för varje typ av diagram. “Top källor,” “bästa sidor” och “Top resurser som inte finns” kort använder en annan komponent som visar en <table> med hjälp av de uppgifter som skickas in som rekvisita.

En av de svårare utmaningarna vi stött på UI sida samtidigt som man bygger dessa grafer visar datum längs X-axeln i området diagram på ett sätt som inte skulle titta överväldigande.

Highcharts erbjuder ett alternativ för att anpassa formatet på en axel etiketten med hjälp av ett JavaScript callback-funktion, så vi hakade till att för att visa varannan dag som en etikett. Från det, vi skrev en algoritm för att fånga den första dagen i varje månad som visas och lägga till den månad namn till kod för märket, vilket gör UI lite renare och lättare att smälta.

Med andra Analytics-Alternativ, med Utdrag

Om du fortfarande vill köra tredjeparts skript och andra typer av analyser, Netlify har kapacitet för att lägga till något globalt till <head> eller <body> – taggar. Detta är användbart eftersom, beroende på hur din webbplats är inställd, kan det vara lite av en smärta för att lägga till tredje part skript på varje sida. Plus att ibland vill man ge möjlighet att ändra dessa skript till någon som inte har tillgång till reporäntan. Gå till en webbplats i kontrollpanelen, sedan på Inställningar → Bygg & Distribuera → efterbearbetning.

Det är där du kommer att hitta Snutt Injektion:

Klicka på “Lägg till utdrag” och du kommer att kunna välja om du vill lägga till den tredje part som snutt till <body> och <head> – taggen, och du kommer att ha en förändring för att skicka din kod i HTML. Till exempel, om du behöver lägga till Google Analytics, du skulle linda in det i en script-tagg så här:

<script asynkron src=”https://www.googletagmanager.com/gtag/js?id=UA-68528-29″></script>
<script>
fönster.datalager = fönster.datalager || [];
funktion gtag(){datalager.push(argument);}
gtag(‘js’, new Date());

gtag(‘config’, ‘UA-XXXXX-XX’);
</script>

Du kommer också att nämna det, så att du kan hålla reda på det. Om du behöver lägga till fler senare, detta är bra.

Det är det!

Du är iväg och kör med antingen nya Netlify Analytics erbjuder inbyggd eller en mer handfasta verktyg.