Muestras de código JavaScript
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
En el siguiente ejemplo de código, se usa la biblioteca cliente de las APIs de Google para JavaScript. Puedes descargar esta muestra desde la carpeta javascript del repositorio de muestras de código de las APIs de YouTube en GitHub.
El código solicita el permiso del usuario para acceder al alcance https://www.googleapis.com/auth/yt-analytics.readonly.
return gapi.auth2.getAuthInstance()
.signIn({scope: "https://www.googleapis.com/auth/yt-analytics.readonly"})
...
Es posible que tu aplicación también deba solicitar acceso a otros permisos. Por ejemplo, una aplicación que llama a la API de YouTube Analytics y a la API de YouTube Data podría necesitar que los usuarios también otorguen acceso a sus cuentas de YouTube. En el resumen de autorización, se identifican los alcances que se suelen usar en las aplicaciones que llaman a la API de YouTube Analytics.
Recupera estadísticas diarias del canal
En este ejemplo, se llama a la API de YouTube Analytics para recuperar las vistas diarias y otras métricas del canal del usuario autorizador para el año calendario 2017. En la muestra, se usa la biblioteca cliente de JavaScript de las APIs de Google.
Configura las credenciales de autorización
Antes de ejecutar esta muestra de forma local por primera vez, debes configurar las credenciales de autorización para tu proyecto:
- Crea o selecciona un proyecto en la Consola de APIs de Google.
- Habilita la API de YouTube Analytics para tu proyecto.
- En la parte superior de la página Credenciales, selecciona la pestaña Pantalla de consentimiento de OAuth. Selecciona una dirección de correo electrónico, ingresa un nombre del producto si aún no se configuró y haz clic en el botón Guardar.
- En la página Credenciales, haz clic en el botón Crear credenciales y selecciona ID de cliente de OAuth.
- Selecciona el tipo de aplicación Aplicación web.
- En el campo Orígenes autorizados de JavaScript, ingresa la URL desde la que entregarás el código de muestra. Por ejemplo, podrías usar algo como
http://localhost:8000 o http://yourserver.example.com. Puedes dejar en blanco el campo URIs de redireccionamiento autorizados.
- Haz clic en el botón Crear para terminar de crear tus credenciales.
- Antes de cerrar el cuadro de diálogo, copia el ID de cliente, que deberás colocar en la muestra de código.
Crea una copia local de la muestra
Luego, guarda la muestra en un archivo local. En la muestra, busca la siguiente línea y reemplaza YOUR_CLIENT_ID por el ID de cliente que obtuviste cuando configuraste tus credenciales de autorización.
gapi.auth2.init({client_id: 'YOUR_CLIENT_ID'});
Ejecuta el código
Ahora, ya puedes probar la muestra:
- Abre el archivo local desde un navegador web y abre la consola de depuración en el navegador. Deberías ver una página con dos botones.
- Haz clic en el botón Autorizar y cargar para iniciar el flujo de autorización del usuario. Si autorizas a la app para que recupere los datos de tu canal, deberías ver las siguientes líneas impresas en la consola del navegador:
Sign-in successful
GAPI client loaded for API
- Si ves un mensaje de error en lugar de las líneas anteriores, confirma que estás cargando la secuencia de comandos desde el URI de redireccionamiento autorizado que configuraste para tu proyecto y que colocaste tu ID de cliente en el código como se describió anteriormente.
- Haz clic en el botón Ejecutar para llamar a la API. Deberías ver un objeto
response impreso en la consola del navegador. En ese objeto, la propiedad result se asigna a un objeto que contiene los datos de la API.
Código de muestra
<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>
Salvo que se indique lo contrario, el contenido de esta página está sujeto a la licencia Atribución 4.0 de Creative Commons, y los ejemplos de código están sujetos a la licencia Apache 2.0. Para obtener más información, consulta las políticas del sitio de Google Developers. Java es una marca registrada de Oracle o sus afiliados.
Última actualización: 2025-08-21 (UTC)
[null,null,["Última actualización: 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```"]]
