Alle Daten in Looker Studio verbinden und visualisieren

1. Einleitung

Mit Looker Studio können Sie kostenlos interaktive Live-Dashboards mit ansprechenden Datenvisualisierungen erstellen. Sie können Ihre Daten aus verschiedenen Quellen abrufen und in Looker Studio unbegrenzt viele Berichte erstellen. Dabei haben Sie die Möglichkeit, die Berichte vollständig zu bearbeiten und freizugeben. Der folgende Screenshot zeigt ein Beispiel für ein Looker Studio-Dashboard:

2f296fddf6af7393.png

( Klicken Sie hier, um diesen Beispielbericht in Looker Studio aufzurufen.)

Community-Connectors ist eine Funktion für Looker Studio, mit der Sie mit Apps Script Connectors für alle über das Internet zugänglichen Datenquellen erstellen können. Community-Connectors werden von der Looker Studio-Community entwickelt. Das bedeutet, dass jeder Community-Connectors erstellen kann. Sie können Community-Connectors auch für andere Nutzer freigeben, damit diese in Looker Studio auf ihre eigenen Daten zugreifen können.

Community-Connectors können in verschiedenen Anwendungsfällen verwendet werden:

  • Sie visualisieren Daten von einer kommerziellen Plattform (z. B. Social Media, Marketing, Analytics usw.).
  • Sie visualisieren lokale Unternehmensdaten, z. B. Verkaufsdaten aus einer lokalen MySQL-Datenbank.
  • Sie bieten Ihren Kunden eine Möglichkeit, ihre Daten aus Ihrem Dienst zu visualisieren.
  • Sie erstellen eine Plattform für die Berichterstellung per Knopfdruck
  • Sie visualisieren Ihre eigenen Daten aus einer Webquelle, z. B. indem Sie Ihr Google Fit-Dashboard erstellen.

Lerninhalte

  • Funktionsweise eines Looker Studio-Community-Connectors
  • Google Apps Script zum Erstellen eines Community-Connectors verwenden
  • Community-Connectors in Looker Studio verwenden

Voraussetzungen

  • Zugriff auf das Internet und einen Webbrowser
  • Ein Google-Konto
  • Grundkenntnisse in JavaScript und Web-APIs

2. Kurze Umfrage

Warum haben Sie sich für dieses Codelab entschieden?

Ich interessiere mich allgemein für Datenvisualisierung. Weitere Informationen zu Looker Studio Ich möchte einen eigenen Community-Connector erstellen. Ich versuche, Looker Studio in eine andere Plattform einzubinden. Ich interessiere mich für Google Cloud-Lösungen.

Wie möchten Sie dieses Codelab/diese Anleitung verwenden?

Nur überfliegen Lesen und Übungen durchführen

Wie vertraut sind Sie mit Looker Studio?

Habe ich noch nie gehört. Ich weiß, was es ist, aber ich nutze es nicht. Ich nutze es regelmäßig. Ich bin ein erfahrener Nutzer.

Was beschreibt Ihren Hintergrund am besten?

Entwickler Business-/Finanz-/Datenanalyst Data Scientist / Data Engineer Marketing-/Social-Media-/Digital Analytics-Experte Designer Sonstiges

Sie können zur nächsten Seite wechseln, um die Umfrageinformationen zu senden.

3. Community-Connectors – Übersicht

Mit Community-Connectors in Looker Studio können Sie eine direkte Verbindung von Looker Studio zu jeder über das Internet zugänglichen Datenquelle herstellen. Sie können eine Verbindung zu kommerziellen Plattformen, öffentlichen Datasets oder Ihren eigenen lokalen privaten Daten herstellen. Community-Connectors können Daten über Web-APIs, JDBC-APIs, Flatfiles (CSV, JSON, XML) und Apps Script-Dienste abrufen.

b25b8d6bea6da54b.png

