JavaScript-Codebeispiele

Im Codebeispiel unten wird die Google APIs-Clientbibliothek für JavaScript verwendet. Du kannst dieses Beispiel aus dem Ordner javascript des Beispiel-Repositorys für YouTube APIs auf GitHub herunterladen.

Der Code fordert die Berechtigung des Nutzers an, auf den Bereich https://www.googleapis.com/auth/yt-analytics.readonly zuzugreifen.

return gapi.auth2.getAuthInstance()
    .signIn({scope: "https://www.googleapis.com/auth/yt-analytics.readonly"})
    ...

Ihre Anwendung muss möglicherweise auch Zugriff auf andere Bereiche anfordern. Bei einer Anwendung, die die YouTube Analytics API und die YouTube Data API aufruft, müssen Nutzer unter Umständen auch Zugriff auf ihre YouTube-Konten gewähren. In der Autorisierungsübersicht sind die Bereiche aufgeführt, die üblicherweise in Anwendungen verwendet werden, die die YouTube Analytics API aufrufen.

Tägliche Kanalstatistiken abrufen

In diesem Beispiel wird die YouTube Analytics API aufgerufen, um tägliche Aufrufe und andere Messwerte für den Kanal des Nutzers, der die Autorisierung aktiviert hat, für das Kalenderjahr 2017 abzurufen. In diesem Beispiel wird die JavaScript-Clientbibliothek für Google APIs verwendet.

Anmeldedaten für die Autorisierung einrichten

Bevor Sie dieses Beispiel zum ersten Mal lokal ausführen, müssen Sie Autorisierungsanmeldedaten für Ihr Projekt einrichten:

1. Erstellen oder wählen Sie ein Projekt in der Google API Console aus.
2. Aktivieren Sie die YouTube Analytics API für Ihr Projekt.
3. Wählen Sie oben auf der Seite Anmeldedaten den Tab OAuth-Zustimmungsbildschirm aus. Wählen Sie eine E-Mail-Adresse aus, geben Sie einen Produktnamen ein, falls noch nicht geschehen, und klicken Sie auf die Schaltfläche „Speichern“.
4. Klicken Sie auf der Seite Anmeldedaten auf Anmeldedaten erstellen und wählen Sie OAuth-Client-ID aus.
5. Wählen Sie den Anwendungstyp „Webanwendung“ aus.
6. Geben Sie im Feld „Autorisierte JavaScript-Quellen“ die URL ein, über die Sie das Codebeispiel bereitstellen möchten. Beispiel: http://localhost:8000 oder http://yourserver.example.com. Sie können das Feld für die autorisierten Weiterleitungs-URIs leer lassen.
7. Klicken Sie auf Erstellen, um die Erstellung Ihrer Anmeldedaten abzuschließen.
8. Kopieren Sie vor dem Schließen des Dialogfelds die Client-ID, die Sie in das Codebeispiel einfügen müssen.

Lokale Kopie der Stichprobe erstellen

Speichern Sie das Beispiel dann in einer lokalen Datei. Suchen Sie im Beispiel nach der folgenden Zeile und ersetzen Sie YOUR_CLIENT_ID durch die Client-ID, die Sie beim Einrichten Ihrer Anmeldedaten für die Autorisierung erhalten haben.

gapi.auth2.init({client_id: 'YOUR_CLIENT_ID'});

Code ausführen

Jetzt können Sie das Beispiel testen:

1. Öffnen Sie die lokale Datei in einem Webbrowser und dann die Debugging-Konsole im Browser. Es sollte eine Seite mit zwei Schaltflächen angezeigt werden.
2. Klicken Sie auf die Schaltfläche Autorisieren und laden, um den Nutzerautorisierungsvorgang zu starten. Wenn du der App das Abrufen deiner Kanaldaten erlaubst, sollten die folgenden Zeilen in der Konsole im Browser angezeigt werden:

   Sign-in successful
   GAPI client loaded for API

3. Wenn Sie anstelle der oben genannten Zeilen eine Fehlermeldung sehen, prüfen Sie, ob Sie das Skript aus dem autorisierten Weiterleitungs-URI geladen haben, den Sie für Ihr Projekt eingerichtet haben. Fügen Sie dann Ihre Client-ID wie oben beschrieben in den Code ein.
4. Klicken Sie auf die Schaltfläche Ausführen, um die API aufzurufen. Es sollte ein response-Objekt auf der Konsole im Browser angezeigt werden. In diesem Objekt wird die Property result einem Objekt zugeordnet, das die API-Daten enthält.

Beispielcode

<script src="https://apis.google.com/js/api.js"></script>
<script>
  function authenticate() {
    return gapi.auth2.getAuthInstance()
        .signIn({scope: "https://www.googleapis.com/auth/yt-analytics.readonly"})
        .then(function() { console.log("Sign-in successful"); },
              function(err) { console.error("Error signing in", err); });
  }
  function loadClient() {
    return gapi.client.load("https://youtubeanalytics.googleapis.com/$discovery/rest?version=v2")
        .then(function() { console.log("GAPI client loaded for API"); },
              function(err) { console.error("Error loading GAPI client for API", err); });
  }
  // Make sure the client is loaded and sign-in is complete before calling this method.
  function execute() {
    return gapi.client.youtubeAnalytics.reports.query({
      "ids": "channel==MINE",
      "startDate": "2017-01-01",
      "endDate": "2017-12-31",
      "metrics": "views,estimatedMinutesWatched,averageViewDuration,averageViewPercentage,subscribersGained",
      "dimensions": "day",
      "sort": "day"
    })
        .then(function(response) {
                // Handle the results here (response.result has the parsed body).
                console.log("Response", response);
              },
              function(err) { console.error("Execute error", err); });
  }
  gapi.load("client:auth2", function() {
    gapi.auth2.init({client_id: 'YOUR_CLIENT_ID'});
  });
</script>
<button onclick="authenticate().then(loadClient)">authorize and load</button>
<button onclick="execute()">execute</button>
yt_analytics_v2.html