JavaScript 程式碼範例
透過集合功能整理內容 你可以依據偏好儲存及分類內容。
下列程式碼範例使用 Google API JavaScript 專用用戶端程式庫。您可以從 GitHub 上的 YouTube API 程式碼範例存放區的 javascript 資料夾下載這個範例。
這段程式碼會要求使用者授權存取 https://www.googleapis.com/auth/yt-analytics.readonly 範圍。
return gapi.auth2.getAuthInstance() .signIn({scope: "https://www.googleapis.com/auth/yt-analytics.readonly"}) ... 您的應用程式可能也需要要求存取其他範圍。舉例來說，如果應用程式會呼叫 YouTube Analytics API 和 YouTube Data API，可能也需要使用者授權存取 YouTube 帳戶。授權總覽會列出通常用於呼叫 YouTube Analytics API 的範圍。
擷取每日頻道統計資料
這個範例會呼叫 YouTube Analytics API，擷取授權使用者頻道在 2017 年的每日觀看次數和其他指標。這個範例使用 Google API JavaScript 用戶端程式庫。
設定授權憑證
首次在本機執行這個範例前，請先設定專案的授權憑證：
- 在 Google API 控制台中建立或選取專案。
- 為專案啟用 YouTube Analytics API。
- 在「憑證」頁面頂端，選取「OAuth 同意畫面」分頁標籤。選取電子郵件地址，輸入產品名稱 (如尚未設定)，然後按一下「儲存」按鈕。
- 在「憑證」頁面中，按一下「建立憑證」按鈕，然後選取「Oauth 用戶端 ID」。
- 選取應用程式類型「網頁應用程式」。
- 在「授權的 JavaScript 來源」欄位中，輸入您提供程式碼範例的網址。舉例來說，您可以使用
http://localhost:8000 或 http://yourserver.example.com。您可以將「已授權的重新導向 URI」欄位留空。 - 按一下「建立」按鈕，完成建立憑證。
- 關閉對話方塊前，請複製用戶端 ID，您需要將這個 ID 放入程式碼範例。
建立範例的本機副本
然後將範例儲存至本機檔案。在範例中找出下列這一行，並將 YOUR_CLIENT_ID 替換為您在設定授權憑證時取得的用戶端 ID。
gapi.auth2.init({client_id: 'YOUR_CLIENT_ID'}); 執行程式碼
現在，您已準備好實際測試範例：
- 透過網路瀏覽器開啟本機檔案，並在瀏覽器中開啟偵錯控制台。您應該會看到顯示兩個按鈕的頁面。
- 按一下「授權並載入」按鈕，啟動使用者授權流程。授權應用程式擷取頻道資料後，瀏覽器的控制台應會顯示下列幾行內容：
Sign-in successful GAPI client loaded for API
- 如果看到錯誤訊息而非上述程式碼，請確認您是從為專案設定的授權重新導向 URI 載入指令碼，並如上所述將用戶端 ID 放入程式碼。
- 按一下「execute」按鈕呼叫 API。您應該會在瀏覽器的控制台中看到
response 物件。在該物件中，result 屬性會對應至包含 API 資料的物件。
程式碼範例
<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> 除非另有註明，否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權，程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間：2025-08-21 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間：2025-08-21 (世界標準時間)。"],[[["\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```"]]