Angenommen, Sie haben ein Paket auf npm veröffentlicht und möchten die Anzahl der Downloads des Pakets im Zeitverlauf nach Tag erfassen. In diesem Codelab erstellen Sie einen Community Connector, der Daten über die npm-Paket-Downloadzahlen-API abruft. Der Community-Connector kann dann in Looker Studio verwendet werden, um ein Dashboard zur Visualisierung der Downloadzahlen zu erstellen.

4. Workflow für Community-Connectors

In einem einfachen Community Connector definieren Sie vier Funktionen:

  • getAuthType()
  • getConfig()
  • getSchema()
  • getData()

Je nach aktuellem Schritt des Arbeitsablaufs führt Looker Studio diese Connector-Funktionen aus und verwendet die Antwort in den nachfolgenden Schritten. Im folgenden Video erhalten Sie einen Überblick über:

  • Funktionsweise eines Community-Connectors
  • Verschiedene Schritte im Workflow
  • Wann werden verschiedene Funktionen aufgerufen?
  • Wann in Looker Studio unterschiedliche Benutzeroberflächen angezeigt werden
  • Erwartete Nutzeraktionen in den einzelnen Schritten

Sie können das Codelab nach dem Ansehen des Videos fortsetzen.

Sie müssen sich diesen Workflow nicht merken. Er soll Ihnen nur einen Überblick darüber geben, was in einem Connector passiert. Sie können jederzeit zu diesem Diagramm zurückkehren.

cc6688bf38749e5.png

Im nächsten Schritt erstellen Sie den Connector in Google Apps Script. Sie müssen zwischen der Apps Script-Benutzeroberfläche und diesem Codelab hin- und herwechseln.

5. Apps Script-Projekt einrichten

Schritt 1:Rufen Sie Google Apps Script auf.

Schritt 2:Erstellen Sie ein neues Apps Script-Projekt, indem Sie oben links auf + Neues Projekt klicken.

fb12d7318d0946cf.png

Sie sehen ein Shell-Projekt mit einer leeren myFunction-Funktion in der Datei Code.gs.

b245ce5eb3dd2ee2.png

Schritt 3:Löschen Sie die Funktion myFunction.

Schritt 4:Geben Sie dem Projekt einen Namen:

  1. Klicken Sie oben links auf der Seite auf Untitled project.
  2. Geben Sie einen Projekttitel ein.

7172aebc181c91d4.png

Beginnen Sie mit dem Schreiben des Connector-Codes in der Datei Code.gs.

6. getAuthType() definieren

Looker Studio ruft die Funktion getAuthType() auf, wenn die vom Connector verwendete Authentifizierungsmethode ermittelt werden muss. Diese Funktion sollte die vom Connector benötigte Authentifizierungsmethode zurückgeben, um den Drittanbieterdienst zu autorisieren.

Für den npm-Download-Connector, den Sie erstellen, müssen Sie sich nicht bei einem Drittanbieterdienst authentifizieren, da für die verwendete API keine Authentifizierung erforderlich ist. Kopieren Sie den folgenden Code und fügen Sie ihn in Ihre Code.gs-Datei ein:

Code.gs

var cc = DataStudioApp.createCommunityConnector();

function getAuthType() {
  var AuthTypes = cc.AuthType;
  return cc
    .newAuthTypeResponse()
    .setAuthType(AuthTypes.NONE)
    .build();
}

Hier geben Sie an, dass für Ihren Connector keine Drittanbieterauthentifizierung erforderlich ist (AuthTypes.NONE). Eine Liste aller unterstützten Authentifizierungsmethoden finden Sie in der AuthType()-Referenz.

7. getConfig() definieren

Nutzer Ihres Connectors müssen ihn konfigurieren, bevor sie ihn verwenden können. In der Funktionsantwort getConfig() werden die Konfigurationsoptionen definiert, die Nutzer sehen. Looker Studio ruft die Funktion getConfig() auf, um die Konfigurationsdetails des Connectors abzurufen. Anhand der von getConfig() bereitgestellten Antwort rendert Looker Studio den Bildschirm für die Connector-Konfiguration und ändert das Verhalten bestimmter Connectors.

