De Invoering Van Netlify Analytics

0
36

Werk je een tijdje op een side-project. Je denkt dat het cool is! U besluiten om het de wereld in. En dan… gaat het goed. Of het gaat niet goed. Wacht, is dat juist? U vergat toe te voegen google analytics — het wilde maar niet over je geest op het moment. Nu bent u vrij benieuwd hoeveel mensen hebben al een bezoek aan de site, maar… u bent er niet zeker van. Voer Netlify Analytics.

Er zijn zoveel momenten waar ik:

  • Vergeet toe te voegen google analytics
  • Wil niet de kosten van de extra pagina gewicht, of
  • Ik ben bezig met privacy-kwesties

Ik bracht een CSS Grid Generator laatste maand en ik vergat toe te voegen google analytics. De release ging goed, maar nu is het een beetje een black box voor mij zo ver wat er is gebeurd, of als ik moet pas een release in de toekomst. Nu, echter, ik kan het inschakelen Netlify Analytics en zie in het verleden zonder verloren te hebben van alle informatie. Zoet.

Netlify Analytics hoeft niet een ton van de toeters en bellen — het is niet bedoeld als een vervanging voor de super uitgebreide marketing tools. Maar als u wilt krijgen een aantal gegevens over uw website, zonder toevoeging van veel van de scripts, het kan een handig hulpmiddel.

Echt een mooi ding over het is de nauwkeurigheid. Aangezien de gegevens afkomstig van de server, kunt u een duidelijk beeld van wat de server eigenlijk geserveerd, in plaats van te vertrouwen op een derde partij die wellicht gevarieerd rapportage door dingen zoals het toevoegen van blokkers die in de war kunnen schoppen client-side rapportage (15% van de gebruikers zijn geschat gebruik maken van tools als Ghostery, bijvoorbeeld), caching en andere factoren.

De Google Analytics-Dashboard

Het dashboard voor elke site ziet u enkele “in een oogopslag” informatie:

Dan kunt u een duik in meer gedetailleerde informatie over specifieke datum:

Er is een beetje van de informatie uit de beste bronnen en top pagina ‘ s:

Er is een ruimte voor “Top Bronnen Niet Gevonden”, waarin alle pagina ‘ s, afbeeldingen, alles wat uw bezoekers, proberen en falen voor het ophalen van uw site. Als ik het kon op de mijne, ik was in staat om het repareren van een gebroken bron die ik al lang vergeten.

Het gaat om een geweldige mogelijkheid om te controleren hoe sommige van mijn dev-projecten doen. Maar ik ben ook erg enthousiast te nemen dat extra uitvoering stap uit mijn werk. Het voorbehoud dat in gedachten te houden is dat uw site dient te worden gehost door Netlify in om gebruik te maken van de google Analytics-tools, en het is een betaalde functie. Elke site die u inschakelt zal te zien zijn tot 90 dagen (3 factureringscycli) in de “Bandbreedte” grafiek en maximaal 30 dagen in alle grafieken als hij oud genoeg is, maar het kan duren tot 2 dagen tussen het moment dat u bij het inschakelen van google analytics en wanneer je dashboard is berekend en ingevuld.

Onder de motorkap

De google analytics-dashboard zelf is gebouwd met Reageren en Highcharts. Highcharts is een JavaScript grafieken bibliotheek bevat reageren opties en een van de toegankelijkheid van de module. Alle onderdelen verbruiken gegevens van onze interne analytics API.

Voor de ontwikkeling is begonnen, we hebben een interne vergelijking enquête van data visualisatie bibliotheken om de beste te kiezen voor onze behoeften. We landden op Highcharts over andere populaire opties zoals d3.js vooral omdat het betekent dat elke ingenieur in Netlify met JavaScript-ervaring kunt springen en bijdragen, of ze hebben een diepe SVG en D3-specifieke kennis of niet.

Terwijl de grafieken zelf zijn gemaakt SVG-elementen, Highcharts kunt u te maken tekst in de grafiek met behulp van HTML, het vereenvoudigen en versnellen van onze ontwikkeling in de tijd en wat ons toelaat om CSS te gebruiken voor geavanceerde styling. De Highcharts documenten zijn ook top notch en bieden een ton van de aanpassingsmogelijkheden via hun declaratieve API.

We gebruikten de Highcharts wrapper voor het Reageren om het creëren van herbruikbare Reageren onderdelen voor elk type van grafiek. De “Top bronnen,” “Top pagina’ s,” en “Top bronnen niet gevonden” – kaarten maken gebruik van een ander onderdeel dat geeft een <table> het gebruik van de gegevens doorgegeven als rekwisieten.

Een van de lastiger uitdagingen die we tegenkwamen op de UI-kant, terwijl de bouw van deze grafieken is het weergeven van datums langs de X-as van het gebied grafieken op een manier die niet overweldigend.

Highcharts biedt een optie voor het aanpassen van het formaat van een as-label gebruik van een JavaScript-callback-functie, zodat wij aangesloten in dat scherm elke andere datum als een label. Vanaf daar schreven we een algoritme voor het vastleggen van de eerste dag van elke maand wordt weergegeven en voeg de naam van de maand in de markup voor het label, waardoor de UI een beetje schoner en gemakkelijker te verteren is.

De overige google Analytics-Alternatieven, met Fragmenten

Als u nog steeds wilt uitvoeren third-party scripts en andere soort van google analytics, Netlify heeft mogelijkheden om iets toe te voegen wereldwijd de <head> of <body> tags. Dit is handig omdat, afhankelijk van hoe uw site is ingesteld, kan het een beetje pijn aan derden toevoegen van scripts om elke pagina. Plus, soms wil je de mogelijkheid geven om deze te veranderen scripts aan iemand die geen toegang hebben tot het archief. Ga naar de desbetreffende site in het dashboard, vervolgens-Instellingen → Bouwen & Implementeren → Post processing.

Dat is waar u het Fragment Injectie:

Klik op “Toevoegen fragment” en u zult in staat zijn om te selecteren of u wilt toevoegen van de derde-partij-fragment in de <body> en de <head> – tag, en je hebt een wijziging van uw code in HTML. Bijvoorbeeld, als u wilt toevoegen van Google Analytics, je zou wikkel het in een script-tag als deze:

<script async src=”https://www.googletagmanager.com/gtag/js?id=UA-68528-29″></script>
<script>
venster.dataLayer = venster.dataLayer || [];
functie gtag(){dataLayer.push(argumenten);}
gtag(‘js’, new Date());

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

U zult ook een naam, zodat u kunt in de gaten houden. Als u later meer toevoegen, dit is handig.

Dat is het!

Je bent uit en draait met de nieuwe Netlify Analytics biedt de ingebouwde of een meer robuust gereedschap.