Einführung von Netlify Analytics

Sie arbeiten eine Weile an einem Nebenprojekt. Sie finden es ziemlich cool! Sie beschließen, es in die Welt zu entlassen. Und dann… es läuft gut. Oder es läuft nicht gut. Moment, stimmt das? Sie haben vergessen, Analytics hinzuzufügen – es kam Ihnen einfach nicht in den Sinn. Jetzt sind Sie ziemlich neugierig, wie viele Leute die Seite besucht haben, aber… Sie sind sich nicht sicher. Hier kommt Netlify Analytics ins Spiel.

Es gibt so viele Male, in denen ich

• Vergesse, Analytics hinzuzufügen
• Möchte nicht die zusätzliche Seitenlast tragen, oder
• Ich mache mir Sorgen wegen Datenschutzproblemen

Ich habe letzten Monat einen CSS Grid Generator veröffentlicht und vergessen, Analytics hinzuzufügen. Die Veröffentlichung verlief gut, aber jetzt ist sie für mich eine Art Blackbox, was dort passiert ist oder ob ich eine Veröffentlichung in Zukunft anpassen muss. Jetzt kann ich jedoch Netlify Analytics aktivieren und in die Vergangenheit sehen, ohne Informationen verloren zu haben. *Großartig*.

Netlify Analytics bietet keine riesige Menge an Schnickschnack – es ist nicht als Ersatz für sehr umfassende Marketing-Tools gedacht. Aber wenn Sie einige Daten über Ihre Website erhalten möchten, ohne viele Skripte hinzuzufügen, kann es ein nützliches Werkzeug sein.

Eine wirklich schöne Sache daran ist die **Genauigkeit**. Da die Daten vom Server kommen, können Sie ein klares Bild davon bekommen, was der Server tatsächlich ausgeliefert hat, anstatt sich auf einen Drittanbieter zu verlassen, der möglicherweise unterschiedliche Berichte aufgrund von Dingen wie Werbeblockern, die clientseitige Berichte verzerren können (es wird geschätzt, dass 15% der Benutzer Tools wie Ghostery verwenden), Caching und andere Faktoren, hatte.

Das Analytics-Dashboard

Das Dashboard für jede Website zeigt einige Informationen „auf einen Blick“

Dann können Sie sich für spezifische Daten weiter in detailliertere Informationen vertiefen

Es gibt einige Informationen von Top-Quellen und Top-Seiten

Es gibt einen Bereich für „Top nicht gefundene Ressourcen“, der alle Seiten, Bilder, alles anzeigt, was Ihre Besucher abzurufen versuchen und nicht können. Als ich es auf meinem aktivierte, konnte ich eine defekte Ressource beheben, die ich lange vergessen hatte.

Es wird großartig sein, überprüfen zu können, wie einige meiner Dev-Projekte laufen. Aber ich bin auch wirklich begeistert, diesen zusätzlichen Implementierungsschritt aus meiner Arbeit zu entfernen. Zu beachtende Vorbehalte sind, dass Ihre Website von Netlify gehostet werden muss, um die Analytics-Tools nutzen zu können, und dass es sich um eine kostenpflichtige Funktion handelt. Jede aktivierte Website zeigt bis zu 90 Tage (3 Abrechnungszyklen) im Diagramm „Bandbreite genutzt“ und bis zu 30 Tage in allen anderen Diagrammen, wenn sie alt genug ist. Es kann jedoch bis zu 2 Tage dauern, bis Ihr Dashboard berechnet und gefüllt ist, nachdem Sie Analytics aktiviert haben.

Unter der Haube

Das Analytics-Dashboard selbst ist mit React und Highcharts erstellt. Highcharts ist eine JavaScript-Charting-Bibliothek, die responsive Optionen und ein Barrierefreiheitsmodul enthält. Alle Komponenten beziehen Daten von unserer internen Analytics-API.

Bevor die Entwicklung begann, führten wir eine interne Vergleichsumfrage zu Datenvisualisierungsbibliotheken durch, um die beste für unsere Bedürfnisse auszuwählen. Wir entschieden uns für Highcharts gegenüber anderen beliebten Optionen wie d3.js, hauptsächlich weil dies bedeutet, dass jeder Ingenieur bei Netlify mit JavaScript-Erfahrung einsteigen und einen Beitrag leisten kann, unabhängig davon, ob er tiefgehende SVG- und D3-spezifische Kenntnisse hat oder nicht.

Während die Diagramme selbst als SVG-Elemente gerendert werden, erlaubt Highcharts Ihnen, jeden Text im Diagramm mit HTML zu rendern, was unsere Entwicklungszeit vereinfacht und beschleunigt und es uns ermöglicht, CSS für erweiterte Stile zu verwenden. Die Highcharts-Dokumentation ist ebenfalls erstklassig und bietet eine Fülle von Anpassungsoptionen über ihre deklarative API.

Wir haben den Highcharts-Wrapper für React verwendet, um wiederverwendbare React-Komponenten für jeden Diagrammtyp zu erstellen. Die Karten „Top-Quellen“, „Top-Seiten“ und „Top nicht gefundene Ressourcen“ verwenden eine andere Komponente, die eine <table> mit den als props übergebenen Daten anzeigt.

Eine der kniffligeren Herausforderungen, auf die wir bei der Erstellung dieser Diagramme auf der UI-Seite gestoßen sind, war die Anzeige von Daten auf der X-Achse der Flächendiagramme auf eine Weise, die nicht überwältigend aussieht.

Highcharts bietet eine Option, das Format eines Achsenlabels anzupassen mit einer JavaScript-Callback-Funktion. Wir haben diese genutzt, um jedes zweite Datum als Label anzuzeigen. Von dort aus haben wir einen Algorithmus geschrieben, um das erste Datum jedes angezeigten Monats zu erfassen und den Monatsnamen in das Markup für das Label einzufügen, wodurch die UI etwas sauberer und leichter verdaulich wird.

Andere Analytics-Alternativen mit Snippets

Wenn Sie immer noch Skripte von Drittanbietern und andere Arten von Analytics ausführen möchten, bietet Netlify Funktionen, um etwas global zu <head> oder <body> Tags hinzuzufügen. Dies ist nützlich, da es je nach Einrichtung Ihrer Website mühsam sein kann, Drittanbieter-Skripte zu jeder Seite hinzuzufügen. Außerdem möchten Sie manchmal jemandem die Möglichkeit geben, diese Skripte zu ändern, der keinen Zugriff auf das Repository hat. Gehen Sie im Dashboard zur jeweiligen Website, dann Einstellungen → Build & Deploy → Post processing.

Dort finden Sie Snippet Injection

Klicken Sie auf „Snippet hinzufügen“ und Sie können auswählen, ob Sie das Drittanbieter-Snippet zum <body> oder zum <head> Tag hinzufügen möchten, und Sie haben die Möglichkeit, Ihren Code in HTML einzufügen. Wenn Sie beispielsweise Google Analytics hinzufügen müssen, würden Sie es in ein Skript-Tag wie folgt einpacken

<script async src="https://#/gtag/js?id=UA-68528-29"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

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

Sie werden es auch benennen, damit Sie den Überblick behalten können. Wenn Sie später weitere hinzufügen müssen, ist dies hilfreich.

Das ist alles!

Sie können entweder mit dem neuen integrierten Netlify Analytics-Angebot oder einem robusteren Tool loslegen.