Auf dem Konfigurationsbildschirm können Sie mit den folgenden Formularelementen Informationen bereitstellen oder Nutzereingaben erfassen:

TEXTINPUT

Eingabeelement

Ein einzeiliges Textfeld.

TEXTAREA

Eingabeelement

Ein mehrzeiliges Textfeld.

SELECT_SINGLE

Eingabeelement

Ein Drop-down-Menü für Optionen zur Einzelauswahl.

SELECT_MULTIPLE

Eingabeelement

Ein Drop-down-Menü für Optionen zur Mehrfachauswahl.

CHECKBOX

Eingabeelement

Ein einzelnes Kästchen zum Anklicken, mit dem boolesche Werte erfasst werden können.

INFO

Display element

Ein statisches Nur-Text-Feld, das verwendet werden kann, um dem Nutzer Anweisungen oder Informationen zu geben.

Verwenden Sie das Element INFO, um Nutzeranweisungen bereitzustellen, und das Element TEXTINPUT, um den Namen des Eingabepakets vom Nutzer abzurufen. In der getConfig()-Antwort gruppieren Sie diese Formularelemente unter dem Schlüssel configParams.

Da für die API, mit der Sie eine Verbindung herstellen, ein Datum als Parameter erforderlich ist, legen Sie dateRangeRequired in der getConfig()-Antwort auf true fest. Dadurch wird Looker Studio angewiesen, mit allen Datenanfragen Zeiträume anzugeben. Wenn für Ihre Datenquelle kein Datum als Parameter erforderlich ist, können Sie es weglassen.

Fügen Sie der Datei Code.gs unter dem vorhandenen Code für getAuthType() den folgenden getConfig()-Code hinzu:

Code.gs

function getConfig(request) {
  var config = cc.getConfig();
  
  config.newInfo()
    .setId('instructions')
    .setText('Enter npm package names to fetch their download count.');
  
  config.newTextInput()
    .setId('package')
    .setName('Enter a single package name')
    .setHelpText('e.g. googleapis or lighthouse')
    .setPlaceholder('googleapis');
  
  config.setDateRangeRequired(true);
  
  return config.build();
}

Wenn Sie den Connector in Looker Studio verwenden, wird basierend auf diesen configParams ein Konfigurationsbildschirm wie der folgende angezeigt. Dazu kommen wir später noch.

7de872f17e59e92.png

Kommen wir nun zur nächsten Funktion: getSchema().

8. getSchema() definieren

Looker Studio ruft die Funktion getSchema() auf, um das Schema abzurufen, das der vom Nutzer ausgewählten Konfiguration für den Connector zugeordnet ist. Anhand der von getSchema() bereitgestellten Antwort wird in Looker Studio der Bildschirm „Felder“ angezeigt, auf dem alle Felder im Connector aufgeführt sind.

Für jede spezifische Konfiguration Ihres Connectors ist das Schema eine Liste aller Felder, für die der Connector Daten bereitstellen kann. Ein Connector kann je nach Konfiguration ein anderes Schema mit anderen Feldern zurückgeben. Das Schema kann Felder enthalten, die Sie aus Ihrer API-Quelle abrufen, Felder, die Sie in Apps Script berechnen, und Felder, die in Looker Studio mit einer Formel für ein berechnetes Feld berechnet werden. Ihr Connector stellt die Metadaten zu jedem Feld im Schema bereit, einschließlich:

  • Name des Felds
  • Datentyp für das Feld
  • Semantische Informationen

Weitere Informationen finden Sie in den Referenzen getSchema() und Field.

Je nachdem, wie Ihr Connector Daten abruft, kann das Schema fest sein oder dynamisch berechnet werden, wenn getSchema() aufgerufen wird. Konfigurationsparameter aus getConfig(), die vom Nutzer definiert werden, werden im request-Argument für die Funktion „getSchema()“ bereitgestellt.

Für dieses Codelab müssen Sie nicht auf das request-Argument zugreifen. Im nächsten Abschnitt erfahren Sie mehr über das Argument request, wenn Sie Code für die Funktion getData() schreiben.

