Erstellen eines mobilfreundlichen Dashboards in Google Data Studio

Blog

Zusammenfassung

In diesem Artikel bauen wir dieses mobile Produkt-Dashboard für die Open-Source-Web-App ‘ Prognostiker ’ mit Google Data Studio und dabei lernen wir, wie man:



  • Organisieren Sie Daten in Kategorien wie Akquisition, Engagement, Bindung und Wachstum
  • Erstellen Sie eine einfache mobile Navigationsleiste, um zu verschiedenen Abschnitten unseres Berichts zu springen
  • Erstellen Sie moderne mobile UI-Elemente wie Datenkarten und Produkt-Engagement-Trichter
  • Integrieren Sie Daten aus einem Wachstumsrückstand, um die Geschichte darüber zu erzählen, wie wir unsere App verbessern und KPIs vorantreiben werden
  • Verknüpfen Sie Daten mithilfe der Datenzusammenführungsfunktion von Google
  • Erstellen Sie eine einfache Webseite für einen von Data Studio generierten iFrame, damit wir unseren Bericht problemlos im mobilen Web anzeigen können.

Am Ende dieser Anleitung sollten Sie in der Lage sein, diese Erkenntnisse auf Ihre KPIs anzuwenden, um Ihr eigenes produkt- oder verkaufsorientiertes mobiles Dashboard in Google Data Studio zu erstellen.

Jetzt lass uns loslegen und Spaß haben!

Das Erstellen mobiler Dashboards bereitet mir überraschend viel Freude.



Vielleicht liegt es an der Tatsache, dass wir heute unsere mobilen Geräte nutzen, um so viele Informationen in der Welt zu konsumieren, dass es sich einfach anfühlt, mein Telefon auf ein schnelles Geschäfts-Update zu überprüfen. Oft kann es sich wie Arbeit anfühlen, den Laptop hochzufahren und einige Daten zu überprüfen.

Aber auf meinem Handy fühlt sich etwas anders an.



Was wäre, wenn unsere Geschäftsdaten über die wachsende Zahl der Plattformen, die wir heute verwenden, auf einem mobilen Gerät leicht zugänglich wären? Wäre das nicht erstaunlich?

Klar, für die intensiveren Analysen und Präsentationen bräuchten wir immer noch unsere Laptops, aber auf hohem Niveau scheinen uns unsere mobilen Geräte das ideale Medium zu sein, um schnelle Business-Updates zu konsumieren. Gerade genug Informationen, um einen Einblick oder eine Frage zu wecken, um zu wissen, was vor sich geht, bevor wir unsere Laptops aufklappen und diese explorative Analyse durchführen.

Dieser Artikel ist der erste in einer Reihe, die Menschen dabei helfen soll, bessere Dashboards zu erstellen und die Geschäftsdaten zu organisieren, die wir täglich im Web verwenden.

Heute werden wir also etwas Spaß haben und ein mobiles Produkt-Dashboard in Google Data Studio erstellen und es dann in eine Webseite einbetten!

Warum Data Studio fragen Sie?

Abgesehen von Python ist es mein Lieblingsort, um Daten zu erkunden und zu visualisieren. Es ist die Leinwand, auf der ich nicht nur die Geschichte meiner Geschäftsleistung erzähle, sondern auch, was ich tue, um mein Geschäft aktiv zu verbessern und meine Unternehmensziele voranzutreiben, um meine Ziele zu erreichen. Und es wird nur besser, wenn Sie wissen, wie Sie Python mit BigQuery nutzen können (aber das ist ein anderer Blogbeitrag)

Dieses Dashboard wird zwar nicht reaktionsschnell sein, aber es ist gut genug, darüber nachzudenken, wie wir unsere Daten anordnen, damit wir beim Scrollen durch unser Dashboard in der Lage sind, vollständig zu verstehen, was mit unserem Produkt passiert, und identifizieren Möglichkeiten zur Steigerung der Nutzung. Unterwegs haben wir ein paar Tipps und Tricks für die Arbeit mit dem Layout.

flattern Rede zu Text

Stellen wir uns also vor, wir arbeiten an einer Open-Source-Webanwendung, die Menschen durch den Prozess der Erstellung von Basisprognosen führt, und wir möchten sie verbessern.

Wie würde ein zusammenfassender KPI-Bericht für diese App auf einem Mobilgerät aussehen?

Lassen Sie uns zunächst unsere Datenquellen in Ordnung bringen

Ich gehe davon aus, dass Sie Data Studio schon einmal Datenquellen hinzugefügt haben, aber wenn Sie dies nicht getan haben, ist hier ein Verknüpfung .

Um es einfach und relativ kurz zu halten, konzentriert sich dieses Tutorial hauptsächlich auf den Aufbau der ersten Seite in diesem Bericht. Dazu verwenden wir in diesem Bericht einige Datenquellen aus:

  • Google Analytics – Prognostiker (Produktionsdaten)
  • Google Tabellen – Aufbewahrungsdaten, Ziele , und Wachstumsrückstand Daten

Anpassen der Leinwandgröße

Jetzt, da wir unsere Daten in Ordnung haben, müssen wir eine 'mobile-freundliche' Bildschirmbreite für unsere Leinwand auswählen.

Für dieses Dashboard habe ich eine Breite von 393 Pixel gewählt, da ich derzeit ein Pixel 4 verwende, aber ich würde empfehlen, in Data Studio eine Breite von etwa 400 Pixel zu wählen. Oder du könntest einen Service wie nutzen Statscounter, um die beliebtesten Bildschirmbreiten zu finden und starte von dort aus. Wenn wir diesen Data Studio-Bericht in eine Webseite einbetten und die Breite des Iframes auf 100 % setzen, sollte der Data Studio-Bericht auf jeden Fall innerhalb dieses Bereichs skaliert werden.

Um die Größe Ihres Dashboards festzulegen, klicken Sie mit der rechten Maustaste auf eine beliebige Stelle in der leeren Leinwand und wählen Sie:

Aktuelle Seiteneinstellungen

Google Test Visual Studio

Öffnen Sie dann die Registerkarte STYLE im rechten Menü und aktualisieren Sie die Breite und Höhe Ihrer Leinwand. Wie Sie im Screenshot unten sehen können, habe ich eine Leinwandgröße von 393 x 2000 px ausgewählt.

So legen Sie eine mobilfreundliche Leinwandgröße in Google Data Studio fest

#data-science #google-analytics #google-data-studio #dashboard-design #analytics

medium.com

Erstellen eines mobilfreundlichen Dashboards in Google Data Studio

In diesem Artikel erstellen wir dieses mobile Produkt-Dashboard für die Open-Source-Web-App „forecastr“ mit Google Data Studio