Interaktive Dashboards mit der Google Analytics Embed API

Die Google Analytics Embed API ist eine Javascript Library, mit der Google Analytics Charts und Diagramme auf Third-Party Websites “eingebettet” werden können, z.B. direkt im firmeneigenen Intranet oder auf der Firmen-Site.

Das einzige was dazu gebraucht wird: Ein wenig Programmier-Kenntnisse (HTML, Javascript, CSS) und eine Domain. Und schon können eigene, interaktive und vor allem dynamische Dashboards erstellt werden.

Features der Google Analytics Embed API

Die genialen Features der Embed API möchte ich Ihnen anhand meines Demo Dashboards unter data.e-dialog.at/embedapi/ zeigen (gerne parallel öffnen und gleich direkt mitschauen):

Authentifizieren und Autorisieren

Um mein Demo Dashboard nutzen zu können, müssen Sie sich zuerst client-seitig authentifizieren und autorisieren. D.h. einerseits mit Ihrem Google Account in Ihrem Browser anmelden und andererseits zustimmen, dass mein Dashboard auf Ihre Google Analytics Daten zugreifen darf.

Keine Sorge, Ihre Daten werden NICHT bei uns gespeichert (weder Anmelde- noch GA Daten) : Das schöne ist, dass Google den gesamten Autorisierung-Prozess für seine User übernimmt. D.h. man muss sich nicht selber um dieses heikle Thema kümmern. Und: Damit entfällt auch ein großer Brocken Arbeit…

Google Analytics Embed API Dashboard Autorisierung
Google Analytics Embed API Dashboard Autorisierung

Nachdem Sie sich nun mit Ihrem Google Account angemeldet haben, sehen Sie natürlich auch nur jene Google Analytics Accounts, Properties und Views auf die Sie Zugriff haben: D.h. das Dashboard von Google Analytics Embed API agiert als eine Art Grundgerüst, das erst mit Daten befüllt werden muss.

Anmerkung: Google stellt seinen Usern auch eine server-seitige Autorisierung zur Verfügung. Damit können auch User das Dashboard nutzen, die keinen Zugriff auf Google Analytics Konten haben. Details dazu finden Sie auf der Google Demos und Tools Website.

Eigenes Layout und Design

Zurück zu meinem Demo Dashboard unter data.e-dialog.at/embedapi/ und den genialen Features und Vorteilen:

Ein riesiger Vorteil ist, dass Sie an keinerlei Design- und Layout Vorgaben gebunden sind. Sie können Ihre Dashboards 2.0 mit dem Firmen Logo und CI Farben branden und auch die Charts so anordnen, wie Sie es gerne hätten. Das ist ein Punkt der vielen Usern in den nativen GA Dashboards ein Dorn im Auge ist – mit der Google Analytics Embed API kein Problem!

Third Party Visualisierung

Sie werden sogar noch ein Stückchen flexibler in der Visualisierung, da sogar das Aussehen der Charts bestimmt werden kann: Standardmäßig werden die selben Charts verwendet, die Sie aus Google Analytics kennen und gewohnt sind. Wenn Ihnen dieses Design jedoch nicht gefällt, können Sie ganz einfach auf Third-Party Visualisierungs Tools wie d3.js und chart.js zurückgreifen. Das ist awesome!

Google Analytics Embed API 3rd Party Visualisierung
Google Analytics Embed API 3rd Party Visualisierung

Custom Components

Die Google Analytics Embed API stellt eine ganze Menge Komponenten zur Verfügung wie z.B. verschiedene Chart Typen:

  • Linien Diagramme (Line)
  • Balken Diagramme (Bar)
  • Donut Diagramme (Pie)
  • Tabellen (Column)
  • Landkarten (Geo)

Was aber zum Beispiel fehlt, ist ein Datums Selektor: Standardmäßig werden einfach die letzten 30 Tage im Dashboard angezeigt. Viel gewohnter ist es jedoch, sich seinen gewünschten Zeitraum einfach selbst einzustellen. Und das kann mit der Google Analytics Embed API ganz einfach dazu programmiert werden. Genauso wie alle anderen Komponenten, die Sie gerne hätten.

Google Analytics Embed API Datums Selektor
Google Analytics Embed API Datums Selektor

Interaktive Charts

Das (für mich) beste und zugleich außergewöhnlichste Feature ist, dass Charts dynamisch und interaktiv genutzt werden können. Beispielsweise indem ein Chart als Filter für alle anderen Charts agiert. In meinem Beispiel etwa die Browser Tabelle oder Landkarte. Klicken Sie z.B. auf einen Browser wie Google Chrome, dann werden alle anderen Diagramme auf diesen Filter upgedatet – und zwar instant.