Das Schema für Ihren Connector ist festgelegt und enthält die folgenden drei Felder:

packageName

Name des vom Nutzer bereitgestellten npm-Pakets

downloads

Anzahl der Downloads des npm-Pakets

day

Datum der Downloadanzahl

Unten finden Sie den getSchema()-Code für Ihren Connector. Die Hilfsfunktion getFields() abstrahiert die Erstellung der Felder, da diese Funktionalität sowohl von getSchema() als auch von getData() benötigt wird. Fügen Sie Ihrer Code.gs-Datei den folgenden Code hinzu:

Code.gs

function getFields(request) {
  var cc = DataStudioApp.createCommunityConnector();
  var fields = cc.getFields();
  var types = cc.FieldType;
  var aggregations = cc.AggregationType;
  
  fields.newDimension()
    .setId('packageName')
    .setType(types.TEXT);
  
  fields.newMetric()
    .setId('downloads')
    .setType(types.NUMBER)
    .setAggregation(aggregations.SUM);
  
  fields.newDimension()
    .setId('day')
    .setType(types.YEAR_MONTH_DAY);
  
  return fields;
}

function getSchema(request) {
  var fields = getFields(request).build();
  return { schema: fields };
}

Anhand dieses Schemas können Sie die folgenden Felder im Looker Studio-Feldmenü erwarten, wenn Sie den Connector in Looker Studio verwenden. Dazu kommen wir später noch einmal, wenn Sie den Connector testen.

c7cd7057b202be59.png

Kommen wir nun zur letzten Funktion: getData().

9. getData() definieren: Teil 1

Die Funktion getData() wird in Looker Studio immer dann aufgerufen, wenn Daten abgerufen werden müssen. Anhand der von getData() bereitgestellten Antwort werden Diagramme im Dashboard gerendert und aktualisiert. getData() kann bei folgenden Ereignissen aufgerufen werden:

  • Nutzer fügt dem Dashboard ein Diagramm hinzu
  • Nutzer bearbeitet ein Diagramm
  • Nutzer ruft das Dashboard auf
  • Nutzer bearbeitet einen Filter oder ein zugehöriges Steuerelement für Daten
  • Looker Studio benötigt eine Stichprobe von Daten

Sie müssen keinen Code von dieser Seite kopieren, da Sie den fertigen

getData()

Code in einem späteren Schritt

Das request-Objekt

Looker Studio übergibt das request-Objekt bei jedem getData()-Aufruf. Sehen Sie sich die Struktur des request-Objekts unten an. Das hilft Ihnen, den Code für Ihre getData()-Funktion zu schreiben.

request-Objektstruktur

{
  configParams: object,
  scriptParams: object,
  dateRange: {
    startDate: string,
    endDate: string
  },
  fields: [
    {
      name: Field.name
    }
  ]
}
  • Das configParams-Objekt enthält Konfigurationswerte für die in getConfig()definierten und vom Nutzer konfigurierten Parameter.
  • Das scriptParams-Objekt enthält Informationen, die für die Ausführung des Connectors relevant sind. Für dieses Codelab ist das nicht erforderlich.
  • dateRange enthält den angeforderten Zeitraum, wenn er in der getConfig()-Antwort angefordert wurde.
  • fields enthält die Liste der Namen der Felder, für die Daten angefordert werden.

Für Ihren Connector könnte ein Beispiel für request aus der Funktion getData() so aussehen:

{
  configParams: {
    package: 'jquery'
  },
  dateRange: {
    startDate: '2017-07-16',
    endDate: '2017-07-18'
  },
  fields: [
    {
      name: 'day',
    },
    {
      name: 'downloads',
    }
  ]
}

Für den getData()-Aufruf im obigen request werden nur zwei Felder angefordert, obwohl das Connector-Schema zusätzliche Felder enthält. Auf der nächsten Seite finden Sie die Beispielantwort für diesen getData()-Aufruf und die allgemeine getData()-Antwortstruktur.

