Einführung Netlify Analytics

0
19

Sie arbeiten eine Weile auf eine Seite des Projekts. Sie denken, es ist ziemlich cool! Sie entscheiden, zu lösen, es in die Welt. Und dann… geht es gut. Oder es wird nicht gut gehen. Warten, ist das richtig? Sie vergaß hinzuzufügen, analytics — es hat einfach nicht kreuzen Sie Ihre Meinung an der Zeit. Nun, du bist ziemlich neugierig, wie viele Menschen haben die Website besucht, aber… Sie sind sich nicht sicher. Geben Sie Netlify Analytics.

Es gibt so viele Zeiten, wo ich:

  • Vergessen, hinzuzufügen analytics
  • Will nicht entstehen, weil das zusätzliche Gewicht Seite, oder
  • Ich bin besorgt mit Fragen der Privatsphäre

Ich veröffentlichte ein CSS-Grid-Generator im letzten Monat, und ich vergaß hinzuzufügen, analytics. Der release ging gut, aber jetzt ist es ein wenig eine black box für mich so weit, was da passiert ist oder wenn ich mich anpassen müssen, um ein release in der Zukunft. Nun, allerdings kann ich aktivieren Netlify Analytics und sehe in die Vergangenheit zimmerreserviereung, ohne das Sie verloren jegliche Informationen. Süß.

Netlify Analytics nicht haben eine ton der Glocken und pfeift — es ist nicht dazu gedacht, ein Ersatz für die super umfassende marketing-tools. Aber wenn Sie wollen, um einige Daten über Ihre Website, ohne Zugabe eine Menge von Skripten, kann es ein nützliches Werkzeug sein.

Eine wirklich nette Sache über es ist die Genauigkeit. Da die Daten, die vom server kommt, kann man ein klares Bild von dem, was die server wirklich bedient, anstatt sich auf einen Dritten haben könnte, abwechslungsreiche Berichterstattung durch Dinge wie add-Blocker, der kann skew client-side reporting (15% der Nutzer sind schätzungsweise zu verwenden tools wie Ghostery, zum Beispiel), caching und andere Faktoren.

Das Analytics-Dashboard

Das dashboard für jede Website zeigt einige “auf einen Blick” Informationen:

Dann Tauchen Sie ein in detaillierte Informationen durch spezifische Datum:

Es ist ein bisschen von Informationen aus top-Quellen und die besten Seiten:

Es gibt einen Bereich für “Top-Ressourcen Nicht Gefunden”, die zeigt alle Seiten, Bilder, alles, was Ihre Besucher versuchte abzurufen, die von Ihrer Website. Wenn ich aktiviert es in mir, ich war in der Lage zu beheben eine defekte Ressource, die ich schon längst vergessen.

Es wird genial sein, in der Lage zu überprüfen, wie einige meiner dev-Projekten tun. Aber ich bin auch wirklich aufgeregt, um zu nehmen, dass zusätzliche Implementierung Schritt aus meiner Arbeit. Die Vorbehalte im Auge zu behalten ist, dass Ihre Webseite muss gehostet werden, die von Netlify, um den Analytics-tools, und es ist eine kostenpflichtige Funktion. Jede Website, die Sie aktivieren, wird zeigen, bis zu 90 Tage (3 Abrechnung Zyklen) in die “verwendete Bandbreite” – Diagramm, und bis zu 30 Tage in allen anderen charts, wenn es alt genug ist, jedoch könnte es bis zu 2 Tage zwischen, wenn Sie die Analyse aktiviert und, wenn das dashboard berechnet und ausgefüllt.

Unter der Haube

Das analytics-dashboard selbst ist gebaut mit Reagieren und Highcharts. Highcharts ist eine JavaScript-charting-Bibliothek, die beinhaltet, responsive Optionen und ein entsprechendes Modul. Alle Komponenten verarbeiten von Daten aus unseren internen analytics-API.

Bevor die Entwicklung begann, führten wir einen internen Vergleich Erhebung von Daten-Visualisierung-Bibliotheken, um die beste zu wählen für unsere Bedürfnisse. Wir landeten auf Highcharts über andere beliebte Optionen wie d3.js vor allem auch, weil es bedeutet, dass jeder Ingenieur bei Netlify mit JavaScript-Erfahrung können springen und dazu beitragen, ob Sie tief SVG-und D3-spezifisches wissen oder nicht.

Während die Diagramme selbst Rendern von SVG-Elemente, Highcharts können Sie machen jeden text innerhalb der Grafik mit HTML, Vereinfachung und Beschleunigung unserer Entwicklung Zeit und ermöglicht uns den Einsatz von CSS für fortgeschrittene styling. Die Highcharts docs sind auch erstklassig und bieten eine Tonne von Anpassungsoptionen, durch Ihre deklarative API.

Wir nutzten die Highcharts-wrapper für Reagieren, um erstellen Sie wiederverwendbare Komponenten Reagieren für jeden Typ von Grafik. Die “Top-Quellen” “Top-Seiten” und “Top-Ressourcen nicht gefunden” – Karten verwenden eine andere Komponente zeigt, dass ein <table> mit den Daten übergeben, die als Requisiten.

Eine der schwierigsten Herausforderungen, denen wir uns begegnet auf der UI-Seite während der Erstellung dieser Diagramme wurde die Anzeige von Daten entlang der X-Achse der Bereich charts in einer Weise, die nicht überwältigend.

Highcharts bietet eine option zum anpassen, das format der Achsenbeschriftung über eine JavaScript-callback-Funktion, also trafen wir uns in, das zur Anzeige von jedem anderen Datum als label. Von dort aus, wir schrieben einen Algorithmus, um zu erfassen, der erste Tag jedes Monats, wurde angezeigt wird, und fügen Sie den Namen des Monats in der Markups für das label, so dass das UI ein bisschen sauberer und leichter zu verdauen.

Mit anderen Analytics-Alternativen, mit Snippets

Wenn Sie möchten dennoch Drittanbieter-Skripte und andere Arten von Analysen, Netlify Fähigkeiten hat, etwas Global zu <head> oder <body> – tags. Dies ist nützlich, weil, je nachdem, wie Ihre Website aufgebaut ist, kann es sein, ein bisschen Schmerz, um das hinzufügen von Drittanbieter-scripts auf jeder Seite. Plus -, manchmal wollen Sie geben die Möglichkeit der änderung dieser Skripte zu Personen, die keinen Zugang zu den repo. Gehen Sie auf die jeweilige Seite im dashboard, dann auf Einstellungen → Build & Deploy → Post-processing.

Das ist, wo Sie finden Snippet Injektion:

Klicken Sie auf “Add snippet” und Sie werden in der Lage sein zu wählen, ob Sie möchten, fügen Sie die Drittanbieter-snippet in den <body> oder <head> – tag, und Sie müssen eine änderung zu veröffentlichen Sie Ihren code in HTML. Zum Beispiel, wenn Sie brauchen, um hinzuzufügen, Google Analytics, würden Sie wickeln Sie es in einem script-tag wie dieser:

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

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

Du wirst es auch nennen, so dass Sie den überblick behalten. Wenn Sie benötigen, um mehr hinzuzufügen später, ist dies hilfreich.

Das ist es!

Sie sind aus und laufen mit den neuen Netlify Analytics bietet, dass das eingebaute oder ein robusteres Werkzeug.