Das hat den riesigen Vorteil, dass Daten in einem Meeting live erforscht werden können: Sie können dadurch wesentlich tiefer in die Materie einsteigen und analysieren, wie und was Sie in dem Augenblick gerade brauchen. Das ist – im Gegenzug zu den statischen GA Dashboards – extrem hilfreich!

Multiple Views

Ein weiteres cooles Feature ist, dass mit der Google Analytics Embed API, Daten aus mehreren GA Datenansichten gleichzeitig abgerufen werden können. Das macht Vergleiche zwischen verschiedenen Views – sogar zwischen verschiedenen Properties und Accounts – unheimlich einfach.

Google Analytics Embed API Multiple Views
Google Analytics Embed API Multiple Views

Einziger Nachteil: Die Charts können nur nebeneinander (und übereinander?!) dargestellt werden. Viel schöner fände ich es, wenn die Daten aus mehreren Views in einem Chart kombiniert werden könnten: Ich denke dabei z.B. an ein Liniendiagramm, das mir den Traffic aus zwei Views in unterschiedlichen Farben darstellt – eigentlich so wie wir es auch aus Jahresvergleichen in GA kennen. Das geht aber leider (noch?) nicht…

Multiple Datenquellen

Das letzte coole Feature der Embed API ist, dass die GA Daten mit Daten aus externen Datenquellen verbunden werden können z.B. aus Excel Listen. Damit können alle Daten, die über eine API abgreifbar sind, gemeinsam in einem Dashboard dargestellt und analysiert werden – interaktiv und dynamisch natürlich. 😉

How to: Embed API Dashboard erstellen

Das klingt ja jetzt alles super spannend, oder? Fast schon extrem aufwändig?

Das ist es aber gar nicht: Die Embed API ist extrem simpel aufgebaut und das schöne ist, dass Google jede Menge Code Beispiele zur Verfügung stellt. Das macht das Arbeiten – gerade am Anfang – super easy.

Zusammengefasst sind nur 4 Schritte zur Erstellung eines Embed API Dashboards erforderlich:

  1. ClientID erstellen: Zuallererst müssen Sie über die Google Developer Console eine ClientID erstellen: Anleitung hier. Mit der ClientID autorisieren Sie sich bei Google und erhalten Zugriff auf die Embed API.
  2. Bibliothek laden und User Autorisierung vornehmen: Weiters stellt Google den Code für das Laden der Bibliothek und den Anmelde-Button inkl. Autorisierung zur Verfügung: Link zur Google Developer Seite. Der Code kann einfach kopiert und auf der eigenen Site eingefügt werden.
  3. Charts erstellen: Im Anschluss können Sie auch schon die Charts erstellen und Ihrer Kreativität freien Lauf lassen. Und damit Sie sich am Anfang leichter tun, stellt Google auch hier jede Menge Beispiele zur Verfügung: Link zur Demo und Tools Website. 
  4. Customizen: Am Ende der schönste aller Schritte: Das Customizen, damit das Dashboard super individuell gestaltet wird! 😀

Und das war’s auch schon: Fertig ist das Dashboard mit der Google Embed API!

Fazit

Google stellt seinen Usern mit der Embed API eine weitere Möglichkeit zur Verfügung , die wichtigsten Daten komprimiert und übersichtlich darzustellen. Das ist vor allem für jene ein Vorteil, die nicht die nativen Dashboards in GA nutzen wollen. Und auch für jene, die statische Dashboards satt haben und sich lieber interaktiven, dynamischen widmen. Dass Embed API Dashboards auf dem eigenen Server gehostet werden und Sie sich dadurch nicht abhängig von Drittanbieter machen, ist dabei ein positiver Nebeneffekt.

Dafür ist die Erstellung nicht ganz so einfach und bequem wie jene von nativen Dashboards in GA: Man braucht technische Grundkenntnisse um sich ein Dashboard selbst zusammenbauen zu können. Jedoch stellt einem Google jede Menge Code Snippets zur Verfügung, die das Zusammenstückeln der gewünschten Features extrem vereinfacht.

Für weitere Ideen oder Hilfe bei der Umsetzung, sind Sie bei uns an der richtigen Stelle: Kontaktieren Sie uns via kontakt@e-dialog.at oder wa@e-dialog.at.

Hinterlassen Sie einen Kommentar: