Mã JavaScript mẫu
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Đoạn mã dưới đây sử dụng Thư viện ứng dụng Google API cho JavaScript. Bạn có thể tải mẫu này xuống từ thư mục javascript của kho lưu trữ mã mẫu YouTube API trên GitHub.
Mã này yêu cầu người dùng cấp quyền truy cập vào phạm vi https://www.googleapis.com/auth/yt-analytics.readonly.
return gapi.auth2.getAuthInstance()
.signIn({scope: "https://www.googleapis.com/auth/yt-analytics.readonly"})
...
Ứng dụng của bạn cũng có thể cần yêu cầu cấp quyền truy cập vào các phạm vi khác. Ví dụ: một ứng dụng gọi YouTube Analytics API và YouTube Data API có thể yêu cầu người dùng cấp quyền truy cập vào tài khoản YouTube của họ. Thông tin tổng quan về việc uỷ quyền xác định các phạm vi thường được dùng trong những ứng dụng gọi API YouTube Analytics.
Truy xuất số liệu thống kê hằng ngày về kênh
Ví dụ này gọi YouTube Analytics API để truy xuất số lượt xem hằng ngày và các chỉ số khác cho kênh của người dùng uỷ quyền trong năm dương lịch 2017. Mẫu này sử dụng Thư viện ứng dụng JavaScript của Google API.
Thiết lập thông tin đăng nhập uỷ quyền
Trước khi chạy mẫu này cục bộ lần đầu tiên, bạn cần thiết lập thông tin uỷ quyền cho dự án của mình:
- Tạo hoặc chọn một dự án trong Google API Console.
- Bật YouTube Analytics API cho dự án của bạn.
- Ở đầu trang Credentials (Thông tin xác thực), hãy chọn thẻ OAuth consent screen (Màn hình yêu cầu đồng ý OAuth). Chọn một Địa chỉ email, nhập Tên sản phẩm (nếu chưa đặt) rồi nhấp vào nút Lưu.
- Trên trang Thông tin xác thực, hãy nhấp vào nút Tạo thông tin xác thực rồi chọn Mã ứng dụng OAuth.
- Chọn loại ứng dụng là Ứng dụng web.
- Trong trường Nguồn gốc JavaScript được uỷ quyền, hãy nhập URL mà bạn sẽ phân phát mẫu mã. Ví dụ: bạn có thể sử dụng
http://localhost:8000 hoặc http://yourserver.example.com. Bạn có thể để trống trường URI chuyển hướng được uỷ quyền.
- Nhấp vào nút Tạo để hoàn tất quá trình tạo thông tin đăng nhập.
- Trước khi đóng hộp thoại, hãy sao chép mã ứng dụng khách. Bạn sẽ cần đặt mã này vào mẫu mã.
Tạo bản sao cục bộ của mẫu
Sau đó, hãy lưu mẫu vào một tệp cục bộ. Trong mẫu, hãy tìm dòng sau và thay thế YOUR_CLIENT_ID bằng mã ứng dụng khách mà bạn nhận được khi thiết lập thông tin xác thực uỷ quyền.
gapi.auth2.init({client_id: 'YOUR_CLIENT_ID'});
Chạy mã
Giờ đây, bạn đã sẵn sàng kiểm thử mẫu thực tế:
- Mở tệp cục bộ bằng trình duyệt web và mở bảng điều khiển gỡ lỗi trong trình duyệt. Bạn sẽ thấy một trang có 2 nút.
- Nhấp vào nút uỷ quyền và tải để khởi chạy quy trình uỷ quyền người dùng. Nếu cho phép ứng dụng truy xuất dữ liệu kênh của bạn, bạn sẽ thấy các dòng sau đây in ra bảng điều khiển trong trình duyệt:
Sign-in successful
GAPI client loaded for API
- Nếu bạn thấy thông báo lỗi thay vì các dòng ở trên, hãy xác nhận rằng bạn đang tải tập lệnh từ URI chuyển hướng được uỷ quyền mà bạn đã thiết lập cho dự án của mình và bạn đã đặt mã ứng dụng khách vào mã như mô tả ở trên.
- Nhấp vào nút execute (thực thi) để gọi API. Bạn sẽ thấy một đối tượng
response in ra bảng điều khiển trong trình duyệt. Trong đối tượng đó, thuộc tính result sẽ liên kết với một đối tượng chứa dữ liệu API.
Mã mẫu
<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>
Trừ phi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2025-08-21 UTC.
[null,null,["Cập nhật lần gần đây nhất: 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```"]]
