Muestras de código JavaScript

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:

  1. Crea o selecciona un proyecto en la Consola de APIs de Google.
  2. Habilita la API de YouTube Analytics para tu proyecto.
  3. 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.
  4. En la página Credenciales, haz clic en el botón Crear credenciales y selecciona ID de cliente de OAuth.
  5. Selecciona el tipo de aplicación Aplicación web.
  6. 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.
  7. Haz clic en el botón Crear para terminar de crear tus credenciales.
  8. 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:

  1. 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.
  2. 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
  3. 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.
  4. 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>

yt_analytics_v2.html