10. getData() definieren: Teil 2

In der getData()-Antwort müssen Sie sowohl das Schema als auch die Daten für die angeforderten Felder angeben. Sie teilen den Code in drei Segmente auf:

  • Schema für angeforderte Felder erstellen
  • Daten aus der API abrufen und parsen.
  • Geparste Daten transformieren und nach angeforderten Feldern filtern.

Sie müssen keinen Code von dieser Seite kopieren, da Sie den fertigen

getData()

Code auf der nächsten Seite

Das ist die Struktur von getData()für Ihren Connector.

function getData(request) {

  // TODO: Create schema for requested fields.
  
  // TODO: Fetch and parse data from API.
  
  // TODO: Transform parsed data and filter for requested fields.

  return {
    schema: <filtered schema>,
    rows: <transformed and filtered data>
  };
}

Schema für angeforderte Felder erstellen

// Create schema for requested fields
  var requestedFieldIds = request.fields.map(function(field) {
    return field.name;
  });
  var requestedFields = getFields().forIds(requestedFieldIds);

Daten aus der API abrufen und parsen

Die npm-API-URL hat dieses Format:

https://api.npmjs.org/downloads/point/{start_date}:{end_date}/{package}

Erstellen Sie die URL für die API mit den von Looker Studio bereitgestellten request.dateRange.startDate, request.dateRange.endDate und request.configParams.package. Rufen Sie die Daten dann mit UrlFetchApp(Apps Script-Klasse: reference) aus der API ab. Parsen Sie dann die abgerufene Antwort.

  // Fetch and parse data from API
  var url = [
    'https://api.npmjs.org/downloads/range/',
    request.dateRange.startDate,
    ':',
    request.dateRange.endDate,
    '/',
    request.configParams.package
  ];
  var response = UrlFetchApp.fetch(url.join(''));
  var parsedResponse = JSON.parse(response).downloads;

Geparste Daten transformieren und nach angeforderten Feldern filtern

Die Antwort der npm API hat das folgende Format:

{
  downloads: [
    {
    day: '2014-02-27',
    downloads: 1904088
    },
    ..
    {
    day: '2014-03-04',
    downloads: 7904294
    }
  ],
  start: '2014-02-25',
  end: '2014-03-04',
  package: 'somepackage'
}

Transformiere die Antwort der npm-API und gib die getData()-Antwort im folgenden Format an. Wenn dieses Format unklar ist, sehen Sie sich die Beispielantwort im folgenden Absatz an.

{
  schema: [
    {
      object(Field)
    }
  ],
  rows: [
    {
      values: [string]
    }
  ]
}

Geben Sie in der Antwort das Schema nur für die angeforderten Felder mit der Property schema zurück. Sie geben die Daten mit dem Attribut rows als Liste von Zeilen zurück. Für jede Zeile muss die Reihenfolge der Felder in values mit der Reihenfolge der Felder in schema übereinstimmen. Ausgehend von unserem vorherigen Beispiel für request sieht die Antwort für getData() so aus:

{
  schema: requestedFields.build(),
  rows: [
    {
      values: [ 38949, '20170716']
    },
    {
      values: [ 165314, '20170717']
    },
    {
      values: [ 180124, '20170718']
    },
  ]
}

Sie haben bereits eine Teilmenge des Schemas erstellt. Verwenden Sie die folgende Funktion, um die geparsten Daten zu transformieren und nach angeforderten Feldern zu filtern.

function responseToRows(requestedFields, response, packageName) {
  // Transform parsed data and filter for requested fields
  return response.map(function(dailyDownload) {
    var row = [];
    requestedFields.asArray().forEach(function (field) {
      switch (field.getId()) {
        case 'day':
          return row.push(dailyDownload.day.replace(/-/g, ''));
        case 'downloads':
          return row.push(dailyDownload.downloads);
        case 'packageName':
          return row.push(packageName);
        default:
          return row.push('');
      }
    });
    return { values: row };
  });
}

