JavaScript-Codebeispiele
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Im folgenden Codebeispiel wird die Google APIs-Clientbibliothek für JavaScript verwendet. Sie können dieses Beispiel aus dem Ordner javascript des YouTube APIs-Codebeispiel-Repositorys 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"})
...
Möglicherweise muss Ihre Anwendung auch Zugriff auf andere Bereiche anfordern. Beispielsweise muss eine Anwendung, die die YouTube Analytics API und die YouTube Data API aufruft, möglicherweise auch Zugriff auf die YouTube-Konten der Nutzer erhalten. In der Autorisierungsübersicht werden Bereiche aufgeführt, die in der Regel in Anwendungen verwendet werden, die die YouTube Analytics API aufrufen.
Tägliche Kanalstatistiken abrufen
In diesem Beispiel wird die YouTube Analytics API aufgerufen, um die täglichen Aufrufe und andere Messwerte für den Kanal des autorisierenden Nutzers für das Kalenderjahr 2017 abzurufen. In diesem Beispiel wird die Google APIs-Clientbibliothek für JavaScript 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:
- Erstellen oder wählen Sie ein Projekt in der Google API Console aus.
- Aktivieren Sie die YouTube Analytics API für Ihr Projekt.
- 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“.
- Klicken Sie auf der Seite Anmeldedaten auf die Schaltfläche Anmeldedaten erstellen und wählen Sie OAuth-Client-ID aus.
- Wählen Sie den Anwendungstyp „Webanwendung“ aus.
- Geben Sie im Feld „Autorisierte JavaScript-Quellen“ die URL ein, über die Sie das Codebeispiel bereitstellen. Sie können beispielsweise
http://localhost:8000 oder http://yourserver.example.com verwenden. Sie können das Feld „Autorisierte Weiterleitungs-URIs“ leer lassen.
- Klicken Sie auf die Schaltfläche Erstellen, um das Erstellen der Anmeldedaten abzuschließen.
- Kopieren Sie die Client-ID, bevor Sie das Dialogfeld schließen. Sie benötigen sie für das Codebeispiel.
Lokale Kopie des Beispiels erstellen
Speichern Sie das Beispiel dann in einer lokalen Datei. Suchen Sie im Beispiel die folgende 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:
- Öffnen Sie die lokale Datei in einem Webbrowser und öffnen Sie die Debugging-Konsole im Browser. Es sollte eine Seite mit zwei Schaltflächen angezeigt werden.
- Klicken Sie auf die Schaltfläche Autorisieren und laden, um den Nutzerautorisierungsablauf zu starten. Wenn Sie der App die Berechtigung erteilen, Ihre Kanaldaten abzurufen, sollten im Browser die folgenden Zeilen in der Konsole angezeigt werden:
Sign-in successful
GAPI client loaded for API
- Wenn Sie anstelle der oben genannten Zeilen eine Fehlermeldung sehen, prüfen Sie, ob Sie das Skript über den autorisierten Weiterleitungs-URI laden, den Sie für Ihr Projekt eingerichtet haben, und ob Sie Ihre Client-ID wie oben beschrieben in den Code eingefügt haben.
- Klicken Sie auf die Schaltfläche Ausführen, um die API aufzurufen. Im Browser sollte ein
response-Objekt in der Konsole ausgegeben werden. In diesem Objekt wird die Eigenschaft 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>
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2025-08-21 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-08-21 (UTC)."],[[["\u003cp\u003eThis sample code uses the Google APIs Client Library for JavaScript to retrieve daily views and other metrics for a YouTube channel for the 2017 calendar year, utilizing the YouTube Analytics API.\u003c/p\u003e\n"],["\u003cp\u003eThe code requests user permission to access the \u003ccode\u003ehttps://www.googleapis.com/auth/yt-analytics.readonly\u003c/code\u003e scope to read YouTube Analytics data.\u003c/p\u003e\n"],["\u003cp\u003eSetting up authorization credentials in the Google API Console is required, including creating an OAuth client ID, enabling the YouTube Analytics API, and entering authorized JavaScript origins.\u003c/p\u003e\n"],["\u003cp\u003eThe sample requires replacing \u003ccode\u003e<var translate="no">YOUR_CLIENT_ID</var>\u003c/code\u003e with the client ID obtained from the Google API Console in order to run.\u003c/p\u003e\n"],["\u003cp\u003eTo run the code, users must authorize the application, load the API client, and execute the API query by clicking buttons in the browser, with successful operations and responses being logged in the browser's console.\u003c/p\u003e\n"]]],["The code uses the Google APIs Client Library for JavaScript to retrieve YouTube channel statistics. It requires user authorization for the `https://www.googleapis.com/auth/yt-analytics.readonly` scope. Users need to create authorization credentials in the Google API Console, enabling the YouTube Analytics API. The client ID must be added to the code sample, which is loaded from a specified URL. Upon running, the code allows authorization and data retrieval, displaying daily channel metrics (views, watch time, etc.) for 2017.\n"],null,["# JavaScript Code Samples\n\nThe code sample below uses the [Google APIs Client Library for JavaScript](/api-client-library/javascript). You can download this sample from the `javascript` folder of the [YouTube APIs code sample repository on GitHub](https://github.com/youtube/api-samples).\n\nThe code requests the user's permission to access the `https://www.googleapis.com/auth/yt-analytics.readonly` scope. \n\n```\nreturn gapi.auth2.getAuthInstance()\n .signIn({scope: \"https://www.googleapis.com/auth/yt-analytics.readonly\"})\n ...\n```\n\nYour application might also need to request access to other scopes. For example, an application that calls the YouTube Analytics API and the YouTube Data API might need users to also grant access to their YouTube accounts. The [authorization overview](/youtube/reporting/guides/authorization#identify-access-scopes) identifies scopes typically used in applications that call the YouTube Analytics API.\n\nRetrieve daily channel statistics\n---------------------------------\n\nThis example calls the YouTube Analytics API to retrieve daily views and other metrics for the authorizing user's channel for the 2017 calendar year. The sample uses the [Google APIs JavaScript client library](/api-client-library/javascript).\n\n### Set up authorization credentials\n\nBefore running this sample locally for the first time, you need to set up authorization credentials for your project:\n\n1. Create or select a project in the [Google API Console](https://console.cloud.google.com/).\n2. Enable the [YouTube Analytics API](https://console.developers.google.com/apis/library/youtubeanalytics.googleapis.com) for your project.\n3. At the top of the [Credentials](https://console.developers.google.com/apis/credentials) page, select the **OAuth consent screen** tab. Select an Email address, enter a Product name if not already set, and click the Save button.\n4. On the [Credentials](https://console.developers.google.com/apis/credentials) page, click the **Create credentials** button and select **Oauth client ID**.\n5. Select the application type Web application.\n6. In the Authorized JavaScript origins field, enter the URL from which you will be serving the code sample. For example, you could use something like `http://localhost:8000` or `http://yourserver.example.com`. You can leave the Authorized redirect URIs field blank.\n7. Click the **Create** button to finish creating your credentials.\n8. Before closing the dialog box, copy the client ID, which you will need to put into the code sample.\n\n### Make a local copy of the sample\n\nThen, save the sample to a local file. In the sample, find the following line and replace \u003cvar translate=\"no\"\u003eYOUR_CLIENT_ID\u003c/var\u003e with the client ID you obtained when setting up your authorization credentials. \n\n```\ngapi.auth2.init({client_id: 'YOUR_CLIENT_ID'});\n```\n\n### Run the code\n\nNow, you are ready to actually test the sample:\n\n1. Open the local file from a web browser, and open the debugging console in the browser. You should see a page that displays two buttons.\n2. Click the **authorize and load** button to launch the user authorization flow. If you authorize the app to retrieve your channel data, you should see the following lines print to the console in the browser: \n\n ```\n Sign-in successful\n GAPI client loaded for API\n ```\n3. If you see an error message instead of the lines above, confirm that you are loading the script from the authorized redirect URI that you set up for your project and that you put your client ID into the code as described above.\n4. Click the **execute** button to call the API. You should see a `response` object print to the console in the browser. In that object, the `result` property maps to an object that contains the API data.\n\n### Sample code\n\n```javascript\n\u003cscript src=\"https://apis.google.com/js/api.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n function authenticate() {\n return gapi.auth2.getAuthInstance()\n .signIn({scope: \"https://www.googleapis.com/auth/yt-analytics.readonly\"})\n .then(function() { console.log(\"Sign-in successful\"); },\n function(err) { console.error(\"Error signing in\", err); });\n }\n function loadClient() {\n return gapi.client.load(\"https://youtubeanalytics.googleapis.com/$discovery/rest?version=v2\")\n .then(function() { console.log(\"GAPI client loaded for API\"); },\n function(err) { console.error(\"Error loading GAPI client for API\", err); });\n }\n // Make sure the client is loaded and sign-in is complete before calling this method.\n function execute() {\n return gapi.client.youtubeAnalytics.reports.query({\n \"ids\": \"channel==MINE\",\n \"startDate\": \"2017-01-01\",\n \"endDate\": \"2017-12-31\",\n \"metrics\": \"views,estimatedMinutesWatched,averageViewDuration,averageViewPercentage,subscribersGained\",\n \"dimensions\": \"day\",\n \"sort\": \"day\"\n })\n .then(function(response) {\n // Handle the results here (response.result has the parsed body).\n console.log(\"Response\", response);\n },\n function(err) { console.error(\"Execute error\", err); });\n }\n gapi.load(\"client:auth2\", function() {\n gapi.auth2.init({client_id: 'YOUR_CLIENT_ID'});\n });\n\u003c/script\u003e\n\u003cbutton onclick=\"authenticate().then(loadClient)\"\u003eauthorize and load\u003c/button\u003e\n\u003cbutton onclick=\"execute()\"\u003eexecute\u003c/button\u003e\nhttps://github.com/youtube/api-samples/blob/07263305b59a7c3275bc7e925f9ce6cabf774022/javascript/yt_analytics_v2.html\n```"]]
