Innføring Netlify Analytics

0
32

Du har arbeidet en stund på et sideprosjekt. Du tror det er ganske kult! Du bestemmer deg for å slippe den ut i verden. Og så… det går bra. Eller det ikke gå bra. Vent, er det riktig? Du glemte å legge til analytics — det har bare ikke krysse tankene dine på den tiden. Nå er du ganske nysgjerrig på hvor mange som har vært på besøk i området, men… du er ikke sikker på. Skriv Inn Netlify Analytics.

Det er så mange ganger hvor jeg:

  • Glem å legg til analytics
  • Ikke ønsker å pådra deg ekstra side vekt, eller
  • Jeg er opptatt av personvern

Jeg utgitt en CSS-Grid Generator siste måneden, og jeg glemte å legge analytics. Utgivelsen gikk bra, men nå er det en bit av en svart boks for meg så langt hva som skjedde der, eller om jeg må justere en utgivelse i fremtiden. Nå, derimot, kan jeg aktivere Netlify Analytics og se inn i fortiden uten å ha mistet noe informasjon. Søt.

Netlify Analytics ikke har massevis av bjeller og fløyter — det er ikke ment å være en erstatning for en super omfattende markedsføring verktøy. Men hvis du ønsker å få noen data om nettstedet ditt, uten å legge mye av skript, kan det være et nyttig verktøy.

En veldig fin ting, om det er nøyaktighet. Siden dataene kommer fra serveren, kan du ha et klart bilde av hva server faktisk virket, heller enn å stole på en tredjepart som kan ha variert rapportering på grunn av ting som å legge til blokkeringer som kan forskyve klient-side-rapportering (15% av brukerne er anslått til å bruke verktøy som Ghostery, for eksempel), caching, og andre faktorer.

Analytics-Oversikten

Dashbordet for hvert nettsted viser noen “på et blunk” informasjon:

Deretter kan du dykke inn mer detaljert informasjon ved spesifikk dato:

Det er en bit av informasjon fra topp kilder og beste sidene:

Det er et område for “beste Ressursene Ikke Funnet”, som viser noen sider, bilder, noe som dine besøkende prøver og å unnlate å hente fra din side. Når jeg gjorde det på meg, jeg var i stand til å fikse en ødelagt ressurs som jeg lenge hadde glemt.

Det kommer til å bli fantastisk å være i stand til å se hvordan noen av mine dev-prosjekter gjør. Men jeg er også veldig spent på å ta den ekstra trinn for implementering av arbeidet mitt. Begrensningene for å holde i tankene er at området må være arrangert av Netlify for å bruke analyseverktøy, og det er en betalt funksjon. Alle nettsteder du aktiverer du vil vise opp til 90 dager (3 belastningssyklus) i “Båndbredde brukt” diagram, og opp til 30 dager i alle andre diagrammer hvis det er gamle nok, men det kan ta opp til 2 dager mellom når du aktiverer analytics og når oversikten er beregnet og lagt til.

Under panseret

Analytics-dashbordet i seg selv er bygget med Reagere og Highcharts. Highcharts er en JavaScript-kartlegging-bibliotek som inneholder responsive valg og et tilgjengelighet modul. Alle komponenter forbruke data fra våre interne analytics API.

Før utbyggingen startet, vi har gjennomført en intern sammenligning undersøkelse av data visualisering biblioteker for å velge det beste for våre behov. Vi landet på Highcharts over andre populære alternativer som d3.js, først og fremst fordi det betyr at alle ingeniør ved Netlify med JavaScript erfaring kan hoppe inn og bidra, enten de har dype SVG-og D3-spesiell kunnskap eller ikke.

Mens listene selv er gjengitt som SVG-elementer, Highcharts tillater deg å gjengi teksten i grafen ved hjelp av HTML, forenkle og påskynde vår utvikling tid, og som lar oss bruke CSS for avansert styling. Den Highcharts docs er også top notch, og tilbyr en rekke alternativer for tilpasning gjennom sine fortellende API.

Vi brukte Highcharts wrapper for å Reagere for å lage gjenbrukbare Reagere komponenter for hver type graf. “Topp kilder,” “Top-sider” og “Top ressurser ikke funnet” – kort bruke en annen komponent som viser en <table> ved hjelp av data sendes som rekvisitter.

En av de vanskeligere utfordringer vi har støtt på UI side mens bygningen disse grafene, var å vise datoer langs X-aksen i området diagrammer på en måte som ikke ville se overveldende.

Highcharts, og tilbyr et alternativ for å tilpasse formatet på en akse etikett med en JavaScript-tilbakering funksjon, så vi hektet inn som for å vise hver annen dato på etiketten. Fra det vi skrev en algoritme for å ta den første dato i hver måned som ble vist, og legg måneden navn i markup for etiketten, noe som gjør UI litt renere og lettere å fordøye.

Andre Analytics-Alternativer, med Utdrag

Hvis du fortsatt ønsker å kjøre tredje-part skript og andre slags analytics, Netlify har evner til å legge til noe globalt i <head> – eller <body> – kodene. Dette er nyttig fordi, avhengig av hvordan nettstedet er satt opp, kan det være litt av en smerte å legge til tredjeparts skript til hver side. Plus, noen ganger ønsker du å gi mulighet til å endre disse skriptene til noen som ikke har tilgang til en repo. Gå til den aktuelle siden i dashbordet, og deretter på Innstillinger → Bygg & Distribuere → etterbehandling.

Det er der du vil finne Kodebiten Injeksjon:

Klikk “Legg til kodebiten” og du vil være i stand til å velge om du vil legge til en tredjepart kodebiten <body> – eller <head> – koden, og du vil ha en endring for å legge inn koden i HTML. For eksempel, hvis du trenger å legge til Google Analytics, vil du pakker det inn i et script-tag som dette:

<script asynkron src=”https://www.googletagmanager.com/gtag/js?id=UA-68528-29″></script>
<script>
vinduet.dataLayer = vinduet.dataLayer || [];
funksjonen gtag(){dataLayer.trykk(argumenter);}
gtag(‘js’, new Date ();

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

Du vil også nevne det, slik at du kan holde styr på det. Hvis du trenger å legge til mer senere, dette er nyttig.

Det er det!

Er du av og kjører med den nye Netlify Analytics-tilbud som er innebygd eller en mer robust verktøy.