11. getData() definieren: Teil 3

Der kombinierte getData()-Code sieht so aus: Fügen Sie Ihrer Code.gs-Datei den folgenden Code hinzu:

Code.gs

function responseToRows(requestedFields, response, packageName) {
  // Transform parsed data and filter for requested fields
  return response.map(function(dailyDownload) {
    var row = [];
    requestedFields.asArray().forEach(function (field) {
      switch (field.getId()) {
        case 'day':
          return row.push(dailyDownload.day.replace(/-/g, ''));
        case 'downloads':
          return row.push(dailyDownload.downloads);
        case 'packageName':
          return row.push(packageName);
        default:
          return row.push('');
      }
    });
    return { values: row };
  });
}

function getData(request) {
  var requestedFieldIds = request.fields.map(function(field) {
    return field.name;
  });
  var requestedFields = getFields().forIds(requestedFieldIds);

  // Fetch and parse data from API
  var url = [
    'https://api.npmjs.org/downloads/range/',
    request.dateRange.startDate,
    ':',
    request.dateRange.endDate,
    '/',
    request.configParams.package
  ];
  var response = UrlFetchApp.fetch(url.join(''));
  var parsedResponse = JSON.parse(response).downloads;
  var rows = responseToRows(requestedFields, parsedResponse, request.configParams.package);

  return {
    schema: requestedFields.build(),
    rows: rows
  };
}

Sie haben die Datei Code.gs fertig bearbeitet. Aktualisieren Sie als Nächstes das Manifest.

12. Manifest aktualisieren

Wählen Sie im Apps Script-Editor Projekteinstellungen > Manifestdatei „appsscript.json“ im Editor anzeigen aus.

90a68a58bbbb63c4.png

Dadurch wird eine neue appsscript.json-Manifestdatei erstellt.

1081c738d5d577a6.png

Ersetzen Sie Ihre appscript.json-Datei durch Folgendes:

appsscript.json

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",

  "dataStudio": {
    "name": "npm Downloads - From Codelab",
    "logoUrl": "https://raw.githubusercontent.com/npm/logos/master/npm%20logo/npm-logo-red.png",
    "company": "Codelab user",
    "companyUrl": "https://developers.google.com/looker-studio/",
    "addonUrl": "https://github.com/googledatastudio/example-connectors/tree/master/npm-downloads",
    "supportUrl": "https://github.com/googledatastudio/community-connectors/issues",
    "description": "Get npm package download counts.",
    "sources": ["npm"]
  }
}

Speichern Sie das Apps Script-Projekt.

5701ece1c89415c.png

Glückwunsch! Sie haben Ihren ersten Community Connector erstellt und können ihn jetzt testen.

13. Connector in Looker Studio testen

Deployment verwenden

Schritt 1:Klicken Sie in der Apps Script-Entwicklungsumgebung auf Bereitstellen > Bereitstellungen testen, um das Dialogfeld „Bereitstellungen testen“ zu öffnen.

3f57ea0feceb2596.png

Das Standard-Deployment Head Deployment wird aufgeführt.

Schritt 2:Klicken Sie auf Kopieren, um die Head-Deployment-ID zu kopieren.

Schritt 3:Wenn Sie Ihren Connector in Looker Studio laden möchten, ersetzen Sie den Platzhalter <HEAD_DEPLOYMENT_ID> im folgenden Link durch die Head Deployment ID Ihres Connectors und folgen Sie dem Link in Ihrem Browser:

https://lookerstudio.google.com/datasources/create?connectorId=<HEAD_DEPLOYMENT_ID>

Connector autorisieren

Looker Studio-Neulinge:Wenn Sie Looker Studio noch nicht verwendet haben, werden Sie aufgefordert, Looker Studio zu autorisieren und den Nutzungsbedingungen zuzustimmen. Schließen Sie den Autorisierungsvorgang ab. Wenn Sie Looker Studio zum ersten Mal verwenden, wird möglicherweise auch ein Dialogfeld angezeigt, in dem Sie Ihre Marketingeinstellungen aktualisieren können. Wenn Sie per E‑Mail über die neuesten Funktionen, Updates und Produktmitteilungen informiert werden möchten, melden Sie sich für Produktmitteilungen an.

Nach dem Laden werden Sie aufgefordert, den Connector zu autorisieren.

d7e66726a1e64c05.png

Klicken Sie auf „Autorisieren“ und erteilen Sie dem Connector die erforderliche Autorisierung.

Connector konfigurieren

Nach der Autorisierung wird der Konfigurationsbildschirm angezeigt. Geben Sie im Texteingabebereich lighthouse ein und klicken Sie rechts oben auf „Verbinden“.

ec7416d6dbeabc8f.png

Schema bestätigen

Der Bildschirm „Felder“ wird angezeigt. Klicken Sie rechts oben auf Bericht erstellen.

4a9084bd51d2fbb8.png

Dashboard erstellen

Sie befinden sich in der Looker Studio-Dashboard-Umgebung. Klicken Sie auf Zum Bericht hinzufügen.

1ca21e327308237c.png

Jedes Mal, wenn ein Nutzer in Looker Studio auf einen Connector zugreift und eine neue Konfiguration hinzufügt, wird in seinem Looker Studio-Konto eine neue Datenquelle erstellt. Eine Datenquelle ist eine Instanziierung des Connectors basierend auf einer bestimmten Konfiguration. Je nach Connector und der vom Nutzer ausgewählten Konfiguration wird von einer Datenquelle eine Datentabelle mit einer bestimmten Gruppe von Feldern zurückgegeben. Nutzer können mehrere Datenquellen aus demselben Connector erstellen. Eine Datenquelle kann in mehreren Berichten verwendet werden und derselbe Bericht kann mehrere Datenquellen nutzen.

Fügen Sie jetzt ein Zeitreihendiagramm hinzu. Klicken Sie im Menü auf Einfügen > Zeitreihe. Platzieren Sie die Zeitreihe dann auf dem Arbeitsbereich. Sie sollten ein Zeitreihendiagramm mit der Anzahl der npm-Downloads für das ausgewählte Paket sehen. Fügen Sie eine Datumsfiltersteuerung hinzu und sehen Sie sich das Dashboard wie unten dargestellt an.

4c076e07665f57aa.gif

Geschafft! Sie haben gerade Ihren ersten Community Connector erstellt. Damit sind wir am Ende dieses Codelabs angelangt. Sehen wir uns nun an, welche nächsten Schritte Sie unternehmen können.

14. Nächste Schritte

Connector verbessern

So können Sie den Connector, den Sie gerade erstellt haben, verbessern:

  • Wenn Sie in Looker Studio auf dem Konfigurationsbildschirm für den Connector keinen Paketnamen angeben, wird beim Erstellen des Zeitachsendiagramms eine Fehlermeldung angezeigt. Fügen Sie der Connector-Konfiguration eine Eingabevalidierung oder eine Standardoption hinzu.
  • Fügen Sie in Ihrer Connector-Konfiguration Unterstützung für das gleichzeitige Abfragen mehrerer Paketnamen hinzu. Hinweis: Die npm-Paket-Downloadzahlen-API unterstützt die Eingabe mehrerer durch Komma getrennter Paketnamen.
  • Lösungen für beide Probleme finden Sie in unserem npm-Connector-Code.

Mehr Möglichkeiten mit Community-Connectors

Zusätzliche Ressourcen

Die folgenden Links bieten Ihnen die Möglichkeit, tiefer in das Thema dieses Codelabs einzusteigen.

Ressourcentyp

Nutzerfunktionen

Entwicklerfunktionen

Dokumentation

Hilfe

Entwicklerdokumentation

Neuigkeiten und Updates

Melden Sie sich in Looker Studio > Nutzereinstellungen an.

Mailingliste für Entwickler

Fragen stellen

Nutzerforum

Stack Overflow [looker-studio]

Videos

DataVis DevTalk

Beispiele

Open-Source